使用electron進行原生應用的打包

今天介紹的這個electron就是一大神器,可以很方便的將網頁應用打包為mac, win, linux下的可執行檔案,只需進行簡單的配置,雖比不上原生的速度和瘦小,但是價效比著實不錯.

,
"devdependencies": 
}

artifactname: "$-$.$" # 應用最終的名稱

npmrebuild: false # 是否在開始編譯前重構原生依賴,可先嘗試true, 如果出現問題再修改為false,

files:

- index.js # 打包檔案入口,後文將給出

directories:

output: electron_packed/ # 輸出路徑

extraresources:

- from: "../dist/" #包含的待打包檔案

to: ""

mac: # 打包成mac環境引數

target:

- dmg # 打包為dmg格式(可選pkg,zip等)

icon: "./build/icon.icns" # 圖示所在路徑(使用字串相對路徑)

dmg: # 安裝介面

contents:

- x: 410

y: 170

type: link

- x: 130

y: 170

type: file

win: # 打包為win環境

icon: "./build/icon.ico" # 圖示所在路徑

target:

- nsis # 打包為nsis格式

verifyupdatecodesignature: false # 是否需要驗證簽名

# requestedexecutionlevel: requireadministrator # 執行等級(是否需要管理員許可權,通常情況不需要)

nsis:

oneclick: false # 是否一鍵安裝(靜默安裝)

createdesktopshortcut: always # 建立桌面快捷方式

createstartmenushortcut: true # 建立開始選單快捷方式

# include: build/installer.nsh # 是否有額外的自定義安裝需求,

runafterfinish: true # 安裝完成後是否勾選立即執行

const browserwindow =electron.browserwindow

const ipcmain =electron.ipcmain //eventemitter class 事件觸發類

const url = require('url')

const path = require('path')

let mainwindow = null // 建立全域性物件,不然當js物件被垃圾**的時候視窗會自動關閉

// 建立瀏覽視窗,定義高寬

function

createwindow () )

// 載入本地檔案

mainwindow.loadurl(url.format())

// 除錯階段也可載入除錯位址

//開啟除錯工具

//視窗關閉時觸發

mainwindow.on('closed', function

() )}//

實現單例,防止程式多開

//如果為已有視窗,呼叫focus,如果最小化,還會恢復視窗

if(mainwindow)

});// 多開退出程式

if(ishouldquit)

// 載入完成之後呼叫事件

// 只對windows有效,當所有視窗關閉後退出(os x會強制乙個視窗顯示)

() })

// 開始響應渲染

ipcmain.on('response-render', (event, arg) =>)

以上配置可以基本滿足需求.

1 打包過程應該獨立,所以不應該對專案造成汙染,強烈建議建立乙個新的資料夾(比如本文的electron_pack資料夾),放打包配置檔案相關資訊,包括打包好的檔案,盡量避免對專案結構造成破壞

2 打包命令可寫入package.json的指令碼(script)中,注意, --project electron_pack是指定待打包資料夾,--win --ia32表示windows下32位,預設不配引數的話會按照當前平台的引數進行配置.並且需要再指定的打包資料夾中新增package.json(整個專案的package.json只需新增electron和electron_example的模組依賴),打包所需的配置寫在這裡.

electron_pack檔案目錄

├── build

│ ├── icon.icns

│ ├── icon.ico

│ └── icons.png

├── electron-builder.yml

├── index.js

└── package.json

專案的package.json

"build:mac": "rm -rf electron_pack/electron_packed && cross-env electron-builder --project electron_pack",

"build:win": "rm -rf electron_pack/electron_packed && cross-env electron-builder --win --ia32 --project electron_pack"

編譯執行命令:

yarn build:mac

yarn build:win

打包所需的package.json (json格式不允許注釋,此處只是便於解釋和理解)

,
"author": "lorry",
"license": "isc"
}

3 指定(icon)需要使用字串形式並且為相對路徑

4 版本的區別真的很大,如果根據相同姿勢進行操作還是出了問題,請注意版本,我的版本為electron: ~2.0.2 electron-builder:~20.7.1

5 請一定使用yarn方式進行安裝,可以避免一些很微妙的錯誤.

更多詳細功能及自定義請參見electron英文文件

中文文件

使用electron進行原生應用的打包

electron使用總結

hibernate4使用原生jdbc進行批處理

React Native 嵌入到iOS原生應用

使用electron進行原生應用的打包

electron使用總結

hibernate4使用原生jdbc進行批處理

React Native 嵌入到iOS原生應用

相關推薦