基于Electron的桌面應用開發

一、環境搭建

1、安裝node.js

如果你的機器上還沒有Node.js和npm ，請安裝它們。

2、安裝electron

windows系統下直接在指令行輸入

npm install -g electron-prebuilt

mac 系統需要在管理者權限下安裝，輸好密碼就可以開始等他安裝了

sudo npm install -g electron-prebuilt

全局安裝後就可以在指令行使用 electron 工具，也可以通過 electron啟動應用，當然也可以選擇局部安裝。

3、安裝electron-packager

windows系統下：

npm install -g electron-packager

同樣，mac系統需要在管理者權限下安裝

sudo npm install -g electron-packager

4、安裝vscode

推薦一款比較常用的編輯器：vscode

5、使用淘寶 NPM鏡像

大家都知道國内直接使用 npm 的官方鏡像是非常慢的，這裡推薦使用淘寶 NPM 鏡像。

淘寶NPM 鏡像是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(隻讀)，同步頻率目前為 10分鐘一次以保證盡量與官方服務同步。

你可以使用淘寶定制的 cnpm (gzip 壓縮支援) 指令行工具代替預設的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

這樣就可以使用 cnpm 指令來安裝子產品了：

$ cnpm install [name]

二、簡單開發

1、項目架構

參看官方的 demo ，一個 Electron 應用的目錄結構大體如下：

app/

├── package.json

├── main.js

└── index.html

• package.json

可以了解為 android 裡面的 mainfest 檔案，裡面聲明了程式的名稱、簡介、版本等資訊；設定 Electron主程序運作的腳本（main.js），即設定程式的入口；設定快捷鍵，在你的 CLI（指令行）中可以用 electron . 友善地啟動應用。可以看下面例子：

{
"name": "channel",
"version": "1.0.0",
"description": "This is a demo",
"main": "main.js",
"author": "leoleo",
"scripts":
    {
        "start":"electron ."
    }
}
           

• main.js

這個檔案是程式的入口，Electron 的主程序将用它來啟動并建立桌面應用。

•  index.html

這個檔案就是我們要呈現出來的網頁了。既可以使用本地的html，也可以使用遠端的html。

2、踩坑記錄

• Electron 加載帶 jquery的項目報錯

solution： 詳細解答可以檢視這裡

• Electron使用網絡請求

solution：原來也有很多庫（superagent、bluebird）提供給我們使用的，使用方式方法也很簡單。

三、打包釋出

1、指令打包

electron-packager的打包基本指令是：

electron-packager <location of project> <name ofproject> <platform> <architecture> <electron version><optional options>

指令說明： 

* location of project：項目所在路徑 

* name of project：打包的項目名字 

* platform：确定了你要建構哪個平台的應用（Windows、Mac 還是 Linux） 

* architecture：決定了使用 x86 還是 x64還是兩個架構都用 

* electron version：electron 的版本 

* optional options：可選選項

指令比較長，每次要是都用這個指令來打包會很煩，可以使用第二種方法；

2、腳本打包

首先在項目根目錄下面的 package.json 裡添加代碼，

"packager": "electron-packager ./app HelloWorld--all --out ./OutApp --version 1.4.0 --overwrite --icon=./app/img/icon/icon.ico"

PS：這裡要注意，字段裡的 項目名字，version，icon路徑要改成自己的；

然後，再使用指令 

npm run-script packager

四、electron調用C++動态連結庫（dll）

1、Foreign Function Interface（FFI）

FFI的全稱是Foreign FunctionInterface，該項目生來就是解決NodeJS的本地調用問題的，其流程就相當于Windows下的LoadLibrary()和GetProcAddress()，亦可以了解為NodeJS下的平台調用。有了它，本地調用變得異常簡單，因為它在NodeJS環境中為JavaScript提供了一套強大的工具集用來調用動态連結庫。

• 環境配置

1）安裝node-gyp

npm install -g node-gyp

裝之前要安裝python 2.7，而node-gyp不支援python 3.x，是以安裝了多個版本python 的讀者得留意一下自己目前的python 版本了。

2）安裝ffi

npm install ffi

• 簡單開發

var FFI = require('ffi');
 

var user32 = new FFI.Library('user32', {

   'MessageBoxA':[ 'int32', [ 'int32', 'string', 'string', 'int32' ]]

});
 

var retCode = user32.MessageBoxW( 0, 'Node.JS!', 'Hello, World!', 1);
           

Library需要傳入兩個參數，第一個表示動态連結庫的路徑，不需要字尾；第二個參數是json，每個元素表示一個函數簽名，依次為函數名、函數傳回值，函數參數，可以同時加載多個函數，即對應多個元素。這兩個參數可以用來指定加載哪個檔案中的哪些函數。

注：ffi隻能調用C風格的子產品。即：ffi隻能調用采用C導出的動态連結庫。

2、C/C++ Addons

•  環境配置

1）安裝編譯工具

npm install -g --production windows-build-tools

2）安裝node-gyp

npm install -g node-gyp

• 編寫cc檔案

1)   在cc檔案中調用C++代碼，在C++代碼中調用dll

略。

2)   直接在cc檔案中調用dll

  HINSTANCE hDLL;

  hDLL=LoadLibrary("dlldemo.dll");//加載動态連結庫dlldemo.dll檔案；

  typedef int(*pMax)(int a,int b);//函數指針

  pMax Max=NULL;

  Max=(pMax)GetProcAddress(hDLL,"Max");


  if (Max)

  {

     int ret=Max(99,100);    

  }
           

其中dlldemo.dll 裡有個 Max 函數，求兩個 int 整數的最大值。

• 建構

1）編寫binding.gyp檔案

當源代碼已被編寫，它必須被編譯成二進制 addon.node 檔案。要做到這點，需在項目的頂層(和package.json同一級)建立一個名為 binding.gyp 的檔案，它使用一個類似 JSON 的格式來描述子產品的建構配置。 該檔案會被 node-gyp（一個用于編譯 Node.js 插件的工具）使用。

{

 "targets": [
    {
     "target_name": "addon",
     "sources": [ "hello.cc" ]
    }
  ]
}
           

2）node-gyp configure

當binding.gyp 檔案已被建立，使用 node-gyp configure 為目前平台生成相應的項目建構檔案。 這會在 build/ 目錄下生成一個 Makefile 檔案（Unix平台）或 vcxproj 檔案（Windows平台）。

3）node-gyp build

調用 node-gyp build 指令生成編譯後的 addon.node 的檔案。 它會被放進 build/Release/ 目錄。

Build的時候可能會出現一個奇怪的錯誤提示The system cannot find message text for message number 0x%1 in the message file for %2你就不能直接告訴我Wrong Architecture麼……Don't panic,你需要重新編譯一下：

node-gyp rebuild-target=1.4.13 -arch=ia32 -dist-url=https://atom.io/download/atom-shell (1.4.13是你用的 Electron版本号)

五、寫在後面

Electron 結合了 Chromium、Node.js 和用于調用作業系統本地功能的 API（如打開檔案視窗、通知、圖示等）。

• Chromium：Google創造的一個開源庫，并用于 Google 的浏覽器 Chrome。
• Node.js（Node）：一個用于在伺服器運作 JavaScript的運作時（runtime），它擁有檔案系統和網絡的權限（你的電腦也可以是一台伺服器！）。

Electron 應用就像 Node應用，它也依賴一個 

package.json

 檔案。該檔案定義了哪個檔案作為主程序，并是以讓 Electron 知道從何啟動你的應用。然後主程序能建立渲染程序，并能使用 IPC讓兩者間進行消息傳遞。

Electron 的一個缺點是：即使你的應用是一個簡單的時鐘，但它也不得不包含完整的基礎設施（如 Chromium、Node等）。是以，一般情況，打包後的程式至少會達到幾十兆（根據系統類型進行浮動）。當你的應用越複雜，就越可以忽略這部分了。

衆所周知，頁面的渲染難免會導緻『白屏』，而且這裡采用了 Vue架構，情況就更加糟糕了。另外，Electron應用也避免不了『先打開浏覽器，再渲染頁面』的步驟。下面提供幾種方法來減輕這種情況，以讓程式更貼近原生應用。

1.    指定BrowserWindow的背景顔色；

2.    先隐藏視窗，直到頁面加載後再顯示；

3.    儲存視窗的尺寸和位置，以讓程式下次被打開時，依然保留的同樣大小和出現在同樣的位置上。

對于第一點，若程式的背景不是純白（#fff）的，那麼可指定視窗的背景顔色與其一緻，以避免突變。

mainWindow = new BrowserWindow({
    title: 'Vanish',
    backgroundColor: '#f5f5f5',};
           

對于第二點，由于 Electron本質是一個浏覽器，需要加載非網頁部分的資源。是以，我們可以先隐藏視窗。

var mainWindow = new BrowserWindow({    
title: 'ElectronApp',
show: false,};
           

等到渲染程序開始渲染頁面的那一刻，在 

ready-to-show

 的回調函數中顯示視窗。

mainWindow.on('ready-to-show', 
function(){
    mainWindow.show();
    mainWindow.focus();
});

           

對于第三點，其實作方式，可參考《4 must-know tips for building cross platform Electron apps》。