DDR爱好者之家 Design By 杰米

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

基于Electron实现桌面应用开发代码实例

4. node通讯

正常来说vue组件应该只关心页面层的逻辑即可,所以为了解耦,可以在Vue Component和Node API、Electron API中间插入一个桥接层,然后通过IPC进行通讯,如下图所示:

基于Electron实现桌面应用开发代码实例

按照关系图,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
   }
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米

《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。