前言
本文為開發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

對于這種情況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檔案
<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/
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段聲明,且在文章頁面明顯位置給出原文連接配接,否則保留追究法律責任的權利。