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"
}
相关推荐
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom2 小时前
JavaScript reduce()函数详解
javascript
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手3 小时前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
前端康师傅3 小时前
JavaScript 中你不知道的按位运算
前端·javascript
X_StarX3 小时前
【Unity笔记02】订阅事件-自动开门
笔记·学习·unity·游戏引擎·游戏开发·大学生
MingYue_SSS3 小时前
开关电源抄板学习
经验分享·笔记·嵌入式硬件·学习
tianchang3 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范