Electron学习笔记
环境搭建
npm install -g yarn
yarn init
git clone git@gitee.com:zzf35/electron-quick-start.git
cd electron-quick-start
将electron镜像文件加入文件夹中
npm i
npm run start
快速入门工具地址
- https://www.electronjs.org/fiddle
package.json 配置
"start": "nodemon --watch main.js --exec \"electron .\""
主进程 - Main Preocess
- 可以使用和系统对接的Electron API -创建菜单,长传文件等
- 创建 渲染进程 - Renderer Process
- 全面支持 Node.js
- 只有一个,作为整个程序的入口点
渲染进程 - Renderer Prodess
- 可以有多个,每个对应一个窗口
- 每个都是一个单独的进程
- 全面支持Node.js 和 DOM API
- 可以使用一部分Electron 提供的API
进程之间的通讯方式
- 使用IPC在进程之间进行通讯
Domo
main.js
const {app ,BrowserWindow , ipcMain} = require('electron')
app.on('ready',() => {
// 创建主窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 可以使用node.js 的 API
nodeIntegration: true
}
})
// 调用文件
mainWindow.loadFile('index.html')
// 第一个是事件对象(复杂结构),第二个接受的事件数据
ipcMain.on('message',(event,arg)=>{
console.log(arg)
// event.sender -触发该事件的发送者 === mainWindow
event.sender.send('reply', 'hello from main')
})
// 创建子窗口
const secondWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
// 可以使用node.js 的 API
nodeIntegration: true
},
parent:mainWindow // 依赖父窗口,当父窗口关闭,子窗口也关闭
})
// 调用文件
secondWindow.loadFile('second.html')
})
renderer.js
const { ipcRenderer } = require('electron')
window.addEventListener('DOMContentLoaded', () => {
ipcRenderer.send('message', 'hello from renderer') // 事件名称,事件数据
ipcRenderer.on('reply', (event, arg) => {
document.getElementById('message').innerHTML = arg;
})
})
使用Electron store 持久化数据
- 主进程与渲染进程都可以使用
- app.getPath(‘userData’) 查看保存数据的文件位置
使用方式
- npm install electron-store --save
const Store = require('electron-store');
const store = new Store({'name':'DATA_NAME'}); // 重命名
// 设置
store.set('key', '🦄');
// 输出
console.log(store.get('unicorn'));
//=> '🦄'
// 删除
store.delete('key');
// 设置多层的数据结构
store.set('foo.bar', true);
console.log(store.get('foo'));
//=> {bar: true}
store.delete('unicorn');
console.log(store.get('unicorn'));
//=> undefined
应用打包
electron-builder
-
npm install electron-builder --save-dev
前端框架引入Vue
1.环境搭建
// 全局安装VUE CLI
yarn global add @vue/cli
// 创建一个Vue项目
vue create vue-demo
2.安装electron-builder
// 进入项目目录
cd vue-demo
// 安装electron-builder
vue add electron-builder
// 安装完成后。执行启动命令
yarn electron:serve