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

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

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

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

electron官網：https://electronjs.org/

electron-vue官網：https://electron.org.cn/vue/index.html

界面預覽：

物品管理

進出明細

安裝python2.7 和 Visual Studio 2015

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

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

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

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

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

static：靜態資源

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

.travis.yml為linux構建平臺的配置，appveyor.yml為windows構建平臺的配置。之后也會詳細提到自動化構建。

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

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

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

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

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

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

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

...

主進程向渲染進程發送消息：

// 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：版權
directories：打包目錄
win: windows配置。icon為程序圖標目錄，windows圖標至少需要320 x 320，否則報錯
nsis：windows安裝程序exe配置，如果不配置，那么一鍵安裝至C盤User一個local app目錄下，不符合程序使用要求，這里我設置了oneClick：false和allowToChangeInstallationDirectory:true，就是不讓程序一鍵安裝，讓用戶去選擇安裝目錄。
其他如appId，dmg，linux、mac都是macOS和linux系統配置，沒有仔細研究

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

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


③. 將第一步生成的token填至項目環境變量，參數名為GH_TOKEN。發布的時候會自動使用GH_TOKEN進行github release api的調用。

④. 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：執行后，不僅打包，還會將打包后程序上傳，發布成github的release草稿，手動編輯后即可發布。
⑥. 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：為構建的版本號，會自增，這個和程序的版本號沒有關系
branches：指定在哪個分支進行構建
image：基礎鏡像，windows程序構建會用到vs
platform：系統位數：如x86（32位），x64（64位）
cache：npm緩存目錄
init：初始執行命令，將所有代碼換行符改為CRLF模式
install：安裝包
build_script：執行命令

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

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

// 某頁面組件xxx.vue

2.導出excel（下載文件）
如果在服務端進行導出，有兩個步驟，第一步是將數據填充并生成excel，第二步是將文件發送出去。使用electron本地進行導出也不例外，但因為不是調用http接口，會有一些差異。
nodejs生成excel在這里就不多描述，以后我會補充相應的文章。在這里先推薦這兩個庫，如果生成的excel比較簡單，橫行數列并沒有任何樣式的，可以使用node-xlsx。如果需要生成較為復雜的excel，比如有樣式要求，有合并單元格的需求，可以使用ejsExcel。
假設我們已經導出了一個名為test.xlsx的excel在系統臨時目錄（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.窗口相關
① 窗口欄
原生的窗口欄不是那么美觀，我們可以去掉原生窗口欄，自己寫一個。
主進程
// src/main/index.js
import { BrowserWindow、ipcMain } from "electron";
// 創建窗口時配置
const mainWindow = new BrowserWindow({
    frame: false, // 去掉原生窗口欄
    ...
});

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

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

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