Electron-桌面应用开发
Electron
使用 JavaScript,HTML 和 CSS 构建跨平台的桌面应用程序
一、主要概念
主进程-MainProcess
- 可以使用和系统对接的api,创建菜单,上传文件
- 创建渲染进程-RendererProcess
- 全面支持nodejs
- 只有一个作为主程序入口
渲染进程-RendererProcess (可视页面)
- 可以有多个,每个对应一个窗口
- 每个都是一个单独的进程
- 全面支持 nodejs 和 DOMAPI
- 可使用部分 electron 提供的 API
二、常用操作
创建 BrowserWindow
mainWindow = new BrowserWindow({
height: 500,
width: 1000
})
mainWindow.loadURL('index.html')
进程间通信(事件驱动)
1、主进程向子进程通信
main process 主进程发送消息( 特指某一窗口 )
mainWindow.send('msg', data)
renderer process 子进程接收消息
ipcRenderer.on('msg', (event, arg) => {
console.log(arg)
})
2、子进程向主进程通信
renderer process 渲染进程向主进程发送消息
import { ipcRenderer } from 'electron'
ipcRenderer.send('msg', data)
main process 主进程接收消息
import { ipcMain } from 'electron'
ipcMain.on('msg', (event, arg) => {
console.log(arg)
})
三、搭建项目
使用 Vue 脚手架快速搭建项目
国内有坑,不翻墙下不下来
# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project
使用离线初始化
1、推荐一个国内镜像,先下载到本地
git clone https://gitee.com/mirrors/electron-vue.git
2、解压到 C:\Users<用户名>.vue-templates
3、执行离线初始化命令
vue init <template-name> <project-name> --offline
安装依赖 / 运行项目
# 安装依赖
cd my-project
npm install # or yarn
# 进入开发模式
npm run dev # or yarn run dev
一些可能遇到的坑
1、Webpack 插件报错
修改 src/index.ejs 文件
改成