nodejs+chromium 創建桌面應用程序


直接用nodejs+javascript+html+css也可以創建桌面應用程序啦,前端開發的同學應該都比較感興趣。

生成的應用程序自帶nodejs環境和chrome瀏覽器環境。

github的atom編輯器就是這么開發的 ,demo:https://atom.io/

目前比較流行的有2個框架:

1. node-webkit 簡稱nw.js;

    https://github.com/nwjs/nw.js

 

2. electron (github開發和維護)

   https://github.com/atom/electron  

簡單介紹下基於這兩個框架怎么開發桌面應用

一: nw.js

   1. 去官網下載nw框架:http://nwjs.io/,  下載完后解壓:

    

雙擊nw.exe直接運行,看到如下界面說明在你的機器上可以運行:

2. 創建hello world 程序

  1) :建一個index.html

 2).創建配置文件 package.json

還有很多其他有用的屬性可以配置,比如指定應用的圖標,顯不顯示瀏覽器的工具欄,指定瀏覽器的初始大小等等。https://github.com/rogerwang/node-webkit/wiki/Manifest-format

3).然后將index.html和package.json這兩個文件壓縮到一個zip壓縮包里,命名為app.zip,擴展名改為nw,變為 app.nw

4). 得到的app.nw這個文件就可以用nw.exe來執行了,直接把app.nw拖到下載的node-webkit解壓縮后的nw.exe上就可以運行了。

5). 把app.nw文件與node-webkit的環境文件打包成一個可執行文件

    a): copy /b nw.exe+app.nw app.exe 得到app.exe
    b): 使用Enigma Virtual Box (下載:http://enigmaprotector.com/en/downloads.html) 合並app.exe 與相關的dll文件

點擊process生成exe應用程序。

 

二: electron

1. 打造第一個 Electron 應用

a. 創建文件:

git clone https://github.com/atom/electron-quick-start
cd electron-quick-start
npm install && npm start

b.打包node+chromium環境和項目代碼

安裝 electron-packager npm install electron-packager -g

electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> --version=<Electron version> [optional flags...]

@platform - String Allowed values: linux, win32, darwin, all
@arch - String Allowed values: ia32, x64, all

c. 生成獨立的二進制文件

安裝 electron-builder

npm install electron-builder -g

electron-builder <sourcedir> --platform=<platform> --config=<configPath> --out=<outputPath>

platform: win,
osx config: path to config
file out: path to output the installer

windows下用electron生成應用程序比較麻煩 ,還需要安裝nullsoft scriptable installer,   可以到linux下生成windows應用程序

 

使用這2個框架的優點:

1. 跨平台

2. 學習成本低

缺點:環境包文件體積大

 

參考文檔:

https://cnodejs.org/topic/53233277bfb7097d7a00059e

http://www.csdn.net/article/2014-01-08/2818066-Node-Webkit

https://github.com/atom/electron

https://github.com/atom/electron/blob/master/docs-translations/zh-CN/tutorial/quick-start.md   //中文入門文檔

https://www.npmjs.com/package/electron-packager

https://www.npmjs.com/package/electron-builder

http://www.liuhaihua.cn/archives/124970.html 等等

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM