详解使用webpack+electron+reactJs开发windows桌面应用


Posted in Javascript onFebruary 01, 2019

electron是一两年前挺火的一个框架

本质上是一个浏览器,但是集成了很多windows系统的功能,让前端开发也可以直接操作windows的窗体,做成一个实打实的桌面软件

(当然听说mac上也可以用electron,不过没试过)

(没错我还在用windows,不是mac也不是linux,我是个lowB)

团队主要的技术栈是react,所以考虑用react开发,方便维护。

PS.由于项目是大半年前做的,所以一些细节可能记忆有误请见谅

几个重点:

1.想要能调试必须使用webpack打包,不能用react那些常用的打包脚手架,因为webpack打包有target: "electron-main"

2.对于不使用electron模块的项目,electron可以直接跑任何网页;对于用到electron模块的项目,如果不设置target: "electron-main",而直接用webpack打包(或者其他的打包工具),打包工具会直接默认把electron模块一起打包进去。而electron模块里会用到node的比如fs模块,这些模块都不允许在网页上调用,因为需要直接访问电脑文件

下面开始

我们知道electron其实是有两个部分的,一个是窗体部分,一个是窗体里运行的网页项目

窗体部分通常放在根目录下,只使用main.js一个文件来控制

网页项目部分一般放在src目录下,打包出来的文件放到dist目录下

目录大致如下

详解使用webpack+electron+reactJs开发windows桌面应用

main.js文件里会对窗体部分做很多配置

具体可以参见electron的官方文档:electron官方文档

mainWnd = new BrowserWindow({
  // 窗体配置参数
});
mainWnd.loadURL(`file://${__dirname}/dist/index.html`); //这句话是用于配置窗体加载的网页项目的,配置为打包后的目录

网页项目部分使用ipc模块与electron的窗体部分的ipcMain模块进行通信,网页项目部分可以发送以某个指令给窗体部分

网页项目部分发送指令

// src/MyComponent.js
const ipc = require('electron').ipcRenderer;
ipc.send('logout');

窗体部分接收到指令后做相应的行为

//main.js

ipcMain.on('logout', function (event, arg) {
  // do something
  console.log('logint');
});

窗体部分也可以使用webContent模块与网页项目部分通信

比如用户点击关闭窗体,可以使用event.preventDefault();阻塞关闭,然后通知网页项目部分,做退出登录的行为,退登完成之后再关闭窗体

// main.js 

mainWnd.webContents.send('mainWnd-close');

网页项目部分做对应的行为

比如退出登录,退出登录完成后,也使用ipc通知窗体部分,窗体接收到'logout-succ'后,执行关闭窗体的行为。

// src/MyComponent.js

ipc.on('mainWnd-close', () => {
  // do something
  ipc.send('logout-succ');
})

·在开发项目时,可以先用网页的形式开发项目,等到网页项目部分差不多完成后,再注入electron中,开发网页项目部分和窗体部分的交互

·在webpack中使用target: "electron-main"后,webpack将不会打包有关eletron的代码

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

Javascript 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
Node.js插件安装图文教程
May 06 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
详解vue axios二次封装
Jul 22 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 #Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 #Javascript
微信小程序常用简易小函数总结
Feb 01 #Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 #Javascript
angular中如何绑定iframe中src的方法
Feb 01 #Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 #Javascript
JS集合set类的实现与使用方法示例
Feb 01 #Javascript
You might like
PHP mb_convert_encoding 获取字符串编码类型实现代码
2009/04/26 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
javascript &&和||运算法的另类使用技巧
2009/11/28 Javascript
jquery load事件(callback/data)使用方法及注意事项
2013/02/06 Javascript
利用Keydown事件阻止用户输入实现代码
2014/03/11 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
tab栏切换原理
2017/03/22 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
JS 实现百度搜索功能
2018/02/01 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
Python 中 Meta Classes详解
2016/02/13 Python
Python计算字符宽度的方法
2016/06/14 Python
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
如何基于Python创建目录文件夹
2019/12/31 Python
Keras自定义实现带masking的meanpooling层方式
2020/06/16 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python如何遍历指定路径下所有文件(按按照时间区间检索)
2020/09/14 Python
AHAVA美国官方网站:死海海泥护肤品牌
2016/10/18 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
物业保安主管岗位职责
2013/12/25 职场文书
秋季运动会开幕词
2015/01/28 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
win10清理dns缓存
2022/04/19 数码科技