JS开发桌面端应用程序教程

133 阅读 0 评论 88 点赞

我是靠谱客的博主含糊早晨，最近开发中收集的这篇文章主要介绍JS开发桌面端应用程序教程，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言

本文为开发nw中遇到的各种问题，仅以记录供备忘以及遇到相同问题的人的一点点解决思路。

1. package.json中的window字段无效

原因：package.json中的window字段，只在main字段为*.html或是外部网址时有效，当为 *.js时是无效的。

{
  "name": "blog",
  "main": "http://uoften.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中的可使用的配置见官网：

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?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.*中调用

植入每个页面window中的方法

可利用nw的对package.json扩展字段的inject_js_start和inject_js_end来实现。

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来访问全局变量了。

4. nwjs主进程出现异常后不显示窗体

现象：nwjs主进程出现异常后不显示窗体，不弹出错误提示，也不会自动结束进程
原因：package.json文件中的main字段为.js文件，同时此js文件出现error时会出现此问题。
解决方案：package.json文件中的main字段使用.html文件，然后再载入要执行的nw主程序js文件即可。这样即使报错了也会显示出空窗口，同时也可以通过开发者工具栏查看问题原因，用户也可以关闭应用，不至于无法结束进程。