449
使用Electron開發基於Node.js的桌麵應用
最近小編在查看分享資料時，發現一個可以開發跨平台桌麵應用的框架——NW.js（原名：node-webkit）。正當小編興致勃勃的研究NW.js的時候，最基礎的安裝環節出了問題。無論用npm還是cnpm都無法完整下載所依賴的包（具體原因待考察）。鑒於此，我隻能轉向研究另一個同類型的框架——Electron（原名：Atom Shell）。
首先，進入Electron的github官網，上邊有詳細的文檔說明。為了快速搭建應用框架，我們可以選擇Electron的electron-quick-start項目。以下相關操作都在win7的64位操作係統中進行。
打開E盤，新建目錄desktop-app-demo，打開gitbash，進入此目錄，輸入git命令下載electron-quick-start項目代碼。
進入目錄electron-quick-start，輸入命令npm install，安裝相關依賴包。
輸入命令npm start，運行項目。如果彈出Hello World的窗口，說明項目運行成功。如下圖：
現在，我們要將項目代碼打包成係統安裝軟件。這裏我們采用一種比較簡潔的方式進行打包——使用electron-builder模塊。
輸入命令cnpm install electron-builder -g， 全局安裝electron-builder模塊。安裝完成後，輸入命令build --help，測試是否安裝成功。如下圖：
如果出現幫助信息，即為安裝成功。
需要在項目文件夾下新建資源文件夾（這裏新建名字為res的目錄），將程序發布所用的圖標等資源統一放進資源文件夾進行管理。（打包windows exe需要ico文件像素為256*256）。如下圖：
編輯項目目錄裏的package.json，添加electron-builder編譯所需要的屬性，如下圖：
配置完成後在項目目錄裏執行命令build --win --x64。執行命令後即開始打包，無報錯後即打包成功。如下圖：
打包成功後，會在項目目錄裏自動生成dist目錄，裏邊存有生成的桌麵應用安裝包。如下圖：
這個安裝包可以隨意複製、移動、重命名。我們可以把它複製到E盤下，重名為desktop-demo.exe。雙擊安裝運行，如下圖：
安裝成功後，會自動在桌麵生成一個快捷方式，如下圖：
如果想卸載此應用，可以直接在軟件管理軟件中卸載，如下圖：
這樣，我們通過nodejs製作的基於windows桌麵應用demo就完成了。如果想生成其他係統的安裝包，隻要按照electron-builder的官方文檔說明打包即可。
代碼地址：
歡迎關注個人公眾號，查看更多好文。
最後更新：2017-08-13 22:47:31