首页 / JAVASCRIPT / NW.js 简介与使用方法

NW.js 简介与使用方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了NW.js 简介与使用方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6656字，纯文字阅读大概需要10分钟。

内容图文

简介

NW.js （原名 node-webkit）是一个基于 Chromium 和 node.js 的应用运行时，通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许您从 DOM 调用 Node.js 的模块，实现了一个用所有 Web 技术来写原生应用程序的新的开发模式。

（1）以网络最流行的技术编写原生应用程序的新方法

（2）基于HTML5, CSS3, JS and WebGL而编写

（3）完全支持nodejs所有api及第三方模块

（4）可以使用DOM直接调用nodejs模块

（5）容易打包和分发

（6）支持运行环境包括32位和64位的Window、Linux和Mac OS

使用方法如下：

一、下载nw

1.下载 NW.js（官网：http://nwjs.io/）

这里面normal这个算是运行时吧，sdk那个是一些工具箱，建议都下下来~

https://nwjs.io/downloads/

2.下载 Enigma Virtual Box（官网：http://enigmaprotector.com/）

二、配置 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" 相当于给谷歌浏览器添加启动参数一样，这行代码允许angularjs直接访问本地json文件。

三、生成exe

项目目录如下：

NW.js 简介与使用方法 - 文章图片

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

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

四、打发包发布

打开 Enigma Virtual Box 程序（enigmavb.exe），界面应该是这样的：

NW.js 简介与使用方法 - 文章图片

然后在 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使用过程中的一些坑

1.如果只希望当前应用获取焦点才执行快捷键，看看这个库用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);

2.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>

3.使用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' });
 }
});

用html2canvas把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;
  }
 }

5.引用第三方模块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();//需要手动刷新
  }
  });
 };

更多详细的可以参考 http://liuxp.me/nwjs/References/Window/ 中文文档

总结

以上所述是小编给大家介绍的NW.js 简介与使用方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

内容总结

以上是互联网集市为您收集整理的NW.js 简介与使用方法全部内容，希望文章能够帮你解决NW.js 简介与使用方法所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/338564.html

来源：【匿名】

【上一篇】微信小程序日期时间选择器使用方法【下一篇】javascript 怎么调用php方法

更多 ►

【NW.js 简介与使用方法】教程文章相关的互联网学习教程文章

两种动态加载JavaScript文件的方法【代码】【图】

两种动态加载JavaScript文件的方法第一种便是利用ajax方式，第二种是，动静创建一个script标签，配置其src属性，经过把script标签拔出到页面head来加载js，感乐趣的网友可以看下动态加载script到页面大约有俩方法第一种便是利用ajax方式，把script文件代码从背景加载到前台，而后对加载到的内容经过eval()实施代码。第二种是，动静创建一个script标签，配置其src属性，经过把script标签插入到页面head来加载js，相当于正在head中写...

JavaScript之基础-10 JavaScript 正则表达式(概述、定义正则、RegExp对象、用于模式匹配的String方法)【图】

一、JavaScript 正则表达式概述正则表达式概述 - 正则表达式(Regular Expression): 由一些普通字符和特殊字符组成的，用以描述一种特定的字符规则的表达式 - 正则表达式常用于在一段文本中搜索、匹配或替换特定形式的文本。如:词语出现频率统计、验证字符串是否符合邮件格式、屏蔽一篇帖子中的限制性词语等650) this.width=650;" src="/upload/getfiles/default/2022/11/11/20221111052258654.jpg" title="web.png" />正则表达式...

JavaScript addEventListener()事件监听方法【代码】

文章链接：https://www.cnblogs.com/jc2182/p/11307165.htmladdEventListener()方法将事件处理程序附加到指定的元素。addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。addEventListener()方法可以更容易地控制...

JavaScript辅助方法系列：（1）用正则表达式判断手机号和邮箱【代码】

判断是否为邮箱//jquery验证邮箱 function checkSubmitEmail() {if ($("#email").val() == "") {// $("#confirmMsg").html("<font color=‘red‘>邮箱地址不能为空！</font>");alert("邮箱不能为空!")$("#email").focus();return false;}if (!$("#email").val().match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {alert("邮箱格式不正确");// $("#confirmMsg").html("<font color=‘red‘>邮箱...

JavaScript常用方法函数收集【代码】

本文中，收集了一些比较常用的Javascript函数，希望对学习JS的朋友们有所帮助。1. 字符串长度截取function cutstr(str, len) {var temp,icount = 0,patrn = /[^\x00-\xff]/，strre = "";for (var i = 0; i < str.length; i++) {if (icount < len - 1) {temp = str.substr(i, 1);if (patrn.exec(temp) == null) {icount = icount + 1} else {icount = icount + 2}strre += temp} else {break;}}return strre + "..." } 2. 替换全部S...

JavaScript常用方法【代码】

判断运行客户端 function isPhone() {var flag = false;var userAgentInfo = navigator.userAgent;var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];for (var i = 0; i < Agents.length; i++) {if (userAgentInfo.indexOf(Agents[i]) > 0) {flag = true;break;}}return flag;}计算带中文的字符串长度（中文2字符） function getRealLength(str) {str = String(str);var len = str.match(/...

JavaScript------生成Guid方法【代码】

转载：http://blog.csdn.net/limm33/article/details/51536529代码：function newGuid() {var guid = "";for (var i = 1; i <= 32; i++){var n = Math.floor(Math.random()*16.0).toString(16);guid += n;if((i==8)||(i==12)||(i==16)||(i==20))guid += "-";}return guid; } 原文：http://www.cnblogs.com/tianhengblogs/p/7075439.html

javascript调用的一些常用方法

getElementsByName()方法实列:<bordy><from method="post" action="test"><fieldset>　　<legend>颜色</legend>　　<input type="radio" name="radColor" value="red"/>红<br/><fieldset></from><script>var i = document.getElementByName("radColor");</script></body>getElementById()方法这个是DOM定义的第二种方法，它将返回ID特性等于指定元素。列:<div id="div1">你好</div>调用var div = document.getElementByid("div1");...

javascript 行间样式与非行间样式获取方法【代码】

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.style001 {width: 300px;height: 300px;margin: 20px;padding: 30px;border: 20px grey solid;background-color: lightgray;display: inline-block;}</style><script type="text/javascript">window.onload =function(){var oDiv1 = document.getElementsByClassName(‘style001‘)[0];var oDiv2 = document.getElementsByCla...

Javascript 方法大全

原文:Javascript 方法大全一、基础知识 1 创建脚本块 1: <script language=”JavaScript”> 2: JavaScript code goes here 3: </script> 2 隐藏脚本代码 1: <script language=”JavaScript”> 2:  5: </script> 在不支持JavaScript的浏览器中将不执行相关代码 3 浏览器不支持的时候显示 1: <noscript> 2: Hello to the non-JavaScript browser. 3: </noscript> 4 链接外部脚本...

javascript实现保留两位小数的多种方法

这篇文章主要介绍了javascript实现保留两位小数的多种方法，如果数字的原本小数位数不到两位，那么缺少的就自动补零，感兴趣的小伙伴们可以参考一下第一种方法：javascript实现保留两位小数一位自动补零代码实例:第一种方法介绍一下如何实现对数字保留两位小数效果，如果数字的原本小数位数不到两位，那么缺少的就自动补零，这个也是为了统一的效果，先看代码实例:?12345678910111213141516functionreturnFloat(value){ varvalue=M...

Jquery第四课 Javascript中this的使用方法【代码】

thiskeyword的使用在JavaScript中使用thiskeyword表示调用方法的对象，这与大部分面向对象语言是一样的。可是因为call、apply、bind等函数的影响。我们能够改变this所代指的对象。使用call或者apply调用的函数中，this代指传入的第一个參数对象，假设传入null或者undefined。则表示全局对象(window)。通过对象调用函数（方法），函数中的this表示调用该函数的对象。单独调用的函数中this表示全局对象。varmyObject={sayHello:func...

javascript 常用方法1

js 常用方法(1)startWithvar startsWith = function (str, regex) {if (regex == undefined || str == undefined || (!str) || (!regex)) {return false;}return str.indexOf(regex) == 0; };测试:console.log(startsWith(‘123abc‘,‘‘));??(2)trimvar trim = function (str) { //if (typeof str === "object") {return str;}if (str == null || str == "" || str == undefined) {return str;}if (typeof str === "number") {re...

JavaScript数组的方法

push() :删除数组的第一个元素,返回删除的值。这里是0 pop() 　:删除数组的最后一个元素，返回删除的值shift() :删除数组的第一个元素,返回删除的值unshift() :把参数加载数组的前面，返回数组的长度splice() :插入/删除或替换数组元素sort() :对数组的元素进行排序reverse() :方法用于颠倒数组中元素的顺序(反序)原文：http://www.cnblogs.com/jyichen/p/5387406.html

javascript 寻找错误方法

这篇博客必须写了，它浪费我了一个上午的时间。为了以后能快速寻找到这方面的错误，节约更多的时间。情况是这样的：我写了一个后台管理系统是引用Marix Admin的，因为这个系统包含了很多很多框架，如jquery，bootstrap，还有它自身的框架系统marix，一大堆的js和css文件。你想引入外面的框架时，就会和原来的库文件产生冲突，还有就是书写的格式问题。针对上面两大问题，解决方案如下：首先查看网站效果，如果html没有显示出来，可...

首页 / JAVASCRIPT / NW.js 简介与使用方法

NW.js 简介与使用方法

内容导读

内容图文

内容总结

内容备注

内容手机端

【NW.js 简介与使用方法】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程