electron原来这么简单----打包你的react、VUE桌面应用程序
- 也许你不甘心只写网页,被人叫做“他会写网页”,也许你有项目需求,必须写桌面应用,然而你只会前端,没关系。网上的教程很多,但是很少有能说的浅显易懂的,我尽力将electron打包应用说的清晰明了,希望能你在写自己的应用的时候,感到心中有数。话不多说,进入正题:
一、安装electron
- 为了方便你以后的使用,建议全局安装。以后在任何文件夹都能使用electron。怎么安装就不废话了,不会的去官网,安装好electron之后也安装一个专用的打包工具electron-packager,以方便我们后面打包的时候使用。
二、run build
- 你的react项目写完后(其实写到一半,四分之一你随意,只要页面上有点内容了),执行 npm run
build,会在build文件夹下面生成如下图所示的结构: - 这时候,你试着点击index.html看看(无需放到服务器静态资源目录),如果能看到内容,就是ok的,如果一片白屏,控制台没错误提示,那么你只要在package.json里面添加一个"homepage":'./',再次执行build,就可以看到内容了。
- 如果你index.html没内容,就不要往下继续了,检查你的项目是否存在路径问题。
三、创建入口文件和配置
基于之前index.html已经能正常展示的前提下,在你项目build文件夹中创建以下2个文件
main.js
const electron = require('electron');
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;
// 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
function createWindow() {
// 创建一个新的浏览器窗口
win = new BrowserWindow({width: 1920, height: 1080});
// 并且装载应用的index.html页面
win.loadURL(`file://${__dirname}/index.html`);
// 打开开发工具页面
//win.webContents.openDevTools();
// 当窗口关闭时调用的方法
win.on('closed', () => {
// 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里
// 存放窗口对象,在窗口关闭的时候应当删除相应的元素。
win = null;
});
}
// 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
// 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}
});
// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。
这里贴的别人的代码,你如果想修改,学习electron去吧,这里只是简单介绍。
package.json
{
"name":"crh_chat",
"version":"1.0-test",
"main":"main.js",
"author": {
"name":"YOURNAME"
},
"license": "MIT"
}
- 做完这两件事基本上就ok了。
四、打包
在build文件夹下打开命令行
electron-packager . crh-chat --win --out=release --arch=x64 --version=1.0.0 --electron-version=1.8.4 --overwrite --icon=./favicon.ico
这是我的,具体参数你得根据自己的修改,使用如下
- 图上的--out是生成文件夹的名字,里面有一堆的dll, 执行完成,就可以在你的out文件夹中看到可执行程序了 点击一下,就成功的跑起来了
- 就这么结束了,react build的文件能在非服务器环境跑起来真是方便极了,
多说一嘴,如果你的react项目index页面死活出不来,可能是你使用了react-router的BroswerHistory,换成HashHistory就可以了。
VUE项目出不来的话,很大可能是使用了history路由模式,改成hash路由模式就可以了
推荐阅读
复杂场景下的h5与小程序通信
在套壳小程序盛行的当下, h5调用小程序能力来打破业务边界已成为家常便饭,h5与小程序的结合,极大地拓展了h5的能力边界,丰富了h5的功能。使许多以往纯h5只能想想或者实现难度极大的功能变得轻松简单。但在套壳...
懒懒的技术宅赞 16阅读 3k评论 5
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...
wuwhs赞 39阅读 4.7k评论 5
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...
边城赞 31阅读 7.2k评论 5
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 2k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!
SegmentFault思否赞 20阅读 5.6k评论 10
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...
边城赞 18阅读 7.6k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。