electron学习笔记
electron学习笔记
新建目录
mkdir d:/test
cd test
初始化项目的命令：
npm init
一路回车，完成之后，在package.json文件中：
author 要补全
description 要补全，否则后面无法打包。
接下来，安装electron，使用下面的命令：
npm install --save-dev electron
上面的命令简化为：
npm i electron -D
把package.json文件中的
"test": "echo \"Error: no test specified\" && exit 1" 这一行删除，
修改为：
"start":"electron ."
"scripts": {"start":"electron ."},新建个main.js
使用下面的命令，运行程序：
npm start
打开浏览器调试窗口：
ctrl+shift+i
ctrl+r刷新网页
在Chromium-based浏览器中（如Google Chrome、Brave、Edge等），你可以使用以下快捷键来调整浏览器窗口的缩放级别：
放大页面内容：Ctrl + + （Ctrl和加号）
缩小页面内容：Ctrl + - （Ctrl和减号）
复原到默认缩放比例（通常是100%）：Ctrl + 0
最小化然后还原窗口（使用Windows + Down Arrow 或者Windows + Up Arrow 如果你在Windows系统上）
vue用于electron的网址：
https://cn-evite.netlify.app
完整的程序代码：
目录结构， 见下图：
在html文件夹下面，有2个文件：index.html和render.js
package.json文件：
{"name": "etest","version": "1.0.0","description": "electron-learning","main": "main.js","scripts": {"start": "electron ."},"author": "xuexi","license": "ISC","devDependencies": {"electron": "^31.2.1"}
}
main.js文件：
const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const fs = require('fs');
const { log } = require('console');function writefile(event, data) {//console.log(event);console.log(data);fs.writeFileSync('d:/hello.txt', data)}function readFile() {const res = fs.readFileSync('d:/hello.txt').toString()console.log(res);return res
}function createHTMLWindow() {const htmlWin = new BrowserWindow({width: 800,height: 600,autoHideMenuBar: true,webPreferences: {contextIsolation: true,nodeIntegration: false,enableRemoteModule: false,preload: path.resolve(__dirname, './preload.js')}});ipcMain.on("file-save", writefile)ipcMain.handle('file-read', readFile)htmlWin.loadFile(path.join(__dirname, 'html', 'index.html'));
}app.whenReady().then(() => {createHTMLWindow();
});app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createHTMLWindow();}
});preload.js文件：
const { contextBridge, ipcRenderer } = require('electron')contextBridge.exposeInMainWorld('myAPI', {version: process.version,saveFile: (data) => {ipcRenderer.send('file-save', data)},readFile() {return ipcRenderer.invoke('file-read')}
})render.js文件：
const btn1 = document.getElementById('btn1')const btn2 = document.getElementById('btn2')
const input = document.getElementById('input')const btn3 = document.getElementById('btn3')btn1.onclick = () => {console.log(myAPI.version);alert(myAPI.version)
}btn2.onclick = () => {myAPI.saveFile(input.value)
}btn3.onclick = async () => {let data = await myAPI.readFile()alert(data)
}index.html文件：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Live Stream Viewer Counter</title><style>body {font-family: Arial, sans-serif;text-align: center;margin-top: 20%;}</style>
</head>
<body><button id="btn1">点击我查看Node软件版本号</button><br><hr> <input id="input" type="text"><br><br><button id="btn2">向D盘写入hello.txt</button><br><br><button id="btn3">读取D盘hello.txt文件的内容</button><hr><script type="text/javascript" src="./render.js"> </script>
</body>
</html>打包源代码为应用程序，exe格式的安装程序
有4种方法，本文采用最复杂的一种方式。
安装打包程序，下面的这行命令，必须在存放程序源代码的目录下执行：
npm install electron-builder -D
在package.json中进行相关配置，具体配置如下：
{"name": "etest","version": "1.0.0","description": "electron-learning","main": "main.js","scripts": {"start": "electron .","build": "electron-builder"},"build": {"appId": "FFFFFFFFXXXXXXXX","win": {"icon": "./logo.ico","target": [{"target": "nsis","arch": ["x64"]}]},"nsis": {"oneClick": false,"perMachine": true,"allowToChangeInstallationDirectory": true }},"author": "xuexi","license": "ISC","devDependencies": {"electron": "^31.2.1","electron-builder": "^24.13.3"}
}
开始打包的命令：
npm run build
此种方式，因为要下载github上的程序包太慢，导致打包失败，慎用！
打包完成后，在源代码目录下，会自动生成dist文件夹，exe文件就在该文件夹里面。
----------------------
另外的打包方式：
npm install --global electron-packagerelectron-packager . etest --overwrite --asar=true --platform=win32 --arch=x64 --version=31.2.1electron学习的视频链接：
禹神：一小时快速上手Electron，前端Electron开发教程_哔哩哔哩_bilibili