详解使用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 相关文章推荐
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
js页面滚动时层智能浮动定位实现(jQuery/MooTools)
Aug 23 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
Nov 09 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
Jun 10 Javascript
vue 的 solt 子组件过滤过程解析
Sep 07 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 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采集时被封ip的解决方法
2010/08/29 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
php批量上传的实现代码
2013/06/09 PHP
php中ob_flush函数和flush函数用法分析
2015/03/18 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
JavaScript中“基本类型”之争小结
2013/01/03 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
AngularJs基于角色的前端访问控制的实现
2016/11/07 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
vue实现分页栏效果
2019/06/28 Javascript
vue调用本地摄像头实现拍照功能
2020/08/14 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
python数据结构之图的实现方法
2015/07/08 Python
Python实现Kmeans聚类算法
2020/06/10 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
浅谈Python的list中的选取范围
2018/11/12 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
学习十八届三中全会精神实施方案
2014/02/17 职场文书
2014年大学生四年规划书范文
2014/04/03 职场文书
房屋出售协议书
2014/04/10 职场文书
国庆65周年演讲稿:回首往昔,展望未来
2014/09/21 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
出国导师推荐信
2015/03/25 职场文书
2016年感恩节寄语
2015/12/07 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python