详解使用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 相关文章推荐
JS setCapture 区域外事件捕捉
Mar 18 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
JS随机生成不重复数据的实例方法
Jul 17 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
javascript实现修改微信分享的标题内容等
Dec 11 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 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作为Shell脚本语言使用
2006/10/09 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
jQuery.Validate 使用笔记(jQuery Validation范例 )
2010/06/25 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
javascript制作坦克大战全纪录(1)
2014/11/27 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
Angularjs基础知识及示例汇总
2015/01/22 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
jQuery实现ajax回调函数带入参数的方法示例
2018/06/26 jQuery
webpack多入口多出口的实现方法
2018/08/17 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
Python实现SVN的目录周期性备份实例
2015/07/17 Python
python调用fortran模块
2016/04/08 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
历史学专业推荐信
2013/11/06 职场文书
高中生自我评价个人范文
2013/11/09 职场文书
个人简历自荐信
2013/12/05 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2015年班干部工作总结
2015/04/29 职场文书
乡镇科协工作总结2015
2015/05/19 职场文书
法定授权委托证明书
2015/06/18 职场文书
2015中学教学工作总结
2015/07/22 职场文书
解析在浏览器地址栏输入一个URL后发生了什么
2021/06/21 Servers