Electron入门笔记

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"
}