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

時間 2019-11-19

原文原文鏈接

前言

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

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

緣由：package.json中的window字段，只在main字段爲*.html或是外部網址時有效，當爲 *.js時是無效的。html

{
  "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-formatnode

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

nw默認不包含打包成.exe文件的形式，遂nw-builder項目爲自動將nw應用打包壓縮成可執行文件的程序。
詳見：https://www.npmjs.com/package/nw-buildergit

假設nw-builder的配置文件以下：github

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

配置字段files指定了app文件夾下的全部文件，但app文件夾下存在兩個項目：nw-demo和zfile-explorer
web

對於這種狀況nw-builder只會打包出按文件名排序的第一個文件夾項目：nw-demo
npm

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

前提：須要在nw項目中的package.json中的main字段指定爲*.js文件。或是指定本地的.html文件後再載入js文件json

package.json文件

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

在mian字段指定的js文件中，再使用nw.Window.open來載入指定本地頁面或是外部網址，如：gulp

main.js文件：

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

在這個js文件中可使用4種方法植入全局變量或全局方法：
一、將全局變量使用var方式聲明賦值
二、將全局變量直接賦值，無定義
三、將全局變量掛載到window上
四、將全局變量掛載到global上segmentfault

測試代碼：

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%20Format/#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": "xxcanghai@gmail.com",
  "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文件便可。這樣即便報錯了也會顯示出空窗口，同時也能夠經過開發者工具欄查看問題緣由，用戶也能夠關閉應用，不至於沒法結束進程。