您的位置:首頁>正文

使用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中的可使用的配置見官網:

2. nw-builder一次只能打包一個專案

nw默認不包含打包成.exe檔的形式, 遂nw-builder專案為自動將nw應用打包壓縮成可執行檔的程式。

假設nw-builder的設定檔如下:

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

配置欄位files指定了app資料夾下的所有檔, 但app資料夾下存在兩個專案:nw-demo和zfile-explorer

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

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檔

結論:

在動態載入的頁面中, 訪問全域變數只能使用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檔即可。 這樣即使報錯了也會顯示出空視窗, 同時也可以通過開發者工具列查看問題原因, 用戶也可以關閉應用, 不至於無法結束進程。

同類文章
Next Article
喜欢就按个赞吧!!!
点击关闭提示