Electron学习笔记

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’) 查看保存数据的文件位置

使用方式

1. 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

• 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