专业的培训网站建设今日新闻头条热点

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

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

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

cd TingHack
npm 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"
}