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

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

本次項(xiàng)目【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ù)覽：

物品管理

進(jìn)出明細(xì)

安裝python2.7 和 Visual Studio 2015

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

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

.electron-vue：主要是webpack配置，還有一些封裝好了的命令行的輸出，供開(kāi)發(fā)、打包調(diào)試用。可以自行添加一些配置，如在webpack.render.config.js里添加less-loader和eslint-loader。

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

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

static：靜態(tài)資源

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

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

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

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

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

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

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

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

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

...

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

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

// 某vue組件


7. 打包
前文提到，我采用的是electron-builder進(jìn)行打包。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：項(xiàng)目名
copyright：版權(quán)
directories：打包目錄
win: windows配置。icon為程序圖標(biāo)目錄，windows圖標(biāo)至少需要320 x 320，否則報(bào)錯(cuò)
nsis：windows安裝程序exe配置，如果不配置，那么一鍵安裝至C盤User一個(gè)local app目錄下，不符合程序使用要求，這里我設(shè)置了oneClick：false和allowToChangeInstallationDirectory:true，就是不讓程序一鍵安裝，讓用戶去選擇安裝目錄。
其他如appId，dmg，linux、mac都是macOS和linux系統(tǒng)配置，沒(méi)有仔細(xì)研究

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

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


③. 將第一步生成的token填至項(xiàng)目環(huán)境變量，參數(shù)名為GH_TOKEN。發(fā)布的時(shí)候會(huì)自動(dòng)使用GH_TOKEN進(jìn)行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í)行后，不僅打包，還會(huì)將打包后程序上傳，發(fā)布成github的release草稿，手動(dòng)編輯后即可發(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)建的版本號(hào)，會(huì)自增，這個(gè)和程序的版本號(hào)沒(méi)有關(guān)系
branches：指定在哪個(gè)分支進(jìn)行構(gòu)建
image：基礎(chǔ)鏡像，windows程序構(gòu)建會(huì)用到vs
platform：系統(tǒng)位數(shù)：如x86（32位），x64（64位）
cache：npm緩存目錄
init：初始執(zhí)行命令，將所有代碼換行符改為CRLF模式
install：安裝包
build_script：執(zhí)行命令

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

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

// 某頁(yè)面組件xxx.vue

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

// 渲染進(jìn)程
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)
① 窗口欄
原生的窗口欄不是那么美觀，我們可以去掉原生窗口欄，自己寫一個(gè)。
主進(jìn)程
// src/main/index.js
import { BrowserWindow、ipcMain } from "electron";
// 創(chuàng)建窗口時(shí)配置
const mainWindow = new BrowserWindow({
    frame: false, // 去掉原生窗口欄
    ...
});

// 主進(jìn)程監(jiān)聽(tīng)事件進(jì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ū)域會(huì)自動(dòng)有雙擊最大化的功能，注意：拖拽區(qū)域內(nèi)的點(diǎn)擊、移入移出等事件將無(wú)效，需要將拖拽區(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òng)時(shí)窗口白屏
程序啟動(dòng)時(shí)，界面渲染需要一定時(shí)間，導(dǎo)致白屏一下，體驗(yàn)不好。解決方案一種是將程序的背景色設(shè)為html的背景色，另外一種就是等界面加載完畢之后再顯示窗口，代碼如下：
主進(jìn)程中
// 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é)語(yǔ)
electron非常好玩，它解放了我們?cè)跒g覽器中開(kāi)發(fā)界面的束縛。C/S架構(gòu)也有很多不同于功能點(diǎn)需要多多考慮。第一次寫比較長(zhǎng)的文章，個(gè)中可能會(huì)有手誤或者知識(shí)錯(cuò)誤，順序也不是最理想的。歡迎討論，也請(qǐng)各路大牛多多指教，指出不正！