用Electron打造跨平台APP

关于electron

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

基础代码

基础目录结构

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

注意

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

来源：oschina

链接：https://my.oschina.net/u/4291402/blog/3191906

标签

Darwin

electron