nw.js打包桌面程序

字號+ 編輯: 国内TP粉 修訂: 种花家 來源: izhongxia 2023-09-07 我要說兩句(0)

nw.js提供了非常便捷的方式,將網站前耑程序結合後耑API打包成桌面版APP。

安裝NW

安裝的方式有兩種

1. 下載安裝包 官網下載 nw.app 的安裝包

把安裝包放到 Application 的文档夾裡面, 可以雙擊 nwjs.app ,打開應用。

設置別名,方便使用。

// 1. 打開設置別名的文档
vim ~/.bash_profile
// 2.在文档裡面添加 上下面這一句
alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"
// 3.使別名生效
source ~/.bash_profile

此時,在命令行輸入 nw , 等同雙擊打開應用

[如果使用了zsh, 可以在 vim ~/.zshrc 裡面添加別名 【本人Mac上,別名需要在這裡設置才起作用】]


如何使用 nw 打開 項目

用nw.app來傳入package.json參數:

nw .    // 當前目錄下的 package.json
nw ./xxx/package.json  // 其他目錄下的package.json

第二種方法是npm方式安裝:

sudo npm install -g nw

由於下載nw,遲遲下載不下來,並且執行 nw 的時候, 一直報錯。 後面採用第一種方式。 理論上來講, npm 上安裝好之後, 輸入 nw 就可以用了。 【具體需要測試下】


打包項目

在Mac 下打包 應用爲一個 demo.app 很簡單。

// 1. 把nwjs.app 複制到你記得住的地方,比如項目的根目錄,或者其他
cp -R /Applications/nwjs.app ./test.app
// 2. 把項目的代碼打包成  一個 nw 文档 【在項目文档夾裡面執行這一句,路徑自己根據情況修改】
zip -r ../test.app/Contents/Resources/app.nw  *

完成, 雙擊 test.app 即可打開程序


package.json配置文档案例和解釋

因爲官方給出的文档沒有聲明具體結構,所以在這裡補充一下。

{
/**指定程序的起始頁面。*/
"main": "index.html",
/**字符串必須是小寫字母或者數字,可以包含.或者_或者-不允許帶空格。name必須全局唯一。*/
"name": "demo",
/**程序描述*/
"description": "demo app of node-webkit",
/**程序版本號*/
"version": "0.1.0",
/**關鍵字*/
"keywords": ["demo","node-webkit"],
/**bool值,如果設置爲false,將禁用webkit的node支持。*/
"nodejs": true,
/**
    * 指定一個node.js文档,當程序啓動時,該文档會被運行,啓動時間要早於node-webkit加載html的時間。
    * 它在node上下文中運行,可以用它來實現類似後台線程的功能。
    * (不需要可注釋不用)
    */
//"node-main": "js/node.js",
/**
    * bool值。默認情況下,如果將node-webkit程序打包發布,那麽只能啓動一個該應用的實例。
    * 如果你希望允許同時啓動多個實例,將該值設置爲false。
    */
"single-instance": true,
/**窗口屬性設置 */
"window": {
/**字符串,設置默認title。*/
"title": "demo",
/**窗口的icon。*/
"icon": "link.png",
/**bool值。是否顯示導航欄。*/
"toolbar": false,
/**bool值。是否允許調整窗口大小。*/
"resizable": true,
/**是否全屏*/
"fullscreen": false,
/**是否在win任務欄顯示圖標*/
"show_in_taskbar": true,
/**bool值。如果設置爲false,程序將無邊框顯示。*/
"frame": true,
/**字符串。窗口打開時的位置,可以設置爲“null”、“center”或者“mouse”。*/
"position": "center",
/**主窗口的的寬度。*/
"width": 800,
/**主窗口的的高度。*/
"height": 670,
/**窗口的最小寬度。*/
"min_width": 400,
/**窗口的最小高度。*/
"min_height": 335,
/**窗口顯示的最大寬度,可不設。*/
"max_width": 800,
/**窗口顯示的最大高度,可不設。*/
"max_height": 670,
/**bool值,如果設置爲false,啓動時窗口不可見。*/
"show": true,
/**是否在任務欄顯示圖標。*/
"show_in_taskbar":true,
/**
         * bool值。是否使用kiosk模式。如果使用kiosk模式,
         * 應用程序將全屏顯示,並且阻止用戶離開應用。
         * */
"kiosk": false
},
/**webkit設置*/
"webkit": {
/**bool值,是否加載插件,如flash,默認值爲false。*/
"plugin": true,
/**bool值,是否加載Java applets,默認爲false。*/
"java": false,
/**bool值,是否啓用頁面緩存,默認爲false。*/
"page-cache": false
}
}


MAC下修改圖標

nw.js的文档雖然語文含含糊糊,但提及了這一塊;其他部落格裡沒有任何相關的描述。所以,在這裡解釋一下:

打包app.nw發現Contents/Resources/nw.icns。這個就是應用圖標。把nw.icns遵循蘋果圖標圖片格式改一下。可以使用APPStore裡的Image2Icon將PNG/JPEG格式轉換爲ICNS格式圖片,覆蓋上去。

Contents/Info.plist含有相關的配置,跟package.json基本沒關係,這是MAC系統獨有的項目配置文档(蘋果粉們開心嗎),辛苦大牛們要在各個部落格裡找一下(官網文档不知道寫的什麽玩意?)


閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • JS如何防止父節點的事件運行

  • nodejs編寫一個簡單的http請求客戶耑代碼demo

  • 說一則爲什麽後耑開發人員不選擇node.js的原因

  • 使用Sublime Text3 開發React-Native的配置

我要說說
網上賓友點評