软件艺术思考者  
混沌,彷徨,立志,蓄势...
公告
日历
<2017年2月>
日一二三四五六
2930311234
567891011
12131415161718
19202122232425
2627281234
567891011

导航

随笔分类(86)

随笔档案(85)

搜索

  •  

最新评论

阅读排行榜

评论排行榜

 
NW.js入门

NW.js能做什么?

NW.js是基于铬和Node.js的。它允许您直接从浏览器调用Node.js代码和模块,并在您的应用程序中使用Web技术。此外,您可以轻松地将Web应用程序打包到本机应用程序。

获取NW.js

您可以从官方网站http://nwjs.io获取最新的二进制文件。或者你也可以建立NW.js按照中的说明二进制文件自行建设NW.js。

提示:

建议您选择SDK构建风格来开发您的应用程序,这使您能够使用DevTools调试您的应用程序。有关构建版本之间的差异,请参阅构建版本。

编写NW.js应用程序


示例1 - Hello World

这个基本示例演示如何编写一个NW.js应用程序。

步骤1.创建package.json:

{    “name” : “helloworld” ,   “main” : “index.html”  } 

package.json是您的应用程序中的清单文件。它是以JSON格式编写的。该main字段显示了"index.html"在本示例中由NW.js打开的第一页(如果引用了HTML文件)。该name字段是在NW.js应用程序中使用的唯一名称。有关详细信息,请参见清单格式。

使用JS文件作为主

你可以把JS文件设置为"main"字段,如"main.js"。然后,JS文件将在开始时加载到后台页面,默认情况下不打开任何窗口。通常你可以做一些初始化,然后手动打开窗口。例如,

// initialize your app  // and ...  nw 。窗口。open ('index.html' , {}, function (win ) {}); 

步骤2.创建index.html:

<!DOCTYPE html>  < html >    < head >      < title > Hello World!</ title >    </ head >    < body >      < h1 > Hello World!</ h1 >    </ body >  </ html > 

这是正常的HTML文件。您可以使用最新浏览器支持的任何Web技术。

步骤3.运行应用程序

cd / path / to / your / app / path / to / nw。 

/path/to/nw是NW.js的二进制文件。在Windows上,它的nw.exe; 在Linux上,它的nw; 在Mac,它的nwjs.app/Contents/MacOS/nwjs。

在Windows上拖放

在Windows上,您可以拖动folder containing package.json到nw.exe以运行应用程序。

示例2 - 使用NW.js API

所有NW.js API都在nw对象中全局加载,可以直接在JavaScript文件中使用。有关支持的API的完整列表,请参阅API参考。

此示例显示如何在NW.js应用程序中创建本机上下文菜单。您可以index.html使用以下内容创建:

<!DOCTYPE html>  < html >  < head >    < title >上下文菜单</ title >  </ head >  < body  style = “width:100%; height:100%>  < p > “右键单击”显示上下文菜单。</ p >  < script >  //创建一个空的上下文菜单 var  menu  =  new  nw 。Menu ();  //添加一些项目与标签 菜单。追加(新 NW 。菜单项({    标签: “项目A” ,   单击: 函数(){      警报('你点击了“项目A” );    }  }));  菜单。追加(新 NW 。菜单项({  标签: '项目B'  }));  菜单。追加(新 NW 。菜单项({  类型: “分隔符”  }));  菜单。追加(新 NW 。菜单项({  标签: '项目C'  }));  // Hooks“contextmenu”事件 文档。身体。的addEventListener ('文本菜单' , 函数(EV ) {    //防止显示默认的上下文菜单   EV 。的preventDefault ();    //弹出的地方,你点击本机上下文菜单中   的菜单。弹出(EV 。点¯x , EV 。ÿ );    return  false ;  }, false );  </ script >    </ body >  </ html > 

...然后运行您的应用程序:

cd / path / to / your / app / path / to / nw。 

require('nw.gui')

require('nw.gui')还支持使用传统的加载NW.js API的方式。它返回相同的nw对象。

例3 - 使用Node.js API

你可以直接从DOM调用node.js和模块。所以它使用nw.js编写应用程序的无限可能。

此示例显示如何使用osNode.js的模块查询操作系统平台。只需创建index.html具有以下内容的文件,并使用NW.js运行它。

<!DOCTYPE HTML>  < HTML >  < 头>    < 标题>我的操作系统平台</ 标题>  </ 头>  < 身体>  < 脚本>  //使用Node.js的获取系统平台的 变种 OS  =  要求(“OS” );  文档。写(“您正在运行的' , 操作系统,平台());  </ script >  </ body >  </ html > 

您还可以使用由npmNW.js.安装的模块。

本地节点模块

在运行时构建的Native Node模块npm install与NW.js ABI不兼容。要使用它们,你必须用源代码重建它nw-gyp。有关详细信息,请参阅使用本机节点模块。

下一步是什么

请参阅使用DevTools调试以调试NW.js应用程序。

请参阅打包和分发,以便在生产中打包和重新分发应用程序。

有关可能遇到的问题,请参阅常见问题解答。

如果您要从NW.js 0.12或旧版本迁移应用程序,请参阅迁移说明。

获得帮助

在NW.js wiki上有很多有用的信息。维基也是对所有人开放的,你鼓励你在wiki上发布你的知识。

您也可以在Google群组的邮件清单或Gitter上的即时通讯中提出问题。

请报告错误或提交要求在GitHub使NW.js更强大。

posted on 2017-02-23 11:26 智者无疆 阅读(234) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航:
 
 
Copyright © 智者无疆 Powered by: 博客园 模板提供:沪江博客


   观音菩萨赞