本文為開發nw中遇到的各種問題,僅以記錄供備忘以及遇到相同問題的人的一點點解決思路。
原因:package.json
中的window
字段,只在main
欄位為*.html
或是外部網址時有效,當為*.js
時是無效的。
{ "name": "blog", "main": "//m.sbmmt.com/",//main为网址,下方的window设定有效 //"main": "index.html",//main为 *.html,下方的window设定有效 //"main": "index.js?1.1.11",//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中的可使用的配置請參閱官網:
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

前提:需要在nw專案中的package.json中的main欄位指定為*.js檔案。或是指定本地的.html檔案後再載入js檔案
package.json文件{ "name": "nw-demo", "version": "1.0.0", "description": "", "main": "./main.js?1.1.11", "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.*
中呼叫
可利用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 script script is runother .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 openas an option of Windasow.option of Windasow. ) 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?1.1.11",//设置所有页面前植入的js文件地址 "author": "php@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
來存取全域變數了。
現象:nwjs主進程出現異常後不顯示窗體,不彈出錯誤提示,也不會自動結束進程
原因:package.json
文件中的main
欄位為.js
文件,同時此js文件出現error時會出現此問題。
解決方案:package.json
文件中的main
欄位使用.html
文件,然後再載入要執行的nw主程式js檔即可。這樣即使報錯了也會顯示出空窗口,同時也可以透過開發者工具列查看問題原因,使用者也可以關閉應用,不至於無法結束進程。
使用 NW.js 將 Web 應用程式打包為桌面應用程式
以上是JS開發桌面端應用程式教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!