行使JS开采桌面端应用程序NW,js简要介绍使用办

2019-05-07 11:20 来源:未知

前言

本文为开辟nw中碰到的各个主题材料,仅以记录供备忘以及蒙受同样难题的人的一小点解决思路。

NW.js 简单介绍与应用办法,nw.js简单介绍使用办法

简介

NW.js (原名 node-webkit)是1个基于 Chromium 和 node.js 的施用运转时,通过它能够用 HTML 和 JavaScript 编写原生应用程序。它还同意你从 DOM 调用 Node.js 的模块 ,达成了两个用具备 Web 技能来写原生应用程序的新的开采方式。

(1)以互联网最盛行的技能编写原生应用程序的新措施

(2)基于HTML5, CSS3, JS and WebGL而编写

(3)完全支持nodejs全体api及第贰方模块

(四)能够应用DOM直接调用nodejs模块

(伍)轻易打包和散发

(6)协理运转情状包涵3几人和陆10个人的Window、Linux和Mac OS 

应用方法如下:

一、下载nw

1.下载 NW.js(官网:

那个中normal那几个好不轻松运行时吧,sdk那1个是某个工具箱,提出都下下来~

2.下载 Enigma Virtual Box(官网:

二、配置 package.json 文件

{
 "name": "nw-demo",
 "version": "0.0.1",
 "main": "index.html"
}

愈来愈多的可用如下:

{
 "main": "app/index.html", 
 "name": "WeixinMenuEditor",
 "description": "使用nw.js封装的一个微信公众号菜单编辑器App",
 "version": "0.0.1",
 "keywords": [ "微信", "菜单编辑器" ], 
 "window": {
 "title": "微信菜单编辑器",
 "icon": "app/static/img/weixin_logo.jpg",
 "toolbar": true,
 "frame": true,
 "width": 1008,
 "height": 750,
 "position": "center",
 "min_width": 400,
 "min_height": 200
 },
 "webkit": {
 "plugin": true,
 "java": false,
 "page-cache": false 
 },
 "chromium-args" :"-allow-file-access-from-files"
}
  • title : 字符串,设置默许 title。
  • width/height : 主窗口的高低。
  • toolbar : bool 值。是或不是出示导航栏。
  • icon : 窗口的 icon。
  • position :字符串。窗口张开时的地点,能够安装为“null”、“center”大概“mouse”。
  • min_width/min_height : 窗口的微乎其微值。
  • max_width/max_height : 窗口呈现的最大值。
  • resizable : bool 值。是或不是同意调治窗口大小。
  • always-on-top : bool 值。窗口置顶。
  • fullscreen : bool 值。是不是全屏展现。
  • show_in_taskbar : 是不是在任务栏展现图标。
  • frame : bool 值。即使设置为 false,程序将无边框突显。
  • "chromium-args" :"-allow-file-access-from-files" 也就是给谷歌(Google)浏览器增加运维参数一样,那行代码允许angularjs直接待上访问本地json文件。

三、生成exe

项目目录如下:

图片 1

将html项目压缩成zip,并改名称叫nw,输入以下命令

copy /b nw.exe app.nw firstApp.exe

四、打发包发表

开垦 Enigma Virtual Box 程序(enigmavb.exe),分界面应该是这般的:

图片 2

接下来在 Enter Input File Name 处接纳上一步生成的 test.exe 文件,Enter Output Name 能够默许;

其后再点击下边包车型大巴 Add 按键,将 nwjs 文件夹(名称不必然是 nwjs ,正是最开首首先步 NW.js 意况的尤其文件夹)下除 nw.exe 和 test.nw 以及 test.exe 之外的兼具文件加载上,然后点击 Process ,等待实施成功就可以,那时候会在对应的路线下生成一个新的 .exe 文件(我们权且叫做 newtest.exe),此时的 newtest.exe 文件就可以在自由的 Windows 情状下运作了,你能够拷贝给你的后生伴去 Show 一下。

下边是nw使用过程中的一些坑

一.假设只愿意近日利用获取关节才实行火速键,看看这几个库用js设置急速键

// 加载本地ui库
 var gui = require('nw.gui');
 var option = {
 key: "Ctrl R",
 active: function () {
  alert("全局快捷键"   this.key   "按下");
 },
 failed: function (msg) {
  //创建快捷键失败
  alert(msg);
 }
 };
 // 创建快捷键
 var shortcut = new gui.Shortcut(option);
 // 注册全局快捷键
 gui.App.registerGlobalHotKey(shortcut);
 // 解除注册,在应用结束的时候执行
 gui.App.unregisterGlobalHotKey(shortcut);

二.nw.js无法对页面数十次刷新,各个不正规,那是出于刷新页面后再行加载js文件对变量重新赋值引起的bug。 消除方案

nw.js 读取和保存文件

<html>
<head>
 <meta charset="utf-8"/>
 <title>nw.js实现文件读写</title>
</head>
<body>
 <input id="readFile" type="file" >读取文件</input>
 <!-- 默认文件名为filename.html -->
 <input id="writeFile" nwsaveas="filename.html" type="file">保存文件</input>
 <p></p>
 <script>
 //nw.js提供的读写文件模块
 var fs = require("fs");
 //读文件
 var chooser = document.querySelector('#readFile');
 chooser.addEventListener("change", function (evt) {
  //用户选择的文件
  var filePath = this.value.toString();
  document.querySelector("p").innerHTML = "读取文件从"   filePath;
  fs.readFile(filePath, function (err, data) {
   if (err) {
   layer.msg("读取文件失败! :"   err.message);
   return;
   } else {
   console.log(data);
   alert(data);
   }
  })
  });
 //写文件
 chooser = document.querySelector('#writeFile');
 chooser.addEventListener("change", function (evt) {
  //用户选择的文件
  var filePath = this.value.toString();
  document.querySelector("p").innerHTML = "写入文件到:"   filePath;
  //把hello写入文件
  fs.writeFile(filePath, "Hello!n", function (err) {
   if (err) {
   alert("保存失败!");
   }
  }); 
  });
 </script>
</body>
</html>

三.接纳nwjs的'fs'间接保存cancas为本地图片,在网络找到的办法都以弹出选用框保存,但自身要求一贯保存图片到内定路径,不能够弹出对话框让用户选取。kailniris给了四个消除方案,可行,代码如下:

var fs = require('fs');
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
 </canvas>
base64Data = c.toDataURL("image/png").replace(/^data:image/png;base64,/, "")
fs.writeFile("c:/Dev/test.png", base64Data, 'base64', function (err) {
 if (err) {
 console.log("err", err);
 } else {
 return res.json({ 'status': 'success' });
 }
});

用html二canvas把html页面转变为图片,再把图片保存到本地。贴一下代码(必要导入html2canvas.js和jquery):

//要保存图片的文件路径
  var filePath = templateDir   filename   '.html';
  //要保存的html页面
  var editerDocument = window.editor.edit.iframe.get().contentWindow.document;
  html2canvas(editerDocument.body, {
  onrendered: function (canvas) {
   var base64Data = canvas.toDataURL("image/png").replace(/^data:image/png;base64,/, "")
   var fs = require("fs");
   fs.writeFile(templateDir   filename   '.png', base64Data, 'base64', function (err) {
   if (err) {
    alert("保存模板失败!");
   }
   $('#model_template_name').modal("hide");
   layer.msg("模板已保存为"   filename);
   });
  }
  });

4.在app.js里引用Node内置模块

//调用NodeJs内置模块
 $scope.fs = require('fs'); 
     //读取配置文件
 $scope.readConfig = function () {
  try {
  var configStr = $scope.fs.readFileSync(config.weixin.path, 'utf8');
  console.log(configStr);
  var obj = eval('('   configStr   ')');
  $scope.weixin.appid = obj.appid;
  $scope.weixin.appsecret = obj.appsecret;
  $scope.weixin.qrcodeurl = obj.qrcodeurl;
  }
  catch (e) {
  console.log(e);
  alert("读取微信配置文件失败");
  }
 }
 //写入配置文件
 $scope.writeConfig = function () {
  try {
  var configStr = JSON.stringify($scope.weixin);
  $scope.fs.writeFileSync(config.weixin.path, configStr, {encoding: 'utf8'});
  return true;
  }
  catch (e) {
  console.log(e);
  alert("写入微信配置文件失败");
  return false;
  }
 }

五.引用第三方模块wechat-api

//调用NodeJs第三方模块
 $scope.wechatApi = require('wechat-api');
 $scope.query = function () {
  var api = new $scope.wechatApi($scope.weixin.appid, $scope.weixin.appsecret);
  api.getMenu(function (err, result) {
  if (err) {
   console.log(err);
   alert("查询菜单异常");
  } else {
   load(result);
   $scope.$apply();//需要手动刷新
  }
  });
 };

 更加多详细的能够参谋 普通话文书档案

总结

上述所述是小编给咱们介绍的NW.js 简要介绍与行使办法,希望对大家享有扶助,倘使大家有其它疑问请给自家留言,我会及时过来大家的。在此也格外感激大家对帮客之家网址的帮助!

简要介绍与运用办法,nw.js简要介绍使用办法 简介NW.js (原名 node-webkit)是二个基于 Chromium 和 node.js 的施用运营时,通过它能够用 HTML 和 Jav...

一. 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中的可选拔的配备见官方网站:

二. 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
图片 3

对此那种景观nw-builder只会卷入出按文件名排序的率先个文本夹项目:nw-demo
图片 4

叁. 在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文件中可以使用四种办法植入全局变量或全局方法:
一、将全局变量使用var情势申明赋值
2、将全局变量直接赋值,无定义
叁、将全局变量挂载到window
四、将全局变量挂载到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 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.

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": "xxcanghai@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主进度出现至极后不展现窗体

现象:nwjs主进度出现非凡后不彰显窗体,不弹出错误提示,也不会活动终止进程
原因package.json文件中的main字段为.js文件,同时此js文件出现error时会出现此难题。
化解方案package.json文件中的main字段使用.html文件,然后再载入要试行的nw主程序js文件就可以。那样便是报错了也会来得出空窗口,同时也得以由此开采者工具栏查看难点由来,用户也足以关闭应用,不至于无所适从收场进度。

任何课程文章

运用 NW.js 将 Web 应用打包为桌面应用

NW.js 入坑指南:

TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:行使JS开采桌面端应用程序NW,js简要介绍使用办