桌面應用之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項目代碼。

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

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

cd electron-quick-start
cnpm install

第三步:輸入命令npm start，運行項目。如果彈出Hello World的窗口，說明項目運行成功。

npm start

第四步:配置靜態資源文件

需要在項目文件夾下新建資源文件夾（這里新建名字為res的目錄），將程序發布所用的圖標等資源統一放進資源文件夾進行管理。（打包windows exe需要ico文件像素為256*256）；

第五步:安裝打包工具全局安裝electron-builder模塊

cnpm install electron-builder -g

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

第六步:添加electron-builder編譯所需要的屬性

"devDependencies": {
    "electron": "^3.0.7"
  },
  "build": {
    "appId": "com.y.ledou",
    "copyright":"Y",
    "productName":"樂豆",
    "dmg":{
      "window":{
        "x":100,
        "y":100,
        "width":500,
        "height":300
      }
    },
    "win":{
      "icon":"res/icon_net.png"
    },
  "mac": {
      "icon": "res/icon.icns"
    },
    "linux": {
      "icon": "res"
    }
  }

 

第七步:打包應用

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

 

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

然后雙擊樂豆 Setup 1.0.0.exe安裝運行即可

三,基於electron-vue開發

3.1,搭建項目並運行

第一步:安裝vue-cli

electron-vue腳手架安裝

npm install -g vue-cli

第二步:初始化項目

vue init simulatedgreg/electron-vue  desktopApp

然后一路回車即可

 第三步:編譯並運行項目

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

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

 第四步:項目打包

運行如下命令:

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

npm install nativefier –g

第二步:制作應用

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

其中options 是選項，targetUrl是目標鏈接，dest是生成位置，默認當前位置。

以我的博客為例，最簡單的命令為：

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

詳情可查看文檔:https://github.com/jiahaog/nativefier/blob/HEAD/docs/api.md

第三步:效果

1,創建的快捷方式

2,打開的效果