Electron桌面应用开发笔记

#好久没更新啦 骚瑞

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux

在我们进行桌面应用开发 的时候很需要这种框架 像我们目前常用的vscode、qq都是使用Electron开发的。Electron开发的主要知识点除了前端知识以为我认为比较重要的的就是进程通信 下午也会讲到相关的实现

chromium用于渲染页面 node.js用于后台操作  native用于操作os

这是进程通信流程 当需要操作os的的时候就需要用到进程通信 例如通过前端向磁盘写入文件

进入项目文件并且初始化项目

cd TingHacknpm init

必填项

scripts需要修改

最终代码 package.json

{  "name": "tinghack",  "version": "1.0.0",  "main": "main.js",  "scripts": {    "start": "electron ."  },  "author": "Ting",  "license": "ISC",  "description": "TingHack"}

先设置镜像源然后 下载相关工具 之后编译器有了代码提示

npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ npm install --save-dev electron

执行 以下代码就有ui了

npm start

配置自动重启 每次修改代码后自动执行npm start

npm i nodemon -D

修改package.json

  "scripts": {    "start": "nodemon --exec electron ."  },

新建nodemon.json 代码如下

{  "ignore":[    "node modules",    "dist"  ],  "restartable":"r",  "watch":["*.*"],  "ext":"html,js,css"}

主进程（main.js）如果需要与渲染进程进行通信需要一个中间的进程 即预加载进程 （preload.js）

三个进行执行顺序是 主进程 预加载进程 渲染渲染进程 ，其中预加载进行可以使用主进程从一些函数 方法

其中渲染进程向主进程通信

const {contextBridge, ipcRenderer} = require('electron')......ipcRenderer.send('file-save', data)const {app, BrowserWindow,ipcMain} = require('electron')......ipcMain.on('file-save', writeFile)

主进程 渲染进程双向通信

const {contextBridge, ipcRenderer} = require('electron')......async readFile() {    return await ipcRenderer.invoke('file-read')}const {app, BrowserWindow,ipcMain} = require('electron')......ipcMain.handle('file-read',readFile)

打包项目

npm install electron-builder -D

可自定义的设置项如下 

{  "name": "video-tools",  "version": "1.0.0",  "main": "main.js",  "scripts": {    "start": "electron .",    "build": "electron-builder"  },  "build": {    "appId": "com.atguigu.video",    "win": {      "icon": "./logo.ico",      "target": [        {          "target": "nsis",          "arch": ["x64"]        }      ]    },    "nsis": {      "oneClick": false,      "perMachine": true,      "allowToChangeInstallationDirectory": true    }  },  "devDependencies": {    "electron": "^30.0.0",    "electron-builder": "^24.13.3"  },  "author": "宝码香车",  "license": "ISC",  "description": "A video processing program based on Electron"}

不过纯写html css js的话可能没有vue那么好用 所以还是考虑结合vue来写ui 首先安装vue环境

npm create vue

输入项目文件名之后 cd进去 然后执行

npm install

然后修改package.json 以与electron的统一  type换成了commonjs

{  "name": "tinghack",  "version": "1.0.0",  "main": "main.js",  "author": "Ting",  "license": "ISC",  "description": "TingHack",  "type": "commonjs",

然后安装electron环境

npm add electron -D

装好之后我们要通过electron启动 配置script

  "scripts": {    "start": "electron .",    "dev": "vite",    "build": "vite build",    "preview": "vite preview"  },

然后创建一个main.js 跟之前的一样 这样就好了 可以写vue了

const {app, BrowserWindow,ipcMain} = require('electron')const path = require('path')const fs = require('fs')const { exec, spawn } = require('child_process');// 使用 exec 执行简单命令exec('dir', (error, stdout, stderr) => {if (error) {    console.error(`exec error: ${error}`);    return;    }    console.log(`stdout: ${stdout}`);    console.log(`stderr: ${stderr}`);});//写入文件function writeFile(_, data) {    fs.writeFileSync('D:/hello.txt', data)}//读取文件function readFile() {    const res = fs.readFileSync("D:/hello.txt").toString()    return res}function createWindow(){    const win = new BrowserWindow({        width: 800,        height: 600,        autoHideMenuBar: true,        webPreferences: {            preload:path.resolve(__dirname,'./preload.js')        }    })    ipcMain.on('file-save', writeFile)    ipcMain.handle('file-read',readFile)}app.on('ready', () => {    createWindow()    app.on('activate',()=> {        if (BrowserWindow.getAllWindows().length === 0) createWindow()    })})app.on('window-all-closed', () => {    if (process.platform !== 'darwin') app.quit()})

const {contextBridge, ipcRenderer} = require('electron')contextBridge.exposeInMainWorld('myAPI', {    version: process.version,    saveFile: (data) => {        ipcRenderer.send('file-save', data)    },   async readFile() {        return await ipcRenderer.invoke('file-read')    }})

原文始发于微信公众号（Ting的安全笔记）：Electron桌面应用开发笔记