基于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
}
}
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程
一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2
-
electron 如何将任意资源打包的方法步骤
如何打包资源 只想写个图形小工具,本质上还是调用写好的 java 程序,因为我觉得在命令行里面来回切目录,复制路径等操作实在是太麻烦了. 那么我现在已经搞定了如何从 electron 的 js 事件里获得文件路径,我也搞定了如何在 electron 的 main.js 里面创建新的进程执行指令,那么如何使用到打包好的 jar 包或者其他资源呢? 直接看下 packages.json 里面吧. { "name": "....", "version"
-
electron 安装，调试，打包的具体使用
项目推荐 想要快速的了解 electron, 调试 electron, 打包 electron, 推荐项目electron-webpack-quick-start 快速开始 先安装 cross-env,用于设置环境变量.因为在后面安装electron, 需要下载, 默认的源在国内下载很慢,需要通过设置环境变量来切换下载地址 #安装cross-env,用于设置环境变量的 npm install cross-env -g Clone项目到本地 # Clone repository git clone
-
electron+vue实现div contenteditable截图功能
最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能.一般通过input或textarea也能实现,通过插入[笑脸].(:12 这些标签,展示的时候解析标签就行. 如下图效果: 在网上找到的jq插件实现在textarea光标处插入表情符标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t
-
Electron 如何调用本地模块的方法
Electron 结合了 Chromium.Node.js 和用于调用操作系统本地功能的 API(如打开文件窗口.通知.图标等,基于 Electron 的开发,就好像开发一个网页一样,而且能够无缝地使用 Node.或者说:就好像构建一个 Node app,并通过 HTML 和 CSS 构建界面. 那么如何在页面中调用 Node API 呢? 碰到了一些坑- 先从页面加载方式说起,Electron 中加载页面的方式有两种: 一种是直接加载本地文件,另一种是通过 http 网络请求页面. //方法1
-
Electron + vue 打包桌面操作流程详解
提前准备一个vue项目,也可以使用初始的vue项目 vue init webpack 安装到后边有的会出现报错,可以忽略,启动npm run dev 启动成功就可以 在vue项目下执行下载以下依赖,会用到 cnpm install electron --save-dev cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好 获取Electron的资源 git clone https://github.com/el
-
详解使用webpack+electron+reactJs开发windows桌面应用
electron是一两年前挺火的一个框架 本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件 (当然听说mac上也可以用electron,不过没试过) (没错我还在用windows,不是mac也不是linux,我是个lowB) 团队主要的技术栈是react,所以考虑用react开发,方便维护. PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅 几个重点: 1.想要能调试必须使用webpack打包,不能用r
-
Electron 调用命令行(cmd)
因为最近的项目需求,需要在 Electron 客户端启动的时候启动 nginx 服务,所以研究了一下怎么在 Electron 调用 命令行. 因为 Electron 基于 Chromium 和 Node.js,可以直接使用 Node.js 的 API 和一些包.目前研究有以下两种方法: child_process child_process是 Node.js 的内置模块,该模块提供了衍生子进程的能力. 实现代码: const exec = require('child_process').exe
-
基于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然后
-
java基于poi导出excel透视表代码实例
这篇文章主要介绍了java基于poi导出excel透视表代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 从前,我是一个前端程序猿,怀着对打通任(前)督(后)二(开)脉(发)的梦想转了后端,自学两礼拜java+spring全家桶,直接上项目实战.最近接到一需求:将业务数据导出一张透视表. 需求开发完成已近有一段时间了,甲方的大爷大妈,爷爷奶奶们也都用的很开心,我也很开心,于是就心想咱学了也不能白学,所以写下这篇随笔. 先看下用easypo
-
python基于gevent实现并发下载器代码实例
这篇文章主要介绍了python基于gevent实现并发下载器代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 并发下载原理 import gevent from gevent import monkey import urllib.request monkey.patch_all() def my_download(url): print('GET: %s' % url) resp = urllib.request.urlopen(url
-
基于python判断目录或者文件代码实例
这篇文章主要介绍了基于python判断目录或者文件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1. 判断目录是否存在 'isdir',删除目录时只有该目录为空才可以 'rmdir' import os if(os.path.isdir('D:/Python_workspace/spyder_space/test_各种功能/哈哈哈哈')): #判断目录是否存在 print('yes') os.rmdir('D:/Python_work
-
基于Java创建一个订单类代码实例
这篇文章主要介绍了基于Java创建一个订单类代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 需求描述 定义一个类,描述订单信息 订单id 订单所属用户(用户对象) 订单所包含的商品(不定数量个商品对象) 订单总金额 订单应付金额: 总金额500~1000,打折85折 总金额1000~1500,打折80折 总金额1500~2000,打折70折 总金额超过2000,打折65折 在此基础上,还要看用户的vip等级 用户vip等级为:一般会员,
-
基于javascript实现获取最短路径算法代码实例
这篇文章主要介绍了基于javascript实现获取最短路径算法代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 //A算法 自动寻路 路径 class GetAutoPath{ constructor(id, map, sPos, ePos, mapArr){ //this.type = id.type; this.id = id; this.map = map; this.sPos = sPos; this.ePos = eP
-
Kafka producer端开发代码实例
一.producer工作流程 producer使用用户启动producer的线程,将待发送的消息封装到一个ProducerRecord类实例,然后将其序列化之后发送给partitioner,再由后者确定目标分区后一同发送到位于producer程序中的一块内存缓冲区中.而producer的另外一个线程(Sender线程)则负责实时从该缓冲区中提取出准备就绪的消息封装进一个批次(batch),统一发送给对应的broker,具体流程如下图: 二.producer示例程序开发 首先引入kafka相关依赖
-
Spring整合Quartz开发代码实例
我们使用Spring整合Quartz开发,本实例采用数据库模式的demo. xml文件配置如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns
-
Javascript基于OOP实实现探测器功能代码实例
代码如下 <script> /*所有探测器都有探测的方法和分析的方法,分析当前的浏览器环境,不管是浏览器还是nodejs*/ /*container容器探测器*/ /*link链接探测器*/ /*外层用一个立即执行的匿名函数包裹住,防止一些函数声明或者变量泄露到外面*/ !function(global){ function DetectorBase(configs){//不让外部通过直接调用方式调用,必须使用new,不使用new就会报错 /*使用new的话,this就是最后要返回的对象,th
-
基于SSM框架+Javamail发送邮件的代码实例
本篇介绍基于SSM框架(Spring4.0+SpringMVC+Mybatis)组合的Javamail应用,邮箱的话基于腾讯的QQ邮箱,其实也是Foxmail邮箱 先要了解一下SMTP协议和SSL加密 SMTP:称为简单邮件传输协议(Simple Mail Transfer Protocal),目标是向用户提供高效.可靠的邮件传输.SMTP是一种请求响应的协议,也就是客户机向远程服务器发送请求,服务器响应,监听端口是25,所以其工作模式有两种:发送SMTP,接收SMTP. SSL加密:用来保障浏