借助Electron可以用来非常轻易的构建跨平台桌面应用，因为你只需要熟悉html、css、javascript这些基本技能就可以快速构建一个简单应用。
这意味着我们可以借助Electron来打包我们的B/S应用伪装成一个本地应用,这不仅可以提高传统用户的亲和度还可以免去不要用ie装谷歌; 怎么装谷歌,360可以吗?的烦恼\扩大可视区域(免去地址栏 菜单栏等)\快速打开应用(无需打开浏览器翻收藏夹)等一系列好处。
辣么下面的内容就是告诉你如何快速打包一个伪桌面应用
前提:
- nodejs
- yarn
1.安装
可以执行如下命令,更多详细内容可以查看官网安装文档
yarn global add electron
2.创建入口配置 main.js
const electron = require('electron');
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;
// 指向窗口对象的一个全局引用，如果没有这个引用，那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;
function createWindow() {
// 创建一个新的浏览器窗口
win = new BrowserWindow();
// 打开后最大化窗口
win.maximize();
// 并且装载应用的index.html页面
win.loadURL(`http://localhost:8000/#/user/login`);
// 如果是前后端分离得项目可以按如下方式书写
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();
}
});
// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。
3.创建打包配置 package.json
可以通过 yarn init或新建文件得方式创建此文件
{
"name": "Evatron",
"version": "1.0.0",
"description": "Eva desktop",
"main": "main.js",
"author": "PKAQ",
"license": "MIT"
}
4.打包
安装打包管理器
yarn global add electron-packager
执行打包
electron-packager . Evatron
--win --out=release
--arch=x64
--version=1.0.0
--electron-version=2.0.0
--overwrite --icon=./favicon.ico
命令解释
-
.：打包入口 -
Evatron： 打包文件名 -
--win --out=release --arch=x64： 生成win64类型文件 -
--version=1.0.0：生成的文件版本 -
--electron-version=2.0.0：electron版本,可以通过electron --version查看 -
--overwrite：是否覆盖之前的打包文件 -
--icon=./favicon.ico：favicon
打包后会在命令目录生成一个release文件夹 点击里面生成的exe可以查看我们的桌面程序
p.s:如果你的react项目index页面死活出不来，可能是你使用了react-router的BroswerHistory，换成HashHistory就可以了。
网友评论