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開發實戰