基于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 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
文本框只能选择数据到文本框禁止手动输入
Nov 22 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
javascript iframe跨域详解
Oct 26 Javascript
有趣的bootstrap走动进度条
Dec 01 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
iview实现图片上传功能
Jun 29 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
西德产收音机
2021/03/01 无线电
PHP数据缓存技术
2007/02/14 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
用Php编写注册后Email激活验证的实例代码
2013/03/11 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
PHP 实现 WebSocket 协议原理与应用详解
2020/04/22 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
vue实现的仿淘宝购物车功能详解
2019/01/27 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
2020/07/20 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
python在linux中输出带颜色的文字的方法
2014/06/19 Python
python使用tkinter实现简单计算器
2018/01/30 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
python实现滑雪游戏
2020/02/22 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
年会搞笑主持词串词
2014/03/24 职场文书
交通志愿者活动总结
2014/06/27 职场文书
创先争优活动心得体会
2014/09/04 职场文书
实习证明格式范文
2015/06/16 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers