NW.js+Enigma Virtual Box+node-webkit打包Hybrid桌面應用其實很簡單

WHY

在不少緣由下,咱們爲了迎合客戶或者其餘的緣由,須要在自己代碼或框架不能兼容的瀏覽器下運行項目,怎麼辦呢,咱們將其打包爲桌面應用不失爲一種好idea。nw.js是node-webkit.js的簡稱。至關於一個自定義的webkit內核瀏覽器(chrome)中執行服務端代碼,所以,咱們的項目只須要兼容chrome就ok了。第一次打包的時候,在網上找了好多教程,但是怎麼都打不出來,通過本身的探究後,也但願你們能夠少才點坑吧。html

HOW

首先咱們須要如下幾個軟件,若是沒有,點擊其對應超連接進入下載node

1.nw.js nw.js 也能夠進行npm安裝 '''npm install nw -g'''
2.Enigma Virtual Box Enigma Virtual Boxweb

STEP

1.準備工做

一切需在你的項目打包結束後進行,例子中的項目打包結束後,會在dist文件夾中。按照下面的規則創建文件chrome

nwjs----package.json
     |
      ---src
    |
     ---package.json

本例子的文件夾名爲nwjs,在nwjs下新建src文件與package.json文件,而後,在src文件中新建package.json文件,並將打包好的文件所有copy進src中
外層的package代碼以下npm

{
  "name": "vein_web",
  "version": "1.0.0",  
  "devDependencies":{
    "nw":"^0.18.2",
    "nw-builder":"^3.1.2"
  },
  "scripts":{
    "dev":"nw src/",
    "prod":"nwbuild --platforms win32 --buildDir dist/ src/"  ======根據你的須要,個人例子只輸出win32
  }
}

src中的package.json代碼以下json

{
    "name":"nwjs",
    "version": "1.0.0", 
    "main":"index.html",
    "window":{
        "min_width":400,
        "min_height":400
    }
}

2.安裝並進行生產構建

在根目錄下(個人爲nwjs文件)執行yarn install,而後你就靜靜的wait。瀏覽器

在這裏使用npm與yarn沒有差異,只不過我忽然發現我如今喜歡用yarn並且能稍微快一點點,若是你習慣npm也無妨
接着在根目錄下執行yarn run prod框架

![
642423150595603730.jpg
](http://upload-images.jianshu....ide

這個時候 你的文件夾會發生變化,就像這樣優化

276167968842548539.jpg

按照這個路徑找到你命名的文件(exe結尾),雙擊打卡,若是你的項目啓動了,你就成功一半了,固然,此時,若是你將此文件脫離文件夾是不會運行的,會alert下面的對話框,好,咱們繼續。

![
903444301870506903.jpg
](http://upload-images.jianshu....

##3.打包封裝文件

1.打開軟件後點擊第一個Brower選擇nwjs構建好的exe結尾的文件

172080238665280610.jpg

2.點擊左下角的Add按鈕==》點擊Add Files,選擇除了exe結尾的所有文件

369803570908522448.jpg

3.點擊Add按鈕==》點擊New Folders,新建一個locales文件夾

886535748038699611.jpg

4.右擊新建的licales文件==》Add Files,添加locales中的全部文件
5.點擊Files Option==》Compress Files
6.點擊右下方的Process按鈕,運行完畢後會生產boxed文件

432568624890874696.jpg

831754397727519052.png

4優化

OK,剛纔生產好的boxed文件就是咱們辛苦半天的結晶,你可將他單獨拉出去脫離原文件夾,也是能夠運行的
不過如今咱們的應用是nwjs的圖標,下面 ,咱們去換應用的圖標

531793164524536723.png

下載Resource Hacker後,打開你的boxed應用==》右擊icon group==》而後選擇你準備好的圖標==》save

這裏須要注意的是圖標應爲icon格式,換完以後,你可能會發現圖標沒有變,你不妨試試將你的應用換一個盤存放或者壓縮後發給你的好友,在他的電腦打開看看。若是圖標有變化,大功告成

88837dd56315dd7791241b2fe8b49bd.png

個人沒有換圖標,因此依然是nwjs的圖標
相關文章
相關標籤/搜索