成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Electron入門介紹

wing324 / 992人閱讀

摘要：本文主要講解的入門。可以幫助我們管理包的下載依賴部署發(fā)布等。可以認(rèn)為是中的。后續(xù)使用中，全部替換為即可。命令根據(jù)它，自動(dòng)下載所需模塊用于創(chuàng)建窗口和處理系統(tǒng)事件安裝包的位置。

Electron是什么

可以認(rèn)為Electron是一種運(yùn)行環(huán)境庫(kù)，我們可以基于此，用HTML、JS和CSS寫(xiě)桌面應(yīng)用。
PC端的UI交互，主要有web應(yīng)用和桌面應(yīng)用。具體采用哪種方式，主要看系統(tǒng)的應(yīng)用場(chǎng)景，哪個(gè)更合適用哪個(gè)。
對(duì)于Web應(yīng)用：

優(yōu)點(diǎn)：

部署、升級(jí)方便。用戶通過(guò)瀏覽器就可以訪問(wèn)；

HTML/JS/CSS編寫(xiě)，方便且高效；

windows、linux都支持；

缺點(diǎn)：

對(duì)于開(kāi)發(fā)者：瀏覽器適配比較繁瑣；

對(duì)于開(kāi)發(fā)者：有些應(yīng)用，必須指定瀏覽器或版本。比如OCX必須是IE內(nèi)核，H5要求瀏覽器必須是較高版本；

對(duì)于用戶：傳統(tǒng)行業(yè)中，部分用戶對(duì)web應(yīng)用不習(xí)慣，尤其在專業(yè)工具軟件方面，覺(jué)得web應(yīng)用沒(méi)有桌面應(yīng)用用起來(lái)踏實(shí)。

對(duì)于開(kāi)發(fā)者：必須打開(kāi)瀏覽器，輸入一長(zhǎng)串URL地址（雖然可以建立瀏覽器收藏夾或者創(chuàng)建URL的快捷方式到桌面，但大部分用戶不會(huì)這么做）；

因?yàn)橹伴_(kāi)發(fā)的一款應(yīng)用是專業(yè)工具軟件，給科研院所的設(shè)計(jì)人員使用。而且用戶的大部分系統(tǒng)是XP，且不允許安裝非IE瀏覽器。我們發(fā)現(xiàn)，采用web方式，效果很不好。因此決定用桌面應(yīng)用。
考慮到開(kāi)發(fā)效率、人員配備情況以及后續(xù)的升級(jí)，于是調(diào)研了一下nw.js和Electron技術(shù)。本文主要講解Electron的入門。（注：Electron的一個(gè)遺憾，不支持XP系統(tǒng)。nw.js 0.14.7以后版本不支持XP系統(tǒng)。）

Electron網(wǎng)址：

https://electronjs.org/
https://github.com/electron/e...

環(huán)境安裝（Windows） Node.js安裝

Electron中使用了Node.js，因此首先安裝Node.js。安裝十分簡(jiǎn)單，直接從官網(wǎng)下載安裝包，點(diǎn)擊安裝即可。當(dāng)前最新版本8.9.4。
新版本的Node.js中自動(dòng)集成了npm，npm是JS的包管理器?？梢詭椭覀児芾戆南螺d、依賴、部署、發(fā)布等?？梢哉J(rèn)為是js中的maven。

安裝完后，在命令行窗口中分別輸入node -v和npm -v來(lái)查看node和npm的版本。

cnpm安裝（非必須）

考慮到npm下載包時(shí)是從國(guó)外的服務(wù)器上下載，不僅速度慢，而且不穩(wěn)定。因此，建議使用淘寶npm鏡像（官網(wǎng)：https://npm.taobao.org/）。
安裝cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm的使用方法和npm一樣。后續(xù)使用中，npm全部替換為cnpm即可。

例子

從github上下載第一個(gè)示例，運(yùn)行看效果

# 克隆這倉(cāng)庫(kù)
> git clone https://github.com/electron/electron-quick-start
# 進(jìn)入倉(cāng)庫(kù)
> cd electron-quick-start
# 安裝依賴庫(kù)
> cnpm install
# 運(yùn)行應(yīng)用，也可以用： cnpm run start
> cnpm start

注意：需要安裝git，具體安裝步驟這里不描述。另外，注意這里使用的cnpm。
如果沒(méi)有安裝git，直接下載壓縮包也可以。

命令行中執(zhí)行上述操作，最后的效果：

（注：我把命令行窗戶和彈出的Hello World窗口截在一張圖了）

主要文件結(jié)構(gòu)

進(jìn)入到electron-quick-start文件夾，可以看到主要目錄結(jié)構(gòu)

electron-quick-start/
 ├── package.json
 ├── main.js
 ├── index.html
 ├── node_modules/

index.html：窗口中顯示的內(nèi)容，在index.html中
package.json：項(xiàng)目的配置信息和所需的各種模塊，在這里配置。npm install命令根據(jù)它，自動(dòng)下載所需模塊
main.js：用于創(chuàng)建窗口和處理系統(tǒng)事件
node_modules：npm install安裝包的位置。如果是全局安裝，則不在這個(gè)目錄。

可以打開(kāi)各個(gè)文件和目錄，看看具體的內(nèi)容，先大致了解，有個(gè)整體概念。

例子中package.json簡(jiǎn)要解釋 
"name": "electron-quick-start"

通過(guò)name字段，指定窗口標(biāo)題。

"main": "main.js"

通過(guò)main字段，指定應(yīng)用的啟動(dòng)腳本。如果未指定，Electron會(huì)優(yōu)先加載index.js。

"scripts": {    "start": "electron ."  }

配置npm的命令，這里是start命令。npm start命令調(diào)用的就是這里的“electron .”
注意：這里直接使用的是"electron ."，而不是"node_modules.binelectron ."。雖然前面electron模塊是局部安裝，但是運(yùn)行npm命令時(shí)，會(huì)將當(dāng)前目錄的node_modules/.bin子目錄加入PATH變量，執(zhí)行結(jié)束后，再將PATH變量恢復(fù)原樣。因此，即使非全局安裝，electron也可以不帶路徑。這里的electron其實(shí)就是一個(gè)shell腳本。

"devDependencies": {    "electron": "~1.6.2"  }

配置依賴的模塊，這里只有Electron模塊。

自己手動(dòng)編寫(xiě)一個(gè)例子，并運(yùn)行

如果上訴的簡(jiǎn)單例子還不夠直觀，可以自己建立一個(gè)。
》創(chuàng)建一個(gè)文件夾ETest；
》該文件夾下建立三個(gè)文件：index.html, main.js, package.json。文件的內(nèi)容參考上訴例子；
》打開(kāi)命令窗口，cd到ETest目錄下；
》啟動(dòng)程序：e:githubelectron-quick-startnode_modules.binelectron .
》完成。
注意這里直接使用的是上一步electron-quick-start例子中的electron命令。

還有一個(gè)重要例子

github上有一個(gè)electron-api-demos的例子，里面介紹了主要的一些功能及實(shí)現(xiàn)代碼?？梢韵螺d下來(lái)參考：

> git clone https://github.com/electron/electron-api-demos
> cd electron-api-demos
> cnpm install
> cnpm start

結(jié)果界面：

這里例子中，展示了：
》創(chuàng)建新窗口；
》管理窗口狀態(tài)；
》窗口失去焦點(diǎn)和獲取焦點(diǎn)的事件；
》創(chuàng)建無(wú)邊框窗口；
》自定義菜單和右鍵菜單；
》注冊(cè)鍵盤快捷鍵
》打開(kāi)外部鏈接；
》通知消息（帶圖片）；
》使用系統(tǒng)窗口（文件選擇窗口、錯(cuò)誤提示窗口、信息提示窗口、保存窗口）
》添加系統(tǒng)狀態(tài)欄圖標(biāo)；
》多進(jìn)程間通信；
》獲取系統(tǒng)信息；
》拷貝和粘貼；
》打印PDF；
》截圖。

要更深入的了解，可以參網(wǎng)上相應(yīng)的文檔。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90713.html

相關(guān)文章

  • Electron入門介紹

    摘要：進(jìn)程主進(jìn)程在里，運(yùn)行里腳本的進(jìn)程被稱為主進(jìn)程。渲染進(jìn)程由于使用來(lái)展示頁(yè)面，所以的多進(jìn)程結(jié)構(gòu)也被充分利用。當(dāng)一個(gè)實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會(huì)被終止。在，我們提供用于在主進(jìn)程與渲染進(jìn)程之間通訊的模塊。 Github 系列文章地址筆者前兩天心血來(lái)潮做了個(gè)MACOS下可以進(jìn)行OCR圖文識(shí)別的小工具，發(fā)現(xiàn)Electron 在1.x之后API發(fā)生了挺大的變化，估計(jì)也是我好久沒(méi)碰了，所以打算把這...

    yunhao 評(píng)論0 收藏0

  • 一口氣完成electron的入門學(xué)習(xí)

    摘要：目前類似的工具有，等。在渲染進(jìn)程中，直接調(diào)用原生的接口是十分危險(xiǎn)的。這里介紹一種，通過(guò)和對(duì)象，以消息的方式進(jìn)行通信。主進(jìn)程獲得消息后，通過(guò)返回信息。另外，還提供了一種同步的消息傳遞方式。打包完成功能代碼后，我們需要將代碼打成可運(yùn)行的包。 介紹 目前，使用前端技術(shù)開(kāi)發(fā)桌面應(yīng)用已經(jīng)越來(lái)越成熟，這使得前端同學(xué)也可以參與桌面應(yīng)用的開(kāi)發(fā)。目前類似的工具有electron，NW.js等。這里我們著...

    Ethan815 評(píng)論0 收藏0

  • Electron 快速入門

    摘要：當(dāng)一個(gè)實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會(huì)被終止。之所以命名為，主要是為了與主進(jìn)程這個(gè)概念對(duì)應(yīng)。部分在事件觸發(fā)后才能使用。當(dāng)全部窗口關(guān)閉時(shí)退出。主進(jìn)程接收到消息并處理之后，會(huì)返回處理結(jié)果。 簡(jiǎn)介 Electron 是一個(gè)可以使用 Web 技術(shù)如 JavaScript、HTML 和 CSS 來(lái)創(chuàng)建跨平臺(tái)原生桌面應(yīng)用的框架。借助 Electron，我們可以使用純 JavaScript 來(lái)調(diào)用豐...

    Drummor 評(píng)論0 收藏0

  • Electron，從玩玩具的心態(tài)開(kāi)始，到打造出一款越來(lái)越優(yōu)秀的桌面客戶端產(chǎn)品

    摘要：首發(fā)于酷家樂(lè)前端博客標(biāo)題是我以第一視角基于開(kāi)發(fā)客戶端產(chǎn)品的體驗(yàn)，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開(kāi)始接觸到去開(kāi)發(fā)客戶端產(chǎn)品，最后隨著業(yè)務(wù)和功能的復(fù)雜度提升再不斷地優(yōu)化客戶端。 首發(fā)于酷家樂(lè)前端博客 標(biāo)題是我以第一視角基于 Electron 開(kāi)發(fā)客戶端產(chǎn)品的體驗(yàn)，我將在之后分一系列文章向有興趣的朋友一步一步介紹我是怎么從玩玩具的心態(tài)開(kāi)始接觸 Ele...

    Markxu 評(píng)論0 收藏0

  • Electron指南 - 快速入門

    摘要：快速入門提供了豐富的本地操作系統(tǒng)的，使你能夠使用純來(lái)創(chuàng)建桌面應(yīng)用程序。這并不意味著是一個(gè)綁定圖形用戶界面的庫(kù)。每個(gè)頁(yè)面在里是運(yùn)行在自己的進(jìn)程里，這些進(jìn)程被稱為渲染進(jìn)程。有些只能在該事件發(fā)生后才能被使用。 快速入門 Electron提供了豐富的本地（操作系統(tǒng)）的API，使你能夠使用純JavaScript來(lái)創(chuàng)建桌面應(yīng)用程序。與其它各種的Node.js運(yùn)行時(shí)不同的是Electron專注于桌面...

    SQC 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<