Electron 是一款可以利用 Web 技術(shù) 開發(fā)跨平臺桌面應(yīng)用的框架,最初是 Github 發(fā)布的 Atom 編輯器衍生出的 Atom Shell,后更名為 Electron 。Electron 提供了一個(gè)能通過 JavaScript 和 HTML 創(chuàng)建桌面應(yīng)用的平臺,同時(shí)集成 Node 來授予網(wǎng)頁訪問底層系統(tǒng)的權(quán)限。目前常見的有 NW、heX、Electron,可以打造桌面應(yīng)用。
一、環(huán)境搭建
它的方式是使用 nodeJs API 調(diào)用系統(tǒng)資源,所以第一步就是安裝 node.js 環(huán)境喲。
1.1、安裝 node.js
如果你的機(jī)器上還沒有 Node.js? 和 npm ,請安裝它們。
1.2、全局安裝 electron
npm install -g electron-prebuilt
mac 系統(tǒng)需要在管理員權(quán)限下安裝喲,輸好密碼就可以開始等他安裝了。
sudo npm install -g electron-prebuilt
全局安裝后就可以在命令行使用 electron 工具
全局安裝之后,就可以通過 electron . 啟動應(yīng)用,當(dāng)然也可以選擇局部安裝。
1.3、安裝打包工具 electron-packager
npm install -g electron-packager
同樣,mac 系統(tǒng)需要在管理員權(quán)限下安裝喲
sudo npm install -g electron-packager
打包需要注意的點(diǎn)會在后面講解
二、簡單開發(fā)
那么,我們 Electron 程序到底是怎么跑起來的呢?先看下一個(gè) Electron 項(xiàng)目的基本框架組成吧。
2.1、項(xiàng)目框架
參看官方的 demo ,一個(gè) Electron 應(yīng)用的目錄結(jié)構(gòu)大體如下:
app/
├── package.json
├── main.js
└── index.html
-
package.json
可以理解為 android 里面的 mainfest 文件,里面聲明了程序的名稱、簡介、版本等信息;設(shè)置 Electron 主進(jìn)程運(yùn)行的腳本(main.js),即設(shè)置程序的入口;設(shè)置快捷鍵,在你的 CLI(命令行)中可以用 electron . 方便地啟動應(yīng)用。可以看下面例子:
{
"name": "channel",
"version": "1.0.0",
"description": "",
"main": "main.js",
"author": "Young",
"scripts": {
"start": "electron ."
}
}
-
main.js
這個(gè)文件是程序的入口,Electron 的主進(jìn)程將用它來啟動并創(chuàng)建桌面應(yīng)用。
const {app, BrowserWindow} = require('electron')
let win
function createWindow(){
win = new BrowserWindow({width:800, height:600})
win.loadURL(`file://${__dirname}/index.html`)
win.webContents.openDevTools()//開啟調(diào)試工具
win.on('close', () => {
win = null
})
win.on('resize', () => {
win.reload()
})
}
app.on('ready', createWindow)
app.on('window-all-cloased', () => {
if(process.platform !== 'drawin' ){
app.quit()
}
})
app.on('activate', () => {
if(win === null){
createWindow()
}
})
app 模塊:會控制應(yīng)用的生命周期(例如, 對應(yīng)用的 ready 狀態(tài)做出反應(yīng)),有點(diǎn)像 Application ,對應(yīng)有各個(gè)生命周期會有不同的狀態(tài)。
BrowserWindow 模塊:為你創(chuàng)建窗口。
win 對象:是你應(yīng)用的主窗口,被聲明成 null ,否則當(dāng) JavaScript 垃圾回收掉這個(gè)對象時(shí),窗口會被關(guān)閉。
當(dāng) app 捕獲 ready 事件,BrowserWindow 創(chuàng)建一個(gè)800*600大小的窗口。瀏覽器窗口的渲染進(jìn)程會渲染 index.html 文件。
當(dāng) app 捕獲 resize 事件,BrowserWindow 會重新加載,以此類推。
-
index.html
這個(gè)文件就是我們要呈現(xiàn)出來的網(wǎng)頁了。這就需要你自己發(fā)揮想象寫咯~
2.2、初次開發(fā)踩坑記錄
-
Electron 加載帶 jquery 的項(xiàng)目報(bào)錯(cuò)
solution: 詳細(xì)解答可以查看這里
<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<!-- normal script imports etc -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/vendor.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
Benefits
Works for both browser and electron with the same code
Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
Does NOT require node-integration
to be false
-
Electrons 使用網(wǎng)絡(luò)請求
solution:原來也有很多庫提供給我們使用的,使用方式方法也很簡單。
superagent
superagent 是一個(gè)極其簡單的 AJAX 庫。看過下面例子,相信機(jī)智的你已經(jīng)知道怎么使用了吧。
var request = require( 'superagent' );
request
.get( 'http://xxx.com' )
.end( function ( err, res ) {
// Do something
});
bluebird
bluebird 是一個(gè) Promise 庫。
凡是類似 IO 的操作,必定需要異步。經(jīng)典的解決方法是回調(diào),然而是時(shí)候用 Promise 了!
bluebird 聲稱擁有無與倫比的速度。其實(shí)更實(shí)用的功能是它支持能夠?qū)⒁恍┍旧硎遣恢С?Promise 的庫轉(zhuǎn)化為支持 Promise 的庫。
然而,要配合之前的 superagent,則需要另外一個(gè)庫 superagent-bluebird-promise。superagent 本身不支持 Promise,從上面的代碼來看就是使用回調(diào)的方法,這個(gè)庫就是將 superagent 和 bluebird 融合在一起的“融合卡”。使用的時(shí)候只需要:
var Promise = require( 'bluebird' );
var request = require( 'superagent-bluebird-promise' );
request
.get( 'http://xxxx.com' )
.then( function ( res ) {
// do something when resolved
}, function ( err ) {
// do something when rejected
});
立刻就可以使用上 then了,方便吧。
三、打包
開發(fā)搞定后最后就是打包啦!!這里給大家介紹的是在 mac os 環(huán)境下用 electron-packager 打包的流程(原諒我剛?cè)腴T electron ,目前也只學(xué)會了這種方式)。mac 下打包 mas 程序當(dāng)然是可行的,但是打包 win32 的程序的話,就需要花一點(diǎn)時(shí)間配置 Wine 環(huán)境了,后面會為大家介紹。
3.1 mac os 環(huán)境下打包 mas 安裝包
3.1.1 在 package.json 中添加安裝包依賴
"devDependencies": {
"electron-prebuilt": "^1.3.5",
"electron-packager": "latest"
}
3.1.2 命令行打包
在你項(xiàng)目工程的文件下,輸入以下命令進(jìn)行打包(為了好說明,我把空格換成換行符了)。
electron-packager
./ //location of project
cyyDemo //name of project
--platform=mas
--arch=x64
--version=1.3.5 //electron version
--out=dist/
--overwrite
--ignore=node_modules/electron-*
--ignore=node_modules/.bin
--ignore=.git
--ignore=dist --prune
- location of project 是你項(xiàng)目文件夾的位置,
- name of project 定義你的項(xiàng)目名,
- platform 決定要構(gòu)建的平臺(包括 Windows,Mac 和 Linux,all 表示所有平臺 )
- architecture 決定構(gòu)建哪個(gè)構(gòu)架下( x86 或 x64 ,all表示兩者),
- electron version 讓你選擇要用的 Electron 版本
命令的選項(xiàng)理解起來都比較簡單。為了獲得精美的圖標(biāo),你首先要找一款可以把 png 文件轉(zhuǎn)換到這些格式的工具,把它轉(zhuǎn)換成 .icns 格式( Mac 用)或者 .ico 格式( Window 用)。如果在非 Windows 系統(tǒng)給 Windows 平臺的應(yīng)用打包,你需要安裝 wine( Mac 用戶用 homebrew,Linux 用戶用 apt-get )。另外,第一次打包用時(shí)比較久,因?yàn)橐螺d平臺的二進(jìn)制文件,隨后的打包將會快的多。
3.2 mac os 環(huán)境下打包 win32 安裝包
這個(gè)問題比較麻煩的要安裝 Wine 環(huán)境。假設(shè)你設(shè)備上擁有 Wine 環(huán)境,打包流程可參考打包 mas 安裝包的流程,下面主要就介紹下 mac 中如何安裝配置 Wine 環(huán)境。
3.2.1 安裝 homebrew
brew 的安裝很簡單,使用一條 ruby 命令即可,Mac 系統(tǒng)上已經(jīng)默認(rèn)安裝了 ruby。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安裝完成后,就可以使用 brew 命令了,可以輸入命令自檢:
brew doctor
也可以參看安裝版本:
brew -v
3.2.1 使用 brew 安裝 Wine
- 打開終端,輸入以下命令行:
brew install wine
出現(xiàn)以下錯(cuò)誤,提示我們安裝缺失組件,下一步就是安裝缺失組件了。
安裝缺失組件 Xquartz
瀏覽器打開https://xquartz.macosforge.org/landing 下載并安裝即可重試安裝 Wine
brew install wine
接下來的事就是等待了,我等了一個(gè)上午吧~~ that's a really long time
- 使用命令行打包 Win32 安裝包
electron-packager ./ cyyDemo --platform=win32 --arch=x64 —version=1.3.5 --out=dist/ --overwrite --ignore=node_modules/electron-* --ignore=node_modules/.bin --ignore=.git --ignore=dist --prune
原創(chuàng)作品,如需轉(zhuǎn)載,請與作者聯(lián)系,否則將追究法律責(zé)任。