NW.js搭建本地应用程序介绍

目录

一、前言

二、流程介绍

三、运行程序

---

一、前言

NW.js（node-webkit ）是一个基于 Chromium 和 Node.js 的 Web 运行环境，可让你直接在 DOM 中调用 Node.js 模块，并可使用任何现有的 Web 技术来编写本地应用。

简单的讲，APP = Web + Nodejs + NW.js，界面框架由Web控制，界面交互由Nodejs控制，程序执行由NW.js控制。

 

二、流程介绍

1. NW.js下载链接

https://github.com/nwjs/nw.js

2. 编写Web应用

①新建index.html文件

    
    


    
Hello World!

②新建package.json文件

{
  "name":"Demo",
  "main":"index.html"
}

更多可用的参数如下，可自行添加：

{
  "main": "Demo", 
  "name": "index.html",
  "description": "使用nw.js封装的一个App",
  "version": "0.0.1",
  "keywords": [ "APP", "Demo" ],  
  "window": {
    "title": "一个APP",                        //字符串，设置默认 title
    "icon": "app/static/img/logo.jpg",        // 窗口的 icon
    "toolbar": true,                          //是否显示导航栏
    "frame": true,                            //如果设置为 false，程序将无边框显示
    "width": 1008,
    "height": 750,
    "position": "center",    //窗口打开时的位置，可以设置为“null”、“center”或者“mouse”
    "min_width": 400,
    //resizable : bool 值。是否允许调整窗口大小
    //always-on-top : bool 值。窗口置顶。
    //fullscreen : bool 值。是否全屏显示。
    //show_in_taskbar : 是否在任务栏显示图标。
    "min_height": 200
  },
  "webkit": {
    "plugin": true,
    "java": false,
    "page-cache": false    
  },
  //"chromium-args" :"-allow-file-access-from-files" 相当于给谷歌浏览器添加启动参数一样，这行代码允许angularjs直接访问本地json文件
  "chromium-args" :"-allow-file-access-from-files"
}

③把index.html和package.json放入新建文件夹中，文件夹我这里命名为app

 

三、运行程序

运行方法有很多种，我这里介绍主流的三种，可以挑选合适的：

①cmd命令行运行

cd进入nw.exe的同级目录，输入命令：

nw.exe app

第二个是文件夹的路径，我这里把app文件夹放到了nw.exe同级目录下

 

②脚本运行

脚本运行的实质也是第一种，新建文件app.cmd

nowdit是当前cmd路径，不用更改；NWJSDIR是nw.exe的同级目录；APPDIR是app文件夹的路径；

@echo off
set nowdir=%~dp0
set NWJSDIR=%nowdir%/nwjs
set APPDIR=%nowdir%/nwjs/app

start %NWJSDIR%/nw.exe %APPDIR%

exit

要运行时，直接双击app.cmd脚本即可

 

②生成exe运行

Ⅰ) 将index.html和package.json这两个文件压缩到一个zip压缩包里，命名为app.zip（注意不要加入文件夹，就这两个单独文件压缩）；

Ⅱ) 把app.zip这个文件的扩展名改为nw，变为 app.nw；

Ⅲ) 将app.nw拷贝到NW.js的和nw.exe同级目录，进入windows cmd后运行这个命令

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

Ⅳ) 在nw.exe同级目录，就生成了app.exe执行程序，可双击运行。

Ⅴ) 如果需要更换应用图标，请查看《Resource Hacker软件更换应用图标》

Ⅵ) 上述的app.exe运行其实是需要依赖库的，如果想单独一个exe执行程序，请执行以下

依赖库包含本目录即可，封包需要工具，具体见 Enigma Virtual Box封包工具介绍