NW.js入门

NW.js能做什么?

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

下载地址:http://nwjs.io

  下载与本机相对应的版本

例子:

创建文件夹目录 quick-start,并将json文件和html文件都放在文件夹内

步骤一:创建package.json

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

name:指工程名

mian:指加载的网页名

步骤二:创建index.html

<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>NW.js 快速入门</title>
  </head>
  <body>
    <h1>NW.js 快速入门</h1>
    We are using node.js ,Now! <script>document.write(process.version)</script>.
	
  </body>
</html>

步骤三:运行

将quick-start文件夹拖到nw.exe运行。

步骤四:发布

修改package.json内容

{
  "name": "nw-quick-start-window-demo",
  "version": "0.0.1",
  "main": "index.html",
  "window": {
    "title": "nw-quick-start-window-demo",
    "toolbar": false,
    "frame": true,
    "show_in_taskbar":true,
    "width": 800,
    "height": 500,
    "position": "mouse",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  }
}

相关的属性介绍:

  • 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,程序将无边框显示。

将index.html文件和json压缩成quick-start.zip之后,修改压缩包的后缀名quick-start.nw,将它放到下载的nw.js文件夹下面

在打开命令行界面输入下面的命令:copy /b nw.exe+quick-start.nw quick-start.exe

命令执行结束就会生成相应的文件:quick-start.exe文件

生成的exe文件,双击就可以运行。

猜你喜欢

转载自blog.csdn.net/weixin_43081805/article/details/88353023