NW.js开发环境搭建

文章目录

NW.js开发环境搭建
- 简介:NW.js是什么？
- 1. 选择Build Flavors SDK
- 2. 下载安装NWJS
- 3. 创建第一个应用
- 4. 运行应用
- 5. 打包应用
- 6. APIs
- 扩展
- - 1. 配置文件(package.json)
  - 2. 使用NW.js APIs
  - 3. 使用Node.js API（`require`）
  - 4. 开发工具与调试
  - 5. NW.js中独立环境和混合环境模式
  - - 5.1 独立环境模式
    - - 5.1.1 浏览器环境
      - 5.1.2 Node环境
    - 5.2 混合环境模式
    - 5.3 混合环境模式和独立环境模式对比
  - 6. JavaScript源码保护
  - 7. 应用签名
  - 7. 自动更新
  - 8. Node.js 自定义模块
  - 9. ES6与NodeJS模块导入导出区别
  - - NodeJs
    - ES6
  - 10. [ES6 入门教程](https://es6.ruanyifeng.com/)

简介:NW.js是什么？

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

NW.js官网

NW.js中文网

1. 选择Build Flavors SDK

NW.js支持各种构建样式以减小应用程序大小。当前，NW.js支持以下构建风格：

SDK风格（SDK）：内置了对DevTools和NaCl插件的支持。SDK风味与0.13.0之前的版本具有相同的功能(适用于开发调试环境);
正常风格（Normal）：是不带DevTools和NaCl插件支持的最低版本（适用于发布环境）。

建议您选择SDK构建风格来开发应用程序，这使您可以使用DevTools调试应用程序。

2. 下载安装NWJS

对于国内用户，如果下载连接下载速度太慢的话，可以考虑的可选项是：

淘宝NPM镜像
百度网盘链接，提取码为: ivh3

或者进入官网下载根据自己需要下载对应的版（我这里下载的是mac版本的v0.44.5,osx-x64,normal
v0.44.5,osx-x64,sdk

下载后直接解压，将nwjs.app拖到应用程序中(便于从桌面点击图标启动)

设置别名和环境变量(以便从命令行可直接启动)

#打开bash_profile环境变量配置文件
vim ~/.bash_profile#设置环境变量-nwjs的别名
alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"#应用环境变量
source ~/.bash_profile#命令行输入nw 回车启动即可（等同于桌面点击图标启动）
nw

启动后如下如：

3. 创建第一个应用

创建package.json文件

通过node.js初始化一个项目（首先，确保你已经安装好了node.js的环境）,生成package.json文件,package.json是JSON 格式格式的配置文件. main 属性定义了应用首页, 如本例的 "index.html". name则定义了应用名称. 具体查看配置文件章节.
```
#创建项目目录
mkdir NWDemo
#进入项目根目录
cd NWDemo
#执行初始化生成package.json
npm init
```
package.json
```
{"name": "test1","version": "1.0.0","description": "","main": "index.html","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"
}
```
您可以将 "main"属性设置如 "main.js"的js文件. 该文件在应用启动时默认不打开窗口并在后台执行。您可以稍后进行一些初始化并手动打开窗口。例如:
```
// 初始化你的应用程序之后 ...
nw.Window.open('index.html', {}, function(win) {});
```

创建入口页面index.html

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

4. 运行应用

进入我们创建的项目中,执行nw . 运行当前应用（nw .是NW.js执行文件）

Windows系统中是 nw.exe;
Linux系统中是 nw;
Mac系统中是 nwjs.app/Contents/MacOS/nwjs;

#进入项目根目录
cd NWDemo
#运行
nw .

【注意】

Windows系统中 , 可拖拽包含 package.json的文件夹至 nw.exe直接运行应用。

5. 打包应用

可以使用以下工具自动完成打包NW.js应用进行发布 .

nwjs-builder-phoenix (推荐：用于为Windows，macOS和Linux构建和打包可分发的NW.js应用程序。)
nw-builder

或者可以使用以下步骤手动构建应用，具体步骤参考手动构建应用

这里使用nwjs-builder-phoenix构建方式详细使用参见github

6. APIs

详细使用参见地址

扩展

1. 配置文件(package.json)

{"name": "nw-demo",       #应用名称,应确保该字段内容全局唯一性"main": "index.html",        #应用起始页"nodejs":true,                      #是否支持Node"node-main":"xxxx",            #指定Node.js脚本文件路径并且它将在加载DOM窗口之前启动Node环境时执行"domain":"xxxx",               #指定主机域名"single-instance":false, #是否以单实例运行(false则允许应用多开,默认 true)"bg-script":"xxxx",      #应用启动时执行的后台脚本/***窗体样式控制(窗口子字段默认情况被继承到使用 window.open()或 <a target="_blank">打开的子窗口*未继承子字段将被设置为打开窗口时的默认值)*列表如下：*  fullscreen -> false*  kiosk -> false*  position -> null*  resizable -> true*  show -> true*/"window":{                        "id":"xxx",           #内含窗口尺寸与位置的状态的窗口ID,打开同ID的窗口时会还原该状态"title":"xxx",        #NW.js创建的窗口标题 . 在应用启动时显示的标题信息"width":200,          #窗口宽高"height":200,         #窗口高"toolbar":true,       #是否显示导航栏中的工具条"icon":"xxxx",        #窗口图标路径"position":"xxx",     #窗口位置：默认 null(不固定) , center(屏幕居中) , mouse(鼠标所在位置)"min_width":100,      #窗口最小宽高"min_height":100,"max_width":500,      #窗口最大宽高"max_height":500,"as_desktopLinux":false, #X11环境下,作为桌面背景显示(true显示, false不显示)"resizable":true,        #是否可调整窗口大小(在OS X上将该属性设置为 false，并将frame设置true，#用户还是可以将窗口全屏显示。只有将全屏也设置为 false才可禁用全屏控件。"always_on_top":false,   #是否允许窗口始终置顶(在其余窗口之上,true允许, false不允许)"visible_on_all_workspaces Mac & Linux",: #支持多工作区的系统(如Mac & Linux)中,将窗口同时显示#在所有工作区中(true允许, false不允许)"fullscreen":false,      #是否允许窗口全屏(窗体和全屏框架(frame)应当一致,窗口设置为 false时,#则全屏框架(frame)不应设为 true,避免窗体将阻止鼠标获取屏幕边缘)"frame":true,            #窗口是否为框架(窗体和全屏框架应当一致,窗口设置为 false时,则全屏框架#不应设为 true,避免窗体将阻止鼠标获取屏幕边缘.)"show_in_taskbar":true,  #是否允许显示在任务栏或停靠栏中(true允许, false不允许,默认 true)"show":true,                     #启动时是否显示应用(true显示, false不显示)"kiosk":true,                     #是否使用 Kiosk模式(该模式即应用将全屏并阻止用户离开(关闭)应用,比如常见#的公共触摸屏演示,银行排队取票机洁界面，直到页面返回响应)  "transparent":false,     #窗口是否透明(true允许, false不允许,默认 false)#窗口的透明度由CSS中的背景透明值控制,#使用命令行参数 --disable-transparency 可完全禁止透明功能.#使用命令行参数 --disable-gpu 禁用GPU后,可实现透明窗体的穿透点击},/***WebKit特性控制*/"webkit":{"double_tap_to_zoom_enabled":false,  #是否启用两指缩放功能(true允许, false不允许,默认 false)"plugin":true,             #是否可加载扩展插件,比如Flash插件(true允许, false不允许,默认 true),},"user-agent":"xxx",         #重写应用请求页面中的 User-Agent信息#以下变量内容可以动态设置 User-Agent内容:#%name: 替换配置文件中的name字段 .#%ver: 替换配置文件中的version字段 .#%nwver: 替换NW.js版本 .#%webkit_ver: 替换WebKit引擎版本 .#%osinfo: 替换系统以及CPU信息 ."chromium-args":"xxx",      #分发应用时自定义chromium命令行参数至应用(想要禁用GPU加速视频显示,#只需添加添加参数 "chromium-args" : "--disable-accelerated-#video".)"crash_report_url":"xxx",   #应用崩溃时,崩溃转存报告将被发送到设定的服务器"inject_js_start":"xxx",    #CSS文件执行之后 , 其他DOM或脚本运行之前 , 执行的JavaScript代码"inject_js_end":"xxx",      #页面document对象加载之后 , 触发 onload之前 , 执行的JavaScript#代码 . 主要作为新窗口中 Window.open()的参数执行JavaScript代码 "additional_trust_anchors", #证书作为附加可用的根证书使用 , 允许连接自签名证书或者CA签发机构颁发#证书的服务(Array - 数多个PEM编码的证书组成的数组)"dom_storage_quota":500,    #Mb为单位的DOM存数限制数量（建议设置为期望值的两倍）/***其他字段*/"description":"xxx"         #配置的描述说明,以.结束"version":1.0,              #应用版本信息"maintainers":[{             #维护成员"name": "Bill Bloggs","email": "billblogs@bblogmedia.com","web": "http://www.bblogmedia.com",}],"contributors":[{        #贡献者,与维护成员格式一致,但首个应为作者"name": "xxx","email": "xxx","web": "xxx",}],"bugs":"xxx",            #提交错误的网址,如mail或http地址"licenses":"xxx",        #许可证列表"dependencies":"xxx",    #必要依赖,组的顺序非常重要,较前条目具有较高优先级."homepage":"xxx",        #网站URL地址
}

2. 使用NW.js APIs

NW.js中的APIs都被加载到nw全局对象中，并能够在javascript代码中直接使用

旧版本加载nw方式为require('nw.gui'),返回nw对象。

举个