electron的基本教程

安装

mkdir my-electron-app && cd my-electron-app
npm init
npm install

{"name": "my-electron-app","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC"
}

安装electron

npm install --save-dev electron

如果安装过程出现下面这个错误：

解决方法

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm install --save-dev electron

运行

修改package.json

“main”: “main.js”
“start”: “electron .”

{"name": "my-electron-app","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "electron .","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^21.0.1"}
}

创建index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><metahttp-equiv="Content-Security-Policy"content="default-src 'self'; script-src 'self'"/><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using Node.js <span id="node-version"></span>, Chromium<span id="chrome-version"></span>, and Electron<span id="electron-version"></span>.</body>
</html>

创建main.js

app 模块，它控制应用程序的事件生命周期。
BrowserWindow 模块，它创建和管理应用程序窗口。

const { app, BrowserWindow } = require("electron");const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,});win.loadFile("./index.html");
};app.whenReady().then(() => {createWindow();
});

运行

npm run start

优化一下

问题：每次修改完代码后，必须重新执行 npm run start才能展现最新的页面

解决方法：

npm install nodemon -D

“start”: “nodemon --exec electron .”

修改package.json

{"name": "my-electron-app","version": "1.0.0","description": "","main": "main.js","scripts": {"start": "nodemon --exec electron .","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","devDependencies": {"electron": "^21.0.1","nodemon": "^2.0.20"}
}

electron读写本地文件

webPreferences: {
nodeIntegration: true,
preload: path.resolve(__dirname, “./preload.js”),
},

const { app, BrowserWindow } = require("electron");
const path = require("path");const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,preload: path.resolve(__dirname, "./preload.js"),},});win.loadFile("./index.html");// 打开开发者工具win.webContents.openDevTools();
};app.whenReady().then(() => {createWindow();
});

const { contextBridge, ipcRenderer, remote, shell } = require("electron");const fs = require("fs");console.log(11111111);
fs.writeFile("C:/Users/zyq/Desktop/entries/TSPractice/my-electron-app/test.txt","testabc",() => {console.log("完成了");}
);

contextBridge

问题：electron和h5页面如何通信

preload.js

const { contextBridge } = require("electron");contextBridge.exposeInMainWorld("myApi", {platform: process.platform,
});

index.html引入app.js文件

app.js

console.log(window.myApi.platform);

window上运行结果

主进程和渲染进程的通信

主进程main.js
ipcMain.handle(“send-event”, (event, msg) => {
console.log(msg);
return msg;
});

const { app, BrowserWindow, ipcMain } = require("electron");
const path = require("path");const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true,preload: path.resolve(__dirname, "./preload.js"),},});win.loadFile("./index.html");// 打开开发者工具win.webContents.openDevTools();
};app.whenReady().then(() => {createWindow();
});ipcMain.handle("send-event", (event, msg) => {console.log(msg);return msg;
});

preload.js把通信方法暴露给渲染进程

const { contextBridge, ipcRenderer } = require("electron");const handleSend = async () => {let fallback = await ipcRenderer.invoke("send-event", "发送的内容");console.log(fallback);
};
contextBridge.exposeInMainWorld("myApi", {platform: process.platform,handleSend,
});

渲染进程app.js

console.log(myApi.handleSend());

打包

npm install electron-builder -D

修改配置文件package.json
执行打包命令

npm run app:dist

如果打包过程出现错误，参看下面这个博客

electron打包错误解决办法

win系统上打包的结果如下

安装之后，就可以运行了

记得本地vue项目也要运行，不然看到页面。