NW.js的介绍与使用

简介

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

(1)使用互联网上最流行的技术编写本机应用程序的新方法

(2)基于HTML5、CSS3、JS和WebGL

(3)全面支持nodejs的所有API和第三方模块

(DOM可以直接调用nodejs模块

(5)易于包装和分发

(6)支持的操作环境包括32位和64位Window、Linux和Mac OS

使用方法如下：

首先，下载nw

1.下载NW.js(官方网站：http://nwjs.io/)

这里，normal是一个运行时，sdk是一些工具箱，建议全部下载~

https://nwjs.io/downloads/

2.下载英格玛虚拟盒子(官网：http://enigmaprotector.com/)

其次，配置package.json文件

{'name' :' NW-demo '，' version' :' 0.0.1 '，' main' :' index.html'}更可用如下：

{'main' :' app/index.html '，' name' :' weixin菜单编辑器'，' description' : '一款微信微信官方账号菜单编辑器app封装由nw.js '，app '，' version': '0.0.1 '，关键字' : ['微信'，'菜单编辑器']，' window': {'title': '微信菜单编辑器'，' icon ' : ' App/static/imi工具栏：布尔值。是否显示导航栏。图标：窗口图标。位置：字符串。窗口打开的位置可以设置为“空”、“居中”或“鼠标”。最小宽度/最小高度：窗口最小值。Max_width/max_height :窗口中显示的最大值。可调整大小的：布尔值。是否允许调整窗口大小。始终最高的：布尔值。窗口顶部。全屏：布尔值。是否全屏显示。Show _ in _任务栏：在任务栏上显示图标。帧：布尔值。如果设置为false，程序将无边框显示。chromium-args ' : '-允许从文件访问文件'相当于给谷歌浏览器添加启动参数。这一行代码允许angularjs直接访问本地json文件。第三，生成exe

项目目录如下：

将html项目压缩成zip文件，然后重命名为nw。输入以下命令

复制/b nw.exe应用程序。西北firstApp.exe四世。发送要发布的包

打开恩尼格玛虚拟盒子程序(恩尼格玛vb.exe)，界面应该是这样的：

然后在输入输入文件名处选择上一步生成的test.exe文件，可以默认输入输出名称；

然后点击下面的添加按钮，在nwjs文件夹下加载除NW.js、test.nw、test.nw以外的所有文件(名称不一定是nwjs，是第一步NW.js环境中的文件夹)，然后点击Process，等待执行成功。这时，一个新的。exe文件(我们暂时称之为newtest.exe)将在相应的路径下生成。此时，newtest.exe文件可以在任何Windows环境下运行，您可以将其复制到您的朋友那里以显示它。

以下是西北使用时的一些坑

1.如果您只想让当前的应用程序在执行快捷键之前获得焦点，请查看这个库，并用js设置快捷键

//加载本地用户界面库var GUI=必需(' NW。GUI’)；定义变量选项={ key: 'Ctrl R '，active: function () { alert('全局快捷键"这把钥匙"按下');}，失败：函数(消息){ //创建快捷键失败警报(味精)；} };//创建快捷键定义变量快捷键=新gui .快捷方式（选项);//注册全局快捷键gui .App.registerGlobalHotKey(快捷方式);//解除注册，在应用结束的时候执行gui .App.unregisterGlobalHotKey(快捷方式);2.nw.js不能对页面多次刷新，各种不正常，这是由于刷新页面后重新加载射流研究…文件对变量重新赋值引起的臭虫。解决方案

nw.js读取和保存文件

html head meta charset=' utf-8 '/title NW。射流研究…实现文件读写/标题/床头柜输入id='readFile '类型=“文件”读取文件/input！-默认文件名为filename.html输入id=' WriteFile ' nwsaveas=' filename。' html '类型=“文件”保存文件/input p/p script //nw.js提供的读写文件模块var fs=require(' fs ')；//读文件var chooser=文档。query selector(' # readFile ')；选择器。addeventlistener(' change '，function (evt) { //用户选择的文件var文件路径=这个。价值。ToString()；document.querySelector('p ').innerHTML='读取文件从文件路径；fs.readFile(文件路径)，函数(err，data) { if (err) { layer.msg('读取文件失败！ '错误。消息)；返回；} else { console.log(数据);警报（数据);} }) });//写文件选择器=文档。query selector(' # write file ')；选择器。addeventlistener(' change '，function (evt) { //用户选择的文件var文件路径=这个。价值。ToString()；document.querySelector('p ').innerHTML='写入文件到":"文件路径；//把你好写入文件文件路径，'你好！\n '，函数(err) { if (err) { alert('保存失败!');} });});/脚本/正文/html3 .使用nwjs的fs '直接保存cancas为本地图片，在网上找到的方法都是弹出选择框保存，但我需要直接保存图片到指定路径，不能弹出对话框让用户选择凯里尼斯给了一个解决方案，可行，代码如下：

var fs=require(' fs ')；var c=文档。getelementbyid('我的画布')；var CTX=c . GetContext(' 2d ')；ctx.moveTo(0，0)；ctx.lineTo(200，100)；CTX。笔画()；canvas id=' my canvas ' width=' 200 ' height=' 100 ' style='边框：1 px solid # 000000'/canvasbase64 DATa=c . todaytaul(' image/png ').replace(/^data:image\/png；base64，/，' ')fs。写入文件(' c :/Dev/test。png '，base64Data，' base64 '，函数(err){ if(err){ console。日志(' err '，err)；} else { return RES . JSON({ ' status ' : ' success ' })；}});用html2canvas把超文本标记语言页面转换为图片，再把图片保存到本地。贴一下代码（需要导入html2canvas.js和jquery):

//要保存图片的文件路径var文件路径=TemplateDir文件名' .html '；//要保存的超文本标记语言页面var editerDocument=window。编辑。编辑。iframe。get().html 2画布(editerdocument。body，{ onrendered :函数(canvas){ var base 64 data=canvas。todaytaul(' image/png ').replace(/^data:image\/png；base64，/，' ')var fs=require(' fs ')；fs.writeFile(templateDir文件名)。png '，base64Data，' base64 '，函数(err) { if (err) { alert('保存模板失败!');} $('#model_template_name ').情态(“隐藏”)；layer.msg('模板已保存为文件名);});} });4.在app.js里引用结节内置模块

//调用开发内置模块$ scope。fs=require(' fs ')；//读取配置文件$ scope。read config=function(){ try { var config str=$ scope。fs。readfilesync(配置。微信。路径，‘utf8’；控制台。日志(配置字符串)；var obj=eval('(' config str ')')；$ scope。微信。appid=obj。appid$ scope。微信。app secret=obj。app机密；$ scope。微信。二维码URL=obj。二维码网址；} catch(e){ console。日志(e)；警报('读取微信配置文件失败');} } //写入配置文件$ scope。write config=function(){ try { var config str=JSON。stringify($ scope)。微信)；$ scope。fs。writelefilesync(配置。微信。路径，configStr，{编码： ' utf8 ' })；返回真；} catch(e){ console。日志(e)；警报('写入微信配置文件失败');返回false} }5。引用第三方模块微信-api

//调用开发第三方模块$scope。微信tApi=require('微信-API’)；$ scope。query=function(){ var API=new $ scope。微信tApi($scope.weixin.appid，$scope。微信。app机密)；api.getMenu(函数(错误，结果){ if(错误){ console。日志(err)；警报('查询菜单异常');} else { load(结果);$scope .$ apply()；//需要手动刷新} });};更多详细的可以参考http://liuxp.me/nwjs/References/Window/中文文档

总结

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