桌面應用之electron開發與轉換

一,介紹與需求

1.1,介紹

1. Electron簡介

Electron是用HTML，CSS和JavaScript來構建跨平臺桌面應用程式的一個開源庫。 Electron通過將Chromium和Node.js合併到同一個執行時環境中，並將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。目前，Electron已被Microsoft、Facebook、Slack和 Docker等大廠接受，應用涉及開發工具、社交應用、音樂、遊戲、金融等領域。

2. Node.js簡介

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境。 
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。

3. 腳手架—electron-vue簡介

electron-vue 是一個結合electron和Vue.js的專案，非常方便建立起electron應用程式模版。Vue.js是當前比較火的JavaScript MVVM庫, 它以資料驅動和元件化的思想構建前端應用，被越來越多的前端開發者接受。採用electron-vue腳手架之後，你可以使用 webpack、electron-packager 或 electron-builder，vue-router、vuex 等最常用的外掛。

1.2,需求

開發跨平臺的桌面應用

二,基於node開發

為了快速搭建應用框架，我們可以選擇Electron的electron-quick-start專案

第一步:新建目錄desktopApp，開啟命令列，進入此目錄，輸入git命令下載electron-quick-start專案程式碼。

1 git clone https://github.com/electron/electron-quick-start

第二步:進入目錄electron-quick-start，輸入命令cnpm install，安裝相關依賴包。

1 cd electron-quick-start
2 cnpm install

第三步:輸入命令npm start，執行專案。如果彈出Hello World的視窗，說明專案執行成功。

1 npm start

第四步:配置靜態資原始檔

需要在專案資料夾下新建資原始檔夾（這裡新建名字為res的目錄），將程式釋出所用的圖示等資源統一放進資原始檔夾進行管理。（打包windows exe需要ico檔案畫素為256*256）；

第五步:安裝打包工具全域性安裝electron-builder模組

1 cnpm install electron-builder -g

安裝完成後，可輸入命令build --help，測試是否安裝成功

第六步:新增electron-builder編譯所需要的屬性

 1 "devDependencies": {
 2     "electron": "^3.0.7"
 3   },
 4   "build": {
 5     "appId": "com.y.ledou",
 6     "copyright":"Y",
 7     "productName":"樂豆",
 8     "dmg":{
 9       "window":{
10         "x":100,
11         "y":100,
12         "width":500,
13         "height":300
14       }
15     },
16     "win":{
17       "icon":"res/icon_net.png"
18     },
19   "mac": {
20       "icon": "res/icon.icns"
21     },
22     "linux": {
23       "icon": "res"
24     }
25   }

第七步:打包應用

配置完成後在專案目錄裡執行命令build --win --x64。執行命令後即開始打包，無報錯後即打包成功。如下圖：

打包成功後，會在專案目錄裡自動生成dist目錄，裡邊存有生成的桌面應用安裝包。如下圖：

然後雙擊樂豆 Setup 1.0.0.exe安裝執行即可

三,基於electron-vue開發

3.1,搭建專案並執行

第一步:安裝vue-cli

electron-vue腳手架安裝

1 npm install -g vue-cli

第二步:初始化專案

1 vue init simulatedgreg/electron-vue  desktopApp

然後一路回車即可

 第三步:編譯並執行專案

執行下面的指令，如果沒有報錯，會自動彈出程式介面，說明程式執行起來了。

1 cd desktopApp
2 yarn (或者npm install）
3 yarn run dev（或者npm run dev）

 第四步:專案打包

執行如下命令:

1 npm run build

如果看到如下結果,則表示打包成功

3.2,專案架構

自動生成了基本的程式碼結構

1. 1. src/main/index.js是程式入口檔案，electron-vue已經幫我們生成好程式碼。如果需要修改程式載入、視窗屬性等設定，在這裡修改。
   2. src/renderer/components：存放頁面佈局檔案，你開發頁面時在這個檔案下建立頁面的index.vue、index.js、index.css檔案。
   3. src/renderer/router/index.js：設定頁面轉跳路由。
   4. build：存放專案打包生成的安裝包

四,應用與總結

4.1,build可以指定打包的型別

1. windows系統:build --win --x64/--x32
2. linux系統:build --linux
3. MAC本:build --mac

4.2,web打包成桌面應用

第一步:配置環境

1,安裝node

2,安裝nativefier

1 npm install nativefier –g

第二步:製作應用

命令列輸入 nativefier [options] <targetUrl> [dest]

其中options 是選項，targetUrl是目標連結，dest是生成位置，預設當前位置。

以我的部落格為例，最簡單的命令為：

1 nativefier "https://www.cnblogs.com/jackson-zhangjiang/"

詳情可檢視文件:https://github.com/jiahaog/nativefier/blob/HEAD/docs/api.md

第三步:效果

1,建立的快捷方式

2,開啟的效果