這篇文章主要為大家展示了“Node.js如何實(shí)現(xiàn)桌面應(yīng)用”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Node.js如何實(shí)現(xiàn)桌面應(yīng)用”這篇文章吧。

成都創(chuàng)新互聯(lián)公司長期為近千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為鞏留企業(yè)提供專業(yè)的網(wǎng)站設(shè)計(jì)制作、成都網(wǎng)站制作，鞏留網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

首先我們需要?jiǎng)?chuàng)建一個(gè)Node.js項(xiàng)目。

我們需要先裝下electron依賴。對(duì)于electron官方文檔是這么解釋的：

        其實(shí)在我理解看來electron的角色有點(diǎn)類似于打包工具，我們可以使用H5開發(fā)一個(gè)網(wǎng)站，然后直接使用打包工具打包成一個(gè)app。而electron其實(shí)也是一個(gè)這樣的角色，它可以將我們使用HTML, JavaScript, css開發(fā)的項(xiàng)目打包成一個(gè)桌面應(yīng)用，而且可以同時(shí)打包成不同操作系統(tǒng)下的桌面可執(zhí)行程序。

        npm國內(nèi)訪問比較慢，可能會(huì)導(dǎo)致安裝依賴失敗的問題。所以我們可以使用淘寶鏡像進(jìn)行下載，使用命令：

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

使用cnpm全局安裝electron、electron-prebuilt、electron-packager、electron-builder，使用命令：

cnpm install -g electron electron-prebuilt electron-packager electron-builder

使用cnpm安裝aser打包工具：

cnpm install -g asar

到這里本篇文章需要的依賴全部安裝成功，下一步初始化項(xiàng)目，使用命令：

npm  init

到這里我們前期項(xiàng)目配置全部完成，下一步我們先創(chuàng)建一個(gè)index.html，功能很簡單，就一個(gè)按鈕，點(diǎn)擊則彈出hello world。

接下來建立一個(gè)index.js，在這個(gè)文件里面創(chuàng)建桌面窗口以及頁面渲染。

首先在文件頂部引入所需的包以及定義一個(gè)全局變量win

為什么需要這個(gè)全局變量呢？因?yàn)槲覀冃枰獙?duì)桌面窗口對(duì)象進(jìn)行全局引用，否則當(dāng)該局部變量生命周期結(jié)束被當(dāng)做垃圾回收時(shí)，該桌面窗口就會(huì)被關(guān)閉。

我們需要監(jiān)聽ready方法，該方法將會(huì)在Electron完成初始化并準(zhǔn)備創(chuàng)建桌面窗口時(shí)調(diào)用。在ready方法中調(diào)用創(chuàng)建桌面窗口的邏輯處理。

監(jiān)聽window-all-closed方法，當(dāng)所有桌面窗口關(guān)閉時(shí)，退出該桌面應(yīng)用

監(jiān)聽activate方法，當(dāng)app激活時(shí)觸發(fā)，一般針對(duì)macOS要需要處理。在macOS中，當(dāng)點(diǎn)擊應(yīng)用圖標(biāo)并且沒有其他窗口打開時(shí)，會(huì)重新創(chuàng)建一個(gè)窗口 ，所以在activate方法中要做判斷，如果窗口對(duì)象win為null，則創(chuàng)建一個(gè)新窗口。否則展示已存在的窗口。

到這里我們最基本的桌面應(yīng)用搭建完成了，我們可以用electron進(jìn)行測試，命令為：

electron  .

點(diǎn)擊按鈕會(huì)跳出hello world。

所以我們可以發(fā)現(xiàn)，我們使用electron進(jìn)行桌面應(yīng)用的開發(fā)我們不需要去了解我寫的html是如何被轉(zhuǎn)化成桌面應(yīng)用執(zhí)行程序的。用官方的解釋來說就是簡單的部分你來做，復(fù)雜的交給我們框架來負(fù)責(zé)實(shí)現(xiàn)。像Atom和vs  code、wordpress其實(shí)就是基于electron去進(jìn)行開發(fā)的，所以說electron的穩(wěn)定性是可以肯定的。

接下來我們需要將我們的應(yīng)用打包生成桌面應(yīng)用啟動(dòng)文件，打包就需要使用我們剛才一開始安裝的依賴：electron-packager。打包命令為：

electron-packager . niyueling --out ../electron-node

這句打包命令的意思就是：使用electron-packager包將當(dāng)前文件目錄下的資源命名成niyueling打包到父級(jí)的electron-node文件夾。打包的時(shí)候會(huì)自動(dòng)判定你當(dāng)前運(yùn)行的操作系統(tǒng)打包生成對(duì)應(yīng)系統(tǒng)下的可執(zhí)行文件。如果想一次性打包所有操作系統(tǒng)的可執(zhí)行文件，可以使用命令：

electron-packager . niyueling --out ../electron-node -all

注意：由于打包的時(shí)候會(huì)將瀏覽器內(nèi)核完整打包進(jìn)去，所以就算你的項(xiàng)目只有1M以內(nèi)，打包生成的可執(zhí)行文件最終也會(huì)有幾十M的大小。

我們可以看到生成了一個(gè)niyueling.exe執(zhí)行文件。我們執(zhí)行這個(gè)文件就可以運(yùn)行我們的桌面應(yīng)用了。

最后我們來談?wù)?，使?strong>Node.js結(jié)合electron模式開發(fā)桌面應(yīng)用有什么優(yōu)缺點(diǎn)呢？我們先來說說它的優(yōu)點(diǎn)吧：

    1.如果我們平常的桌面軟件需要升級(jí)，一般需要下載最新的安裝包，但是electron-packager打包實(shí)際上實(shí)際上是瀏覽器內(nèi)核和主線程控制腳本,具體的業(yè)務(wù)邏輯都是獨(dú)立在某個(gè)文件夾下的，如router文件夾。只要我們桌面應(yīng)用主線程邏輯不變，不管是UI做了調(diào)整還是交互效果做了修整，我們則只需要更新router文件夾下的資源，而無需重新發(fā)布新安裝包。

    2.界面定制操作方便，原則上web應(yīng)用能做的它都可以實(shí)現(xiàn)。

    3.相比其他跨平臺(tái)方案，更加穩(wěn)定，bug少。

那electron又有什么缺點(diǎn)呢？

    1.啟動(dòng)慢，因?yàn)榇虬麄€(gè)瀏覽器內(nèi)核會(huì)一起進(jìn)行打包。

    2.除了主進(jìn)程，你可能還需要一些進(jìn)程來輔助工作。每新開一個(gè)進(jìn)程，就會(huì)產(chǎn)生額外的內(nèi)存開銷，太過于依賴cpu。

    3.打包的文件過大，原因說過了，因?yàn)榇虬鼤?huì)將整個(gè)瀏覽器內(nèi)核一起打包。

以上是“Node.js如何實(shí)現(xiàn)桌面應(yīng)用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！