用Electron打造跨平台APP

关于electron

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的，下面直接上代码。

基础代码

源码地址: electron-demo
基础目录结构

electron-demo/
├── app
├─── index.html
├─── icon.icns
├── package.json
├── main.js

package.json 跟常规 Node 程序一样，将 main.js 作为 程序的启动入口文件

{
"name": "electron-demo",
"version": "1.0.0",
"description": "测试electron打包以及跟html5通信",
"main": "main.js",
"scripts": {
"start": "electron .",
"packager:os": "electron-packager ./ XXX教师端-非官方 --platform=darwin --out ./outApp --overwrite --icon=./app/icon.icns",
"packager:win64": "electron-packager ./ XXX教师端-非官方 --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./app/icon.icns"
},
"author": "lfourg",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^8.1.1",
"electron-packager": "^14.2.1"
}
}

main.js内容如下

const { app, BrowserWindow, Menu, ipcMain } = require('electron')
const path = require('path')

function createWindow () {
// 创建窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
frame: false,
webPreferences: {
nodeIntegration: true
}
})

// 加载Hmtl5页面
mainWindow.loadFile('app/index.html')

// 打开DevTools
mainWindow.webContents.openDevTools()

//添加菜单
const dockMenu = Menu.buildFromTemplate([
{label: '新窗口',
click () {
console.log('新窗口')
}
}, {
label: '设置',
submenu: [ { label: '静音' },{ label: '关闭' }]
}
])
app.dock.setMenu(dockMenu)

//注册渲染线程 屏幕最大化事件
ipcMain.on('windowFullScreen', e =>
mainWindow.setFullScreen(true)
)

//注册渲染线程 屏幕还原事件
ipcMain.on('windowNormal', e =>
mainWindow.setFullScreen(false)
)

//注册渲染线程 应用退出事件
ipcMain.on('quitWindow', e =>
app.quit()
)
}

app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', function () {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

html5 app/index.html页面

<script>
//主要方便在html5页面中访问electron对象
window.electron = require('electron')
</script>
<div id=app></div>

渲染进程与主进程的通信，html5中部分代码片段

window.electron.ipcRenderer.send('windowFullScreen')   //窗口最大化
window.electron.ipcRenderer.send('quitWindow')   //退出应用

html5中在线、离线检测

const alertOnlineStatus = () => {
window.alert(navigator.onLine ? 'online' : 'offline')
}
window.addEventListener('online', alertOnlineStatus)
window.addEventListener('offline', alertOnlineStatus)

打包

例子中使用electron-packager来打包 Electron 应用，生成各个平台的最终可运行文件
使用命令

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...] 参数说明

• <sourcedir>： 项目的位置
• <appname>： 应用名
• platform=<platform>： 打包的系统(darwin、win32、linux)
• arch=<arch>： 系统位数(ia32、x64)
• icon=<icon>： 指定应用的图标(Mac 为 .icns 文件，Windows 为 .ico 或 .png)
• out <out>： 指定输出的目录
• version=<version>： 指定编译的 electron-prebuilt 版本

我们可以直接在 package.json 的 script 字段中添加脚本

"scripts": {
"start": "electron .",
"packager:os": "electron-packager ./ XXX教师端-非官方 --platform=darwin --out ./outApp --overwrite --icon=./app/icon.icns",
"packager:win64": "electron-packager ./ XXX教师端-非官方 --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./app/icon.icns"
}

然后通过以下命令执行打包

npm run-script packager:os

小结

1. 不要以为一个系统可以打包所有系统的版本，MacBook打包darwin平台非常顺利，打包win版本各种报错，按提示安装wine还在研究中
2. 方便渲染线程与主线程通信，在Html5首页添加 window.electron = require('electron')来访问electron 我觉得是初学者使用最便捷的方式