快速跑通 Electron

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)限。目前常見的有 NWheXElectron,可以打造桌面應(yīng)用。

Electron

一、環(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ā)踩坑記錄

<!-- 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ò)誤,提示我們安裝缺失組件,下一步就是安裝缺失組件了。


提示安裝缺失組件
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é)任。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容