使用Electron開發桌面應用

Electron是一個可以使用 JavaScript，HTML 和 CSS 構建跨平臺桌面應用程式的開源框架，

本文主要分享一下采用vue + electron開發桌面程式的搭建程序，

1. 環境準備

這里采用的是vue-cli3.x，可以通過下面的指令查看當前vue-cli的版本：

vue --version
# 3.9.3 這里我用的是3.9.3

如果沒有裝vue-cli可以通過下面的命令安裝：

npm install -g @vue/cli

如果是vue-cli還是2.x可以先卸載2.x然后裝3.x

npm uninstall vue-cli -g
npm install -g @vue/cli

2. 創建專案

這里采用vue-cli創建vue專案，

vue create electron-helloworld

引入vue-cli-plugin-electron-builder

cd electron-helloworld
vue add electron-builder

這一步需要拉取electron-vX.Y.Z-win32-x64.zip，程序非常漫長，

3. 運行專案

運行electron專案，

npm run electron:serve

4. node通訊

正常來說vue組件應該只關心頁面層的邏輯即可，所以為了解耦，可以在Vue Component和Node API、Electron API中間插入一個橋接層，然后通過IPC進行通訊，如下圖所示：

按照關系圖，Vue Commponent通過Service發布事件，完成與Node API和Electron API的通訊，下面根據這個關系寫一個讀取檔案內容的示例，

創建Service，發布事件并監聽

/bridge/service/Service.js

import { ipcRenderer } from 'electron'
class Service {
  readTxt(params, callback) {
    ipcRenderer.once('readTxt', (e, ret) => callback(ret))
    // 將params引數傳給Server
    ipcRenderer.send('readTxt', params)
  }
}
export default new Service()

創建Server，監聽事件并讀取檔案內容回傳

/bridge/server/Server.js

import { ipcMain } from "electron";
import fs from 'fs'
export default class Server {
  constructor(app, win) {
    this.app = app
    this.win = win
  }
  initEventHandler() {
    ipcMain.on('readTxt', (e, params) => {
      // 這里將引數轉化為json，然后讀取G:\\0.txt的內容一起回傳
      const pms = JSON.stringify(params)
      const ret = fs.readFileSync('G:\\0.txt')
      e.sender.send('readTxt', pms + '::::' + ret)
    })
  }
}

啟動Server

在創建完Server之后，需要在應用程式啟動的時候啟動并讓其監聽對應的事件，

這里可以創建一個ApplicationContext，來啟動Server，

/bridge/ApplicationContext.js

import Server from './server/Server'
export default class ApplicationContext {
  constructor(app, window) {
    this.app = app
    this.window = window
  }
  init() {
    new Server(this.app, this.window).initEventHandler()
  }
}

然后在background.js中實體化ApplicationContext，并呼叫init方法，

  win.on('closed', () => {
    win = null
  })
  // Windows創建完成后初始化context
  new ApplicationContext(app, win).init()

Vue組件呼叫Service

完成上面三步之后，只需要在vue組件中呼叫Service即可，這一步跟普通開發vue程式是一樣的，

<div>{{txt}}</div>
<button @click="readTxt">讀取檔案資訊</button>

<script>
import service from '@/bridge/service/Service'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      txt: ''
    }
  },
  methods: {
    readTxt() {
      // 這里傳入兩個引數，并將回傳結果賦值給txt，在div中顯示出來
      service.readTxt({
        p1: '引數1',
        p2: '引數2'
      }, resp => {
        this.txt = resp
      })
    }
  }
}
</script>

至此，一個electron helloworld示例就完成了，

5. node API undefind

在上面的程序中可能會遇到node API undefined的情況，這是因為electron禁用了node集成，在background.js中創建window的時候指定了配置：

webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
     // nodeIntegration: true
}

這里可以通過配置electronBuilder插件解決，

在專案目錄根目錄下面創建vue.config.js，內容如下：

// see https://cli.vuejs.org/config
module.exports = {
  productionSourceMap: false,
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
    },
    configureWebpack: {
      resolve: {
        symlinks: true
      }
    }
  }
}

專案原始碼可關注公眾號 “HiIT青年” 發送 “electron-helloworld” 獲取，

關注公眾號，閱讀更多文章 （如打包成exe，版本自動升級），

標籤：JavaScript

上一篇：JS資料型別判斷的幾種方法

下一篇：Nuxt使用axios跨域問題解決方法