electron-利用node开发桌面应用

简介

web前端语言的发展有目共睹, 从原来的pc web, 到后来的mobile SAP, 再到 nodejs,全站工程师应运而生. js快速并且稳健的发展让人不得不重视, 相应的前端开发人员的地位也愈来愈高, 愈来愈多的人愿意投入到前端的阵营里去. 而桌面app向来是web前端开发开发人员下意识的避开方向. 可是依然不乏有憧憬的人.因而借助于webkit内核和nodejs,出现了web移动app解决方案和web桌面app的解决方案. 而咱们须要作的就是利用熟悉的前端语言借助大拿们的工具,愉悦的开发就行了.css

Electron的前身是atom-shell, 是github目前比较出名的Atom编辑器的一个兄弟项目,它是一个借助nodejs和Chromium, 利用HTML/CSS/JavaScript语言建立桌面应用的一个工具. 与之相似的还有一个微软的工程师搞的NW.js, 原理基本相同. 可是我的感受可能Electron更新更好一些,社区发展也更热闹些.html

具体的说明,你们能够去参考官方的中文文档前端

下面边操做边摘一些环境安装以及打包的基础:node

运行环境

一旦你建立了最初的 main.js， index.html 和 package.json 这几个文件，你可能会想尝试在本地运行并测试，看看是否是和指望的那样正常运行。jquery

electron-prebuiltlinux

electron-prebuilt 是一个 npm 模块，包含所使用的 Electron 预编译版本。首先全局安装：nginx

npm install -g electron
//npm官方安装electron我老遇到问题,建议使用cnpm安装(后面全部的安装的时候若是出现问题就尽可能使用cnpm)，首先要安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g electron

而后你只须要按照以下方式直接运行你的应用：git

electron .

若是你是局部安装，那运行：github

./node_modules/.bin/electron .

若是你手工下载了 Electron 的二进制文件，你也能够直接使用其中的二进制文件直接运行你的应用。web

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

macOS

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 发布包，你能够在这里下载到。

web应用结构

大致上，一个 Electron 应用的目录结构以下：

your-app/
    ├── package.json
    ├── main.js
    └── index.html

package.json的格式和 Node 的彻底一致，而且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：

{
"name"    : "your-app",
"version" : "0.1.0",
"main"    : "main.js"
}

注意：若是 main 字段没有在 package.json 声明，Electron会优先加载 index.js。因为环境基于node,因此你的js可使用任何node模块.

main.js 应该用于建立窗口和处理系统事件,具体请参考官方的demo或者文档.

应用部署(官方版本)

方法一替换已有应用的资源文件

为了使用 Electron 部署你的应用程序，你存放应用程序的文件夹须要叫作 app 而且须要放在 Electron 的资源文件夹下（在 macOS 中是指 Electron.app/Contents/Resources/，在 Linux 和 Windows 中是指 resources/）就像这样：

在 macOS 中:

electron/Electron.app/Contents/Resources/app/
    ├── package.json
    ├── main.js
    └── index.html

在 Windows 和 Linux 中:

electron/resources/app
    ├── package.json
    ├── main.js
    └── index.html

而后运行 Electron.app （或者 Linux 中的 electron，Windows 中的 electron.exe）, 接着 Electron 就会以你的应用程序的方式启动。electron 文件夹将被部署并能够分发给最终的使用者。

方法二 asar打包

除了经过拷贝全部的资源文件来分发你的应用程序以外，你能够经过打包你的应用程序为一个 asar 库文件以免暴露你的源代码。

为了使用一个 asar 库文件代替 app 文件夹，你须要修改这个库文件的名字为 app.asar ，而后将其放到 Electron 的资源文件夹下，而后 Electron 就会试图读取这个库文件并从中启动.

在 macOS 中:

electron/Electron.app/Contents/Resources/
    └── app.asar

在 Windows 和 Linux 中:

electron/resources/
    └── app.asar

如何打包呢?

官方提供的打包原理是将web目录打包成一个asar,Electron 能够无需解压，即从其中读取任意文件内容。asar 包中的内容不可更改，因此 Node APIs 里那些能够用来修改文件的方法在对待 asar 包时都没法正常工做。

安装 asar

$ npm install -g asar

用 asar pack 打包

$ asar pack your-app app.asar

使用 asar 包

在 Electron 中有两类 APIs：Node.js 提供的 Node API 和 Chromium 提供的 Web API。这两种 API 都支持从 asar 包中读取文件。

#nodejs 从 asar 包读取一个文件：
const fs = require('fs')
fs.readFileSync('/path/to/example.asar/file.txt')

#nodejs 使用 asar 包中的一个模块：
require('/path/to/example.asar/dir/module.js')

#webapi
<script>
var $ = require('./jquery.min.js');
$.get('file:///path/to/example.asar/file.txt', function(data) {
console.log(data);
});
</script>

更详细的说明,请参考官方文档

更换名称与下载二进制文件

在使用 Electron 打包你的应用程序以后，你可能须要在分发给用户以前修改打包的名字。

Windows

你能够将 electron.exe 改为任意你喜欢的名字，而后可使用像 rcedit 编辑它的 icon 和其余信息。

macOS

你能够将 Electron.app 改为任意你喜欢的名字，而后你也须要修改这些文件中的 CFBundleDisplayName， CFBundleIdentifier 以及 CFBundleName 字段。这些文件以下：

Electron.app/Contents/Info.plist
Electron.app/Contents/Frameworks/Electron Helper.app/Contents/Info.plist

你也能够重命名帮助应用程序以免在应用程序监视器中显示 Electron Helper，可是请确保你已经修改了帮助应用的可执行文件的名字。

一个改过名字的应用程序的构造多是这样的：

MyApp.app/Contents
    ├── Info.plist
    ├── MacOS/
    │   └── MyApp
    └── Frameworks/
        ├── MyApp Helper EH.app
        |   ├── Info.plist
        |   └── MacOS/
        |       └── MyApp Helper EH
        ├── MyApp Helper NP.app
        |   ├── Info.plist
        |   └── MacOS/
        |       └── MyApp Helper NP
        └── MyApp Helper.app
            ├── Info.plist
            └── MacOS/
                └── MyApp Helper

Linux

你能够将 electron 改为任意你喜欢的名字。

应用部署(插件版本-推荐)

除了使用官方提供的方法外,不少第三方的模块也能够完成该打包过程.并直接生成各系统的安装文件。比较经常使用的是 electron-packager 和 electron-builder. 经过npm安装后直接可使用命令生成安装包和运行包, 简直太方便了. 不过可能须要对package.json作一些简单的配置.下面会分开说说.

electron-packager

electron-packager能够将项目打包成各平台可直接运行的程序，好比app,exe等。打包出来的程序至少100M,这是跨平台工具没法避免的通病。善用ignore参数，排除程序运行没必要要的包。

安装

cnpm install -g electron-packager

打包命令

electron-packager <sourcedir> <sourcedir> --platform= <platform> win32,darwin --arch=all --electronVersion=1.6.10 --out=dist/ --overwrite --ignore=node_modules/electron-* --ignore=node_modules/.bin --ignore=.git --ignore=dist --prune
#*<sourcedir> ： 项目的位置
#*<sourcedir> ： 应用名
#*--out <out> ： 指定输出的目录
#*--electronVersion=<version> ： 指定编译的 electron-prebuilt 版本，可使用前面prebuid安装的版本，查看命令  electron -h 
#--platform=<platform> ： 打包的系统(darwin、win3二、linux)
#--arch=<arch> ： 系统位数(ia3二、x64)
# --icon=<icon> ： 指定应用的图标(Mac 为 .icns 文件，Windows 为 .ico 或 .png)

下面是一个例子：

electron-packager . hello ../ --electronVersion 1.6.10 --overwrite

electron-builder

与electron-packager不一样，electron-builder是直接将项目打包成安装文件，好比，dmg,exe,msi.os系统，只能打包dmg文件，window系统才能打包exe，msi文件。打完包后基本不小于40兆。

安装

npm install electron-builder
#或者
cnpm install electron-builder

安装以后,全局的话则可使用cli命令build(这名起的真让人难受),局部安装则使用node_modules/.bin/build来调用命令生成压缩包,运行包和安装包. 具体的参数能够参考官方文档或者使用 build --help来查看

配置package.json

配置文件中必须的几项为, name, description, version and author. 同时你要带上electron-builder专用的配置键build,要求的键值appId和编译针对的系统平台参数,具体配置详情点击这里,下面是一个简单的示例:

{
"name": "helloworld",
"version": "0.1.0",
"author":"awen",
"description":"test",
"main": "main.js",
"build": {
    "appId": "com.electron.awen.hello",
    "copyright":"awen",
    "productName":"测试",
    "dmg":{
      "background":"build/background.png",
      "icon":"build/icon.icns",
      "window":{
        "x":100,
        "y":100,
        "width":500,
        "height":300
      }
    },
    "mac": {
     "category": "public.app-category.developer-tools",
     },
    "squirrelWindows":{
      "iconUrl":"https://github.com/favicon.ico"
     },
    "win": {
        "icon": "icon.ico"
    }
}
}

图标和背景

在web根目录下建一个build文件夹,里面来放图标和背景图片,固然也能够在package.json中本身配置(官方推荐使用目录,可是我的倾向于配置文件),说明以下:

webRoot
    └──build
        ├──background.png  (mac的DMG安装文件打开后的背景)
        ├──icon.icns  (mac的图标文件)
        ├──icon.ico  (windows的图标文件)
        └──icons (linux的图标文件,也能够省略直接继承mac的图标文件)
            └──32x32.png

最后打包

弄好你的环境以后你能够执行如下build --help中的示例生成三平台的程序,初次执行会下载对应平台的electron包.

build -mwl

多平台打包依赖

编译多平台的包时,你须要安装一些依赖,固然仍是但愿在不一样平台下打包。由于下面这种方式兼容性并无想象中的好:

MacOS

#MacOS上编译windows:
brew install wine --without-x11
brew install mono
#MacOS上编译linux:
brew install gnu-tar graphicsmagick xz
#若是须要生成rpm
brew install rpm.