Electron-桌面应用开发

Electron

使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序

一、主要概念

主进程-MainProcess

1. 可以使用和系统对接的api，创建菜单，上传文件
2. 创建渲染进程-RendererProcess
3. 全面支持nodejs
4. 只有一个作为主程序入口

渲染进程-RendererProcess (可视页面)

1. 可以有多个，每个对应一个窗口
2. 每个都是一个单独的进程
3. 全面支持 nodejs 和 DOMAPI
4. 可使用部分 electron 提供的 API

二、常用操作

创建 BrowserWindow

mainWindow = new BrowserWindow({
    height: 500,
    width: 1000
  })

  mainWindow.loadURL('index.html')
           

进程间通信(事件驱动)

1、主进程向子进程通信

main process 主进程发送消息( 特指某一窗口 )

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 文件

改成

2、Build 打包报错

参考Electron 打包问题

参考文档

electron-vue官方文档

Electron-vue开发实战