摘要：遠(yuǎn)程讀取會有許多限制，防止引起不必要的安全隱患。比較時可以把點去掉轉(zhuǎn)為數(shù)字類型比較腳本執(zhí)行完畢下載前可以拿到更新日志時間版本號和包大小，下載時可以拿到速度。然后開啟該項目的構(gòu)建。將第一步生成的填至項目環(huán)境變量，參數(shù)名為。

父母都是做出納相關(guān)的工作，希望我能給他們做個簡單的進銷存，在上班的時候使用。開發(fā)一個不需要花錢買服務(wù)器，不需要依賴網(wǎng)絡(luò)（更新除外），單機版的程序，對于前端出身的我來說，那么electron或nwjs是最好的選擇。
electron官網(wǎng)對electron與nwjs的比較
這里我選擇了electron，因為很熟悉vue，就使用國人集成的electron-vue進行快速開發(fā)。本地數(shù)據(jù)庫采用輕量嵌入型數(shù)據(jù)庫sqlite3，不二之選。UI組件為iview。

本次項目【easy-invoices】github地址：https://github.com/CaanDoll/easy-invoices （求一波star~）

軟件下載（目前只構(gòu)建了windows版本）：https://github.com/CaanDoll/easy-invoices/releases

electron官網(wǎng)：https://electronjs.org/

electron-vue官網(wǎng)：https://electron.org.cn/vue/index.html

界面預(yù)覽：

物品管理

進出明細(xì)

安裝python2.7 和 Visual Studio 2015

$ npm install -g vue-cli
$ vue init simulatedgreg/electron-vue easy-invoices

打包選擇electron-builder。builder可以打包成具體文件，也可以是exe安裝程序，而packager只能打包具體文件。下面會具體說明打包。
該命令會生成一個easy-invoices文件夾，大致目錄如下（有細(xì)微變動）

.electron-vue：主要是webpack配置，還有一些封裝好了的命令行的輸出，供開發(fā)、打包調(diào)試用?？梢宰孕刑砑右恍┡渲?，如在webpack.render.config.js里添加less-loader和eslint-loader。

build：打包需要的素材，例如icon。打包后的默認(rèn)目錄也在于此

src：源碼，main是主進程部分，render是渲染進程部分，下文會講到這兩個概念。index.ejs會被編譯為html的入口。

static：靜態(tài)資源

有一些文件是我后來加上去的，比如eslint相關(guān)（.eslintrc.js，.eslintignore），與commit信息校驗相關(guān)（verify_commmit_msg.js）等

.travis.yml為linux構(gòu)建平臺的配置，appveyor.yml為windows構(gòu)建平臺的配置。之后也會詳細(xì)提到自動化構(gòu)建。

nodejs中使用c++模塊會涉及到編譯問題，該編譯常常會導(dǎo)致一些問題發(fā)生。
詳細(xì)的操作請見我的另外一篇文章《electron項目中使用sqlite3的編譯問題（windows）》

在使用electron開發(fā)之前，我們需要注意以下幾點

electron的運行依托于nodejs環(huán)境，渲染界面使用chromium。因此，我們開發(fā)界面實則編寫html，并且在開發(fā)的過程中，可以使用nodejs原生模塊，比如fs文件模塊、os系統(tǒng)模塊等。這使得我們的程序有更多的權(quán)限和功能，可以非常強大。但在強大的同時，開發(fā)者需要擔(dān)起自身的責(zé)任，需要更多的去注意安全問題。

在electron里，最核心的兩個概念就是主進程和渲染進程。主進程負(fù)責(zé)整個程序的調(diào)度，控制一些功能，只有一個。而渲染進程負(fù)責(zé)界面的渲染。他們之間可以相互通信。

electron加載html有兩種方式，一種通過本地路徑讀取，一種通過http遠(yuǎn)程讀取。遠(yuǎn)程讀取會有許多限制，防止引起不必要的安全隱患。electron-vue封裝好了開發(fā)模式和生產(chǎn)模式，開發(fā)模式啟動webpack-dev-server，渲染進程遠(yuǎn)程讀取，生產(chǎn)模式打包至本地，渲染進程本地路徑讀取。

electron-vue將vue與webpack集成進來快速開發(fā)。前端界面使用vue去開發(fā)，并使用vue-router做單窗口路由控制。webpack進行模塊打包與開發(fā)時的監(jiān)聽。electron-vue腳手架提供了vue-electron，并已經(jīng)封裝了這個方法，當(dāng)運行環(huán)境為electron的時候，會將electron掛載在Vue.prototype上。electron對象上有許多api，詳情請參考文檔。

// vue入口文件
// src/renderer/main.js
if (!process.env.IS_WEB) Vue.use(require("vue-electron"));

...

主進程向渲染進程發(fā)送消息：

// src/main/index.js
import { BrowserWindow } from "electron";
const mainWindow = new BrowserWindow();
mainWindow.webContents.send("messageOne", "haha");

// 某vue組件


7. 打包
前文提到，我采用的是electron-builder進行打包。electron-builder官方文檔
打包的主要配置在package.json里：
{
    "scripts":{
        "build": "node .electron-vue/build.js && electron-builder",
        "build:dir": "node .electron-vue/build.js && electron-builder --dir"
    },
    "build": {
        "productName": "easy-invoices",
        "copyright": "caandoll",
        "appId": "org.caandoll.easy-invoices",
        "directories": {
          "output": "build"
        },
        "files": [
          "dist/electron/**/*"
        ],
        "dmg": {
          "contents": [
            {
              "x": 410,
              "y": 150,
              "type": "link",
              "path": "/Applications"
            },
            {
              "x": 130,
              "y": 150,
              "type": "file"
            }
          ]
        },
        "mac": {
          "icon": "build/icons/icon.png"
        },
        "win": {
          "icon": "build/icons/icon.png"
        },
        "linux": {
          "icon": "build/icons/icon.png"
        },
        "nsis": {
          "oneClick": false,
          "allowToChangeInstallationDirectory": true
        }
    }
}
scripts：

build：打包成exe安裝程序
build:dir：打包成文件形式

build：

productName：項目名
copyright：版權(quán)
directories：打包目錄
win: windows配置。icon為程序圖標(biāo)目錄，windows圖標(biāo)至少需要320 x 320，否則報錯
nsis：windows安裝程序exe配置，如果不配置，那么一鍵安裝至C盤User一個local app目錄下，不符合程序使用要求，這里我設(shè)置了oneClick：false和allowToChangeInstallationDirectory:true，就是不讓程序一鍵安裝，讓用戶去選擇安裝目錄。
其他如appId，dmg，linux、mac都是macOS和linux系統(tǒng)配置，沒有仔細(xì)研究

8. CI自動構(gòu)建發(fā)布
travis和appveyor是開源的兩個自動化構(gòu)建平臺，免費服務(wù)于github等開源項目（不開源項目貌似要給錢）。如果你是在其他這兩個CI平臺不支持的倉庫，可使用其他構(gòu)建工具，原理相同。
①. 在https://github.com/settings/tokens Generate new token，寫上描述，勾上發(fā)布權(quán)限，生成token。該token只可見一次，注意保存

②. https://www.appveyor.com/注冊用戶，使用github登錄。然后開啟該項目的構(gòu)建。


③. 將第一步生成的token填至項目環(huán)境變量，參數(shù)名為GH_TOKEN。發(fā)布的時候會自動使用GH_TOKEN進行g(shù)ithub release api的調(diào)用。

④. package.json
{
    "repository": {
        "type": "git",
        "url": "https://github.com/CaanDoll/easy-invoices.git"
    },
    "scripts":{
        "build:ci": "node .electron-vue/build.js && electron-builder --publish always"
    },
}
build:ci：執(zhí)行后，不僅打包，還會將打包后程序上傳，發(fā)布成github的release草稿，手動編輯后即可發(fā)布。
⑥. appveyor.yml
version: 0.0.{build}

branches:
  only:
    - master

image: Visual Studio 2017
platform:
  - x64

cache:
  - node_modules
  - "%APPDATA%
pm-cache"
  - "%USERPROFILE%.electron"
  - "%USERPROFILE%AppDataLocalYarncache"

init:
  - git config --global core.autocrlf input

install:
  - ps: Install-Product node 8 x64
  - yarn

build_script:
  - yarn build:ci

test: off

version：為構(gòu)建的版本號，會自增，這個和程序的版本號沒有關(guān)系
branches：指定在哪個分支進行構(gòu)建
image：基礎(chǔ)鏡像，windows程序構(gòu)建會用到vs
platform：系統(tǒng)位數(shù)：如x86（32位），x64（64位）
cache：npm緩存目錄
init：初始執(zhí)行命令，將所有代碼換行符改為CRLF模式
install：安裝包
build_script：執(zhí)行命令

接下來提交在github master分支或者merge到master分支（申請merge之后也會觸發(fā)）就可以觸發(fā)構(gòu)建了，在appveyor平臺上可以看到。

五、其他一些細(xì)節(jié)
1.打開系統(tǒng)默認(rèn)瀏覽器對應(yīng)鏈接或者打開我的電腦對應(yīng)文件目錄
如果使用一般的a標(biāo)簽，會直接將程序的界面跳轉(zhuǎn)至這個鏈接，因為本身就是瀏覽器內(nèi)核。加上target:_blank的話更會沒有反應(yīng)了。這個時候需要調(diào)用electron.shell。上面的openExternal（url）方法就是打開瀏覽器，openItem（path）打開文件目錄。
// vue入口文件
// src/renderer/main.js
if (!process.env.IS_WEB) Vue.use(require("vue-electron"));

// 某頁面組件xxx.vue

2.導(dǎo)出excel（下載文件）
如果在服務(wù)端進行導(dǎo)出，有兩個步驟，第一步是將數(shù)據(jù)填充并生成excel，第二步是將文件發(fā)送出去。使用electron本地進行導(dǎo)出也不例外，但因為不是調(diào)用http接口，會有一些差異。
nodejs生成excel在這里就不多描述，以后我會補充相應(yīng)的文章。在這里先推薦這兩個庫，如果生成的excel比較簡單，橫行數(shù)列并沒有任何樣式的，可以使用node-xlsx。如果需要生成較為復(fù)雜的excel，比如有樣式要求，有合并單元格的需求，可以使用ejsExcel。
假設(shè)我們已經(jīng)導(dǎo)出了一個名為test.xlsx的excel在系統(tǒng)臨時目錄（os.tmpdir()）：C:UsersusernameAppDataLocalTempappnametest.xlsx
// src/main/index.js
import { ipcMain } from "electron";
// mainWindow來自new BrowserWindow
ipcMain.on("download", (event, downloadPath) => {
  mainWindow.webContents.downloadURL(downloadPath);// 這個時候會彈出讓用戶選擇下載目錄
  mainWindow.webContents.session.once("will-download", (event, item) => {
    item.once("done", (event, state) => {
      // 成功的話 state為completed 取消的話 state為cancelled
      mainWindow.webContents.send("downstate", state);
    });
  });
});

// 渲染進程
ipcRenderer.send("download", "C:UsersusernameAppDataLocalTempappname	est.xlsx");
ipcRenderer.once("downstate", (event, arg) => {
  if (arg === "completed") {
    console.log("下載成功");
  } else if (arg === "cancelled"){
    console.log("下載取消");
  } else {
    console.log("下載失敗")
  }
3.窗口相關(guān)
① 窗口欄
原生的窗口欄不是那么美觀，我們可以去掉原生窗口欄，自己寫一個。
主進程
// src/main/index.js
import { BrowserWindow、ipcMain } from "electron";
// 創(chuàng)建窗口時配置
const mainWindow = new BrowserWindow({
    frame: false, // 去掉原生窗口欄
    ...
});

// 主進程監(jiān)聽事件進行窗口最小化、最大化、關(guān)閉  
// 窗口最小化
ipcMain.on("min-window", () => {
  mainWindow.minimize();
});
// 窗口最大化
ipcMain.on("max-window", () => {
  if (mainWindow.isMaximized()) {
    mainWindow.restore();
  } else {
    mainWindow.maximize();
  }
});
// 關(guān)閉
ipcMain.on("close-window", () => {
  mainWindow.close();
});
頭部組件或其他組件，這樣就可以在自己定義的元素上去執(zhí)行窗口操作了

css設(shè)置拖拽區(qū)域，拖拽區(qū)域會自動有雙擊最大化的功能，注意：拖拽區(qū)域內(nèi)的點擊、移入移出等事件將無效，需要將拖拽區(qū)域內(nèi)的按鈕等元素設(shè)為非拖拽區(qū)域即可
    header {
        -webkit-app-region: drag; // 拖拽區(qū)域
        .version {
            .ivu-tooltip {
                -webkit-app-region: no-drag; // 非拖拽區(qū)域
            }
        }
        .right {
            a {
                -webkit-app-region: no-drag; // 非拖拽區(qū)域
            }
        }
    }
② 啟動時窗口白屏
程序啟動時，界面渲染需要一定時間，導(dǎo)致白屏一下，體驗不好。解決方案一種是將程序的背景色設(shè)為html的背景色，另外一種就是等界面加載完畢之后再顯示窗口，代碼如下：
主進程中
// src/main/index.js
import { BrowserWindow} from "electron";
const mainWindow = new BrowserWindow({
    show: false,
    ...
 });
// 加載好html再呈現(xiàn)window，避免白屏
mainWindow.on("ready-to-show", () => {
    mainWindow.show();
    mainWindow.focus();
});

結(jié)語
electron非常好玩，它解放了我們在瀏覽器中開發(fā)界面的束縛。C/S架構(gòu)也有很多不同于功能點需要多多考慮。第一次寫比較長的文章，個中可能會有手誤或者知識錯誤，順序也不是最理想的。歡迎討論，也請各路大牛多多指教，指出不正！