快捷導(dǎo)航

基于Electron實(shí)現(xiàn)桌面應(yīng)用開(kāi)發(fā)代碼實(shí)例

更新時(shí)間：2020年07月07日 09:12:31 作者：HiIT青年

這篇文章主要介紹了基于Electron實(shí)現(xiàn)桌面應(yīng)用開(kāi)發(fā)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

Electron是一個(gè)可以使用 JavaScript，HTML 和 CSS 構(gòu)建跨平臺(tái)桌面應(yīng)用程序的開(kāi)源框架。

本文主要分享一下采用vue + electron開(kāi)發(fā)桌面程序的搭建過(guò)程。

1. 環(huán)境準(zhǔn)備

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

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

如果沒(méi)有裝vue-cli可以通過(guò)下面的命令安裝：

npm install -g @vue/cli

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

npm uninstall vue-cli -g

npm install -g @vue/cli

2. 創(chuàng)建項(xiàng)目

這里采用vue-cli創(chuàng)建vue項(xiàng)目。

vue create electron-helloworld

引入vue-cli-plugin-electron-builder

cd electron-helloworld

vue add electron-builder

這一步需要拉取electron-vX.Y.Z-win32-x64.zip，過(guò)程非常漫長(zhǎng)。

3. 運(yùn)行項(xiàng)目

運(yùn)行electron項(xiàng)目。

npm run electron:serve

4. node通訊

正常來(lái)說(shuō)vue組件應(yīng)該只關(guān)心頁(yè)面層的邏輯即可，所以為了解耦，可以在Vue Component和Node API、Electron API中間插入一個(gè)橋接層，然后通過(guò)IPC進(jìn)行通訊，如下圖所示：

按照關(guān)系圖，Vue Commponent通過(guò)Service發(fā)布事件，完成與Node API和Electron API的通訊，下面根據(jù)這個(gè)關(guān)系寫(xiě)一個(gè)讀取文件內(nèi)容的示例。

創(chuàng)建Service，發(fā)布事件并監(jiān)聽(tīng)

/bridge/service/Service.js

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

創(chuàng)建Server，監(jiān)聽(tīng)事件并讀取文件內(nèi)容返回

/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) => {
   // 這里將參數(shù)轉(zhuǎn)化為json，然后讀取G:\\0.txt的內(nèi)容一起返回
   const pms = JSON.stringify(params)
   const ret = fs.readFileSync('G:\\0.txt')
   e.sender.send('readTxt', pms + '::::' + ret)
  })
 }
}

啟動(dòng)Server

在創(chuàng)建完Server之后，需要在應(yīng)用程序啟動(dòng)的時(shí)候啟動(dòng)并讓其監(jiān)聽(tīng)對(duì)應(yīng)的事件。

這里可以創(chuàng)建一個(gè)ApplicationContext，來(lái)啟動(dòng)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中實(shí)例化ApplicationContext，并調(diào)用init方法。

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

Vue組件調(diào)用Service

完成上面三步之后，只需要在vue組件中調(diào)用Service即可，這一步跟普通開(kāi)發(fā)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() {
   // 這里傳入兩個(gè)參數(shù)，并將返回結(jié)果賦值給txt，在div中顯示出來(lái)
   service.readTxt({
    p1: '參數(shù)1',
    p2: '參數(shù)2'
   }, resp => {
    this.txt = resp
   })
  }
 }
}
</script>

至此，一個(gè)electron helloworld示例就完成了。

5. node API undefind

在上面的過(guò)程中可能會(huì)遇到node API undefined的情況，這是因?yàn)閑lectron禁用了node集成，在background.js中創(chuàng)建window的時(shí)候指定了配置：

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
}

這里可以通過(guò)配置electronBuilder插件解決。

在項(xiàng)目目錄根目錄下面創(chuàng)建vue.config.js，內(nèi)容如下：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: