Electron 是一款可以利用 Web 技術(shù) 開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用的框架，最初是 Github 發(fā)布的 Atom 編輯器衍生出的 Atom Shell，后更名為 Electron 。Electron 提供了一個(gè)能通過(guò) JavaScript 和 HTML 創(chuàng)建桌面應(yīng)用的平臺(tái)，同時(shí)集成 Node 來(lái)授予網(wǎng)頁(yè)訪問(wèn)底層系統(tǒng)的權(quán)限。目前常見(jiàn)的有 NW、heX、Electron，可以打造桌面應(yīng)用。

Electron

一、環(huán)境搭建

它的方式是使用 nodeJs API 調(diào)用系統(tǒng)資源，所以第一步就是安裝 node.js 環(huán)境喲。

1.1、安裝 node.js

如果你的機(jī)器上還沒(méi)有 Node.js? 和 npm ，請(qǐng)安裝它們。

1.2、全局安裝 electron

npm install -g electron-prebuilt

mac 系統(tǒng)需要在管理員權(quán)限下安裝喲，輸好密碼就可以開(kāi)始等他安裝了。

sudo npm install -g electron-prebuilt

全局安裝后就可以在命令行使用 electron 工具
全局安裝之后，就可以通過(guò) electron . 啟動(dòng)應(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)會(huì)在后面講解

二、簡(jiǎn)單開(kāi)發(fā)

那么，我們 Electron 程序到底是怎么跑起來(lái)的呢？先看下一個(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 文件，里面聲明了程序的名稱、簡(jiǎn)介、版本等信息；設(shè)置 Electron 主進(jìn)程運(yùn)行的腳本（main.js），即設(shè)置程序的入口；設(shè)置快捷鍵，在你的 CLI（命令行）中可以用 electron . 方便地啟動(dòng)應(yīng)用?？梢钥聪旅胬樱?/li>

{
    "name": "channel",
    "version": "1.0.0",
    "description": "",
    "main": "main.js",
    "author": "Young",
    "scripts": {
        "start": "electron ."
    }
}

main.js
這個(gè)文件是程序的入口，Electron 的主進(jìn)程將用它來(lái)啟動(dòng)并創(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()//開(kāi)啟調(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 模塊：會(huì)控制應(yīng)用的生命周期（例如，對(duì)應(yīng)用的 ready 狀態(tài)做出反應(yīng)），有點(diǎn)像 Application ，對(duì)應(yīng)有各個(gè)生命周期會(huì)有不同的狀態(tài)。

BrowserWindow 模塊：為你創(chuàng)建窗口。

win 對(duì)象：是你應(yīng)用的主窗口，被聲明成 null ，否則當(dāng) JavaScript 垃圾回收掉這個(gè)對(duì)象時(shí)，窗口會(huì)被關(guān)閉。

當(dāng) app 捕獲 ready 事件，BrowserWindow 創(chuàng)建一個(gè)800*600大小的窗口。瀏覽器窗口的渲染進(jìn)程會(huì)渲染 index.html 文件。

當(dāng) app 捕獲 resize 事件，BrowserWindow 會(huì)重新加載，以此類推。

index.html
這個(gè)文件就是我們要呈現(xiàn)出來(lái)的網(wǎng)頁(yè)了。這就需要你自己發(fā)揮想象寫(xiě)咯~

2.2、初次開(kāi)發(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ò)請(qǐng)求
solution：原來(lái)也有很多庫(kù)提供給我們使用的，使用方式方法也很簡(jiǎn)單。
superagent
superagent 是一個(gè)極其簡(jiǎn)單的 AJAX 庫(kù)。看過(guò)下面例子，相信機(jī)智的你已經(jīng)知道怎么使用了吧。

var request = require( 'superagent' );
request 
.get( 'http://xxx.com' ) 
.end( function ( err, res ) { 
// Do something
});

bluebird
bluebird 是一個(gè) Promise 庫(kù)。

凡是類似 IO 的操作，必定需要異步。經(jīng)典的解決方法是回調(diào)，然而是時(shí)候用 Promise 了！
bluebird 聲稱擁有無(wú)與倫比的速度。其實(shí)更實(shí)用的功能是它支持能夠?qū)⒁恍┍旧硎遣恢С?Promise 的庫(kù)轉(zhuǎn)化為支持 Promise 的庫(kù)。
然而，要配合之前的 superagent，則需要另外一個(gè)庫(kù) superagent-bluebird-promise。superagent 本身不支持 Promise，從上面的代碼來(lái)看就是使用回調(diào)的方法，這個(gè)庫(kù)就是將 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了，方便吧。

三、打包

開(kāi)發(fā)搞定后最后就是打包啦??！這里給大家介紹的是在 mac os 環(huán)境下用 electron-packager 打包的流程（原諒我剛?cè)腴T(mén) electron ，目前也只學(xué)會(huì)了這種方式）。mac 下打包 mas 程序當(dāng)然是可行的，但是打包 win32 的程序的話，就需要花一點(diǎn)時(shí)間配置 Wine 環(huán)境了，后面會(huì)為大家介紹。

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)行打包（為了好說(shuō)明，我把空格換成換行符了）。

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)建的平臺(tái)（包括 Windows，Mac 和 Linux，all 表示所有平臺(tái) ）
architecture 決定構(gòu)建哪個(gè)構(gòu)架下（ x86 或 x64 ，all表示兩者），
electron version 讓你選擇要用的 Electron 版本

命令的選項(xiàng)理解起來(lái)都比較簡(jiǎn)單。為了獲得精美的圖標(biāo)，你首先要找一款可以把 png 文件轉(zhuǎn)換到這些格式的工具，把它轉(zhuǎn)換成 .icns 格式（ Mac 用）或者 .ico 格式（ Window 用）。如果在非 Windows 系統(tǒng)給 Windows 平臺(tái)的應(yīng)用打包，你需要安裝 wine（ Mac 用戶用 homebrew，Linux 用戶用 apt-get ）。另外，第一次打包用時(shí)比較久，因?yàn)橐螺d平臺(tái)的二進(jìn)制文件，隨后的打包將會(huì)快的多。

3.2 mac os 環(huán)境下打包 win32 安裝包

這個(gè)問(wèn)題比較麻煩的要安裝 Wine 環(huán)境。假設(shè)你設(shè)備上擁有 Wine 環(huán)境，打包流程可參考打包 mas 安裝包的流程，下面主要就介紹下 mac 中如何安裝配置 Wine 環(huán)境。

3.2.1 安裝 homebrew

brew 的安裝很簡(jiǎn)單，使用一條 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

打開(kāi)終端，輸入以下命令行：

brew install wine

出現(xiàn)以下錯(cuò)誤，提示我們安裝缺失組件，下一步就是安裝缺失組件了。

提示安裝缺失組件

安裝缺失組件 Xquartz
瀏覽器打開(kāi)https://xquartz.macosforge.org/landing 下載并安裝即可
重試安裝 Wine

brew install wine

接下來(lái)的事就是等待了，我等了一個(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)載，請(qǐng)與作者聯(lián)系，否則將追究法律責(zé)任。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

快速跑通 Electron

快速跑通 Electron

一、環(huán)境搭建

1.1、安裝 node.js

1.2、全局安裝 electron

1.3、安裝打包工具 electron-packager

二、簡(jiǎn)單開(kāi)發(fā)

2.1、項(xiàng)目框架

2.2、初次開(kāi)發(fā)踩坑記錄

三、打包

3.1 mac os 環(huán)境下打包 mas 安裝包

3.1.1 在 package.json 中添加安裝包依賴

3.1.2 命令行打包

3.2 mac os 環(huán)境下打包 win32 安裝包

3.2.1 安裝 homebrew

3.2.1 使用 brew 安裝 Wine

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

快速跑通 Electron

一、環(huán)境搭建

1.1、安裝 node.js

1.2、全局安裝 electron

1.3、安裝打包工具 electron-packager

二、簡(jiǎn)單開(kāi)發(fā)

2.1、項(xiàng)目框架

2.2、初次開(kāi)發(fā)踩坑記錄

三、打包

3.1 mac os 環(huán)境下打包 mas 安裝包

3.1.1 在 package.json 中添加安裝包依賴

3.1.2 命令行打包

3.2 mac os 環(huán)境下打包 win32 安裝包

3.2.1 安裝 homebrew

3.2.1 使用 brew 安裝 Wine

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、環(huán)境搭建

1.1、安裝 node.js

1.2、全局安裝 electron

1.3、安裝打包工具 electron-packager

二、簡(jiǎn)單開(kāi)發(fā)

2.1、項(xiàng)目框架

2.2、初次開(kāi)發(fā)踩坑記錄