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的网址:
完整的程序代码:
目录结构, 见下图:
在html文件夹下面,有2个文件:index.html和render.js
package.json文件:
javascript
{
"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文件:
javascript
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文件:
javascript
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文件:
javascript
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文件:
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中进行相关配置,具体配置如下:
javascript
{
"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文件就在该文件夹里面。
另外的打包方式:
javascript
npm install --global electron-packager
javascript
electron-packager . etest --overwrite --asar=true --platform=win32 --arch=x64 --version=31.2.1