设为首页 加入收藏

TOP

使用JS开发桌面端应用程序NW.js-2-开发问题小记(一)
2017-10-11 13:36:51 】 浏览:5913
Tags:使用 开发 桌面 应用程序 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中的可使用的配置见官网:
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的运行环境是chromiumNodejs混合的。所以可以在网页js中执行Nodejs代码。
虽然可以但不应该!
从页面代码的责任一致性上不应该在网页代码中编写nodejs代码,遂应该将global中的对象写入每个网页的window对象中。之后页面代码再从window.*中调用

植入每个页面window中的方法

可利用nw的对package.json扩展字段的inject_js_startinject_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

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇es6的这些知识点你了解多少呢? 下一篇学习js函数--自执行函数

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目