前言
本文为开发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 java script 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 java script code is to be executed after the document object is loaded, before onload event is fired. This i