天天看點

使用JS開發桌面端應用程式NW.js-2-開發問題小記

前言

本文為開發nw中遇到的各種問題,僅以記錄供備忘以及遇到相同問題的人的一點點解決思路。

1. package.json中的window字段無效

原因:

package.json

中的

window

字段,隻在

main

字段為

*.html

或是外部網址時有效,當為

*.js

時是無效的。

{
  "name": "blog",
  "main": "http://xxcanghai.cnblogs.com/",//main為網址,下方的window設定有效
  //"main": "index.html",//main為 *.html,下方的window設定有效
  //"main": "index.js",//main為 *.js,下方的window設定無效!!
  
  "version": "0.0.1",
  "window": {
    "title": "Nw.js Demo",//如果 index.html沒有title,則會顯示這裡的值
    "icon": "assest/img/logo.png",//标題欄圖示
    "position": "center",//預設顯示位置
    "width": 1280,
    "height": 680,
    "frame": true,//是否顯示最外層的架構,設為false之後 視窗的最小化、最大化、關閉 就沒有了
    "resizable": true,
    "min_width": 1028
  },
}
           

關于其他package.json中的可使用的配置見官網:

https://github.com/nwjs/nw.js/wiki/manifest-format

2. nw-builder一次隻能打包一個項目

nw預設不包含打包成.exe檔案的形式,遂

nw-builder

項目為自動将nw應用打包壓縮成可執行檔案的程式。

詳見:https://www.npmjs.com/package/nw-builder

假設nw-builder的配置檔案如下:

var nw = new NwBuilder({
   version: '0.14.7', 
   files: './app/**',//nw應用項目目錄
   platforms: ['win32'], 
});
           

配置字段files指定了app檔案夾下的所有檔案,但app檔案夾下存在兩個項目:nw-demo和zfile-explorer

使用JS開發桌面端應用程式NW.js-2-開發問題小記

對于這種情況nw-builder隻會打包出按檔案名排序的第一個檔案夾項目:nw-demo

使用JS開發桌面端應用程式NW.js-2-開發問題小記

3. 在nw中植入全局變量的方法

前提:需要在nw項目中的package.json中的main字段指定為*.js檔案。或是指定本地的.html檔案後再載入js檔案

package.json檔案

{
  "name": "nw-demo",
  "version": "1.0.0",
  "description": "",
  "main": "./main.js",
  "scripts": {
    "start":"cd ../../ & gulp nw"
  },
  ...
}
           

在mian字段指定的js檔案中,再使用

nw.Window.open

來載入指定本地頁面或是外部網址,如:

main.js檔案:

nw.Window.open('./view/index.html', {
    height:600,
    width:800
}, function (win) { });
           

在這個js檔案中可以使用4種方法植入全局變量或全局方法:

1、将全局變量使用var方式聲明指派

2、将全局變量直接指派,無定義

3、将全局變量挂載到

window

4、将全局變量挂載到

global

測試代碼:

main.js檔案

//var定義方式
var xxcanghai_1 = 1;

//直接指派方式
xxcanghai_2 = 10;

//挂載到window對象上
window.xxcanghai_3 = 100;

//挂載到global對象上
global.xxcanghai_4 = 1000;
           

在用nw動态載入的頁面中寫入一下代碼測試

./view/index.html檔案

<script>
   console.log(xxcanghai_1);//報錯
   console.log(window.xxcanghai_1);//undefined
   console.log(global.xxcanghai_1);//1

   console.log(xxcanghai_2);//報錯
   console.log(window.xxcanghai_2);//undefined
   console.log(global.xxcanghai_2);//10

   console.log(xxcanghai_3);//報錯
   console.log(window.xxcanghai_3);//undefined
   console.log(global.xxcanghai_3);//100

   console.log(xxcanghai_4);//報錯
   console.log(window.xxcanghai_4);//undefined
   console.log(global.xxcanghai_4);//1000
</script>
           

結論:

在動态加載的頁面中,通路全局變量隻能使用

global.*

的方式。

之是以會這樣是因為nw的運作環境是chromium和Nodejs混合的。是以可以在網頁js中執行Nodejs代碼。

雖然可以但不應該!

從頁面代碼的責任一緻性上不應該在網頁代碼中編寫nodejs代碼,遂應該将global中的對象寫入每個網頁的window對象中。之後頁面代碼再

從window.*

中調用

植入每個頁面window中的方法

可利用nw的對

package.json

擴充字段的

inject_js_start

inject_js_end

來實作。

官方說明:

inject_js_start: The injecting JavaScript code is to be executed after any files from css, but before any other DOM is constructed or any other script is run.

inject_js_end: The injecting JavaScript code is to be executed after the document object is loaded, before onload event is fired. This is mainly to be used as an option of Window.open() to inject JS in a new window.

http://docs.nwjs.io/en/latest/References/Manifest Format/#inject_js_start

inject_js_start

字段指向本地的js檔案,他可以在加載的任何頁面的任何頁面js執行前執行。

package.json檔案:

{
  "name": "blog",
  "version": "1.0.0",
  "main": "./main.html",
  "inject_js_start": "./js/inject_js_start.js",//設定所有頁面前植入的js檔案位址
  "author": "[email protected]",
  "license": "ISC",
}

           

在植入的js檔案中,将global中的變量指派到目前頁面window中

./js/inject_js_start.js檔案:

//将node的global中的變量寫入每個即将打開的頁面的js的window對象中
window["xxcanghai_1"] = global["xxcanghai_1"]
           

之後即可在任何nw打開的頁面中通過

window.xxcanghai_1

來通路全局變量了。

4. nwjs主程序出現異常後不顯示窗體

現象:nwjs主程序出現異常後不顯示窗體,不彈出錯誤提示,也不會自動結束程序

package.json

檔案中的

main

.js

檔案,同時此js檔案出現error時會出現此問題。

解決方案:

package.json

main

字段使用

.html

檔案,然後再載入要執行的nw主程式js檔案即可。這樣即使報錯了也會顯示出空視窗,同時也可以通過開發者工具欄檢視問題原因,使用者也可以關閉應用,不至于無法結束程序。

其他教程文章

使用 NW.js 将 Web 應用打包為桌面應用

https://chensd.com/2016-04/Transfer-web-app-to-desktop-app-with-NW-js.html

NW.js 入坑指南:

https://segmentfault.com/a/1190000003870613

如果您認為本文對得起您所閱讀他所花的時間,歡迎點選右下角↘ 推薦。您的支援是我繼續寫作最大的動力,謝謝

作者:小小滄海

出處:http://www.cnblogs.com/xxcanghai/

本文位址:http://www.cnblogs.com/xxcanghai/

本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。