Node.js如何實現(xiàn)桌面應用

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

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

首先我們需要創(chuàng)建一個Node.js項目。

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

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

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

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

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

npm  init

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

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

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

為什么需要這個全局變量呢？因為我們需要對桌面窗口對象進行全局引用，否則當該局部變量生命周期結束被當做垃圾回收時，該桌面窗口就會被關閉。

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

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

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

到這里我們最基本的桌面應用搭建完成了，我們可以用electron進行測試，命令為：

electron  .

點擊按鈕會跳出hello world。

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

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

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

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

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

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

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

最后我們來談談，使用Node.js結合electron模式開發(fā)桌面應用有什么優(yōu)缺點呢？我們先來說說它的優(yōu)點吧：

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

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

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

那electron又有什么缺點呢？

    1.啟動慢，因為打包整個瀏覽器內(nèi)核會一起進行打包。

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

    3.打包的文件過大，原因說過了，因為打包會將整個瀏覽器內(nèi)核一起打包。

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

標題名稱：Node.js如何實現(xiàn)桌面應用
當前路徑：http://muchs.cn/article20/gphojo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、搜索引擎優(yōu)化、微信公眾號、企業(yè)建站、網(wǎng)站策劃、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)