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


Posted in Javascript onJuly 07, 2020

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
   }
  }
 }
}

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

Javascript 相关文章推荐
理解Javascript_09_Function与Object
Oct 16 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
常用javascript表单验证汇总
Jul 20 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
关于layui的动态图标不显示的解决方法
Sep 04 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 Javascript
基于javascript处理nginx请求过程详解
Jul 07 #Javascript
vue-i18n实现中英文切换的方法
Jul 06 #Javascript
vue 实现动态路由的方法
Jul 06 #Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 #Javascript
解决Nuxt使用axios跨域问题
Jul 06 #Javascript
js实现星星打分效果
Jul 05 #Javascript
jQuery实现简单飞机大战
Jul 05 #jQuery
You might like
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
图片自动更新(说明)
2006/10/02 Javascript
推荐:极酷右键菜单
2006/11/29 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
jQuery中 attr() 方法使用小结
2015/05/03 Javascript
ES6新特性之变量和字符串用法示例
2017/04/01 Javascript
JS仿Base.js实现的继承示例
2017/04/07 Javascript
React Native之prop-types进行属性确认详解
2017/12/19 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[40:29]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第一场
2018/04/10 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
python编程线性回归代码示例
2017/12/07 Python
详解pandas如何去掉、过滤数据集中的某些值或者某些行?
2019/05/15 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
做一个有道德的人演讲稿
2014/05/14 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
四查四看整改措施
2014/09/19 职场文书
2014年少先队工作总结
2014/12/03 职场文书
大学生个人简历自我评价
2015/03/11 职场文书
2015年信访工作总结
2015/04/07 职场文书
思想品德课教学反思
2016/02/24 职场文书
Python 中的Sympy详细使用
2021/08/07 Python