nw.js初探

谁借莪１个温暖的怀抱￠ 2022-11-26 15:58 208阅读 0赞

NW.js由node-webkit项目发展而来  
其实很多东西官网上都有。但是鉴于搜索引擎（百度，google）搜索到的相关文章，让人看的很不明白。所以决定写下此篇文章。  
官网：https://nwjs.io/  
中文文档：http://nwjs-cn.readthedocs.io/zh\_CN/latest/index.html  
淘宝镜像安装：[https://npm.taobao.org/mirrors/nwjs/v0.47.0/][https_npm.taobao.org_mirrors_nwjs_v0.47.0]  
**1.nw.js是干嘛的？**  
官网上的解释：  
NW.js基于Chromium和Node.js . NW.js能够通过页面技术开发桌面应用 , 同时可以调用Node.js代码以及模块 . 未来 , 你可以使用NW.js轻松将页面应用制作成桌面应用 .  
简单的说，就是用web技术开发跨平台PC桌面应用。

**2、下载nw.js**

nwjs下载包一个是Normal版本，一个是SDK版本，如果是做开发测试，则需要下载SDK版本，SDK版本可以使用开发工具进行debug等;

如果直接在官网上下载的话会很慢，因此选择从[淘宝NPM镜像][NPM]下载，速度飞快，我选择最的 [https://npm.taobao.org/mirrors/nwjs/v0.47.0/][https_npm.taobao.org_mirrors_nwjs_v0.47.0] 上下载；

![20200812154328513.png][]

**3、win开发版本配置**

## 开发NW.js应用 ##

### 例子 1 - Hello World ###

快速开发一个NW.js应用.

**步骤 1.** 创建 `package.json`:

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

`package.json`是[JSON 格式][JSON]格式的配置文件. `main` 属性定义了应用首页, 如本例的 `"index.html"`. `name`则定义了应用名称. 具体查看 [配置文件][Link 1]章节.

**【注意】** "main属性定义为js文件"需知:

您可以将 `"main"`属性设置如 `"main.js"`的js文件. 该文件在应用启动时默认不打开窗口并在后台执行。 您可以稍后进行一些初始化并手动打开窗口。 例如:

// 初始化你的应用程序之后 ...
    nw.Window.open('index.html', {}, function(win) {});

**步骤 2.** 创建 `index.html`文件:

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

**步骤 3.** 运行应用

**【注意】** "Windows中"需知:

1、 将包含 \`package.json\`的文件夹压缩为zip格式，比如压缩完成后为dist.zip；

2、 将dist.zip文件修改为文件名为package.nw;

3、 将package.nw拖拽至与 \`nw.exe\`为同级目录后，直接运行应用.

**【注意】** "mac中"需知:

1、 将包含 \`package.json\`的文件夹压缩为zip格式，比如压缩完成后为dist.zip；

2、 将dist.zip文件修改为文件名为app.nw;

3、 将package.nw拖拽至nwjs-sdk-v0.47.0-osx-x64\\nwjs.app\\Contents\\Resources，

然后使用命令运行应用：

`/nwjs-sdk-v0.47.0-osx-x64/nwjs.app/Contents/MacOS/nwjs` `.`

**步骤 4.** 应用调试

!!! 注 "仅适用SDK构造方式" 开发工具只能在SDK构造方式中使用 , 参考[SDK构造][SDK] . 推荐使用SDK构造方式进行开发和测试 , 其他构造方式发布应用 .

Open Developer Tools 开启开发工具

Windows和Linux系统中使用快捷键F12开启 , Mac系统中使用+⌥+i .

此外 , windows系统中可以使用[win.showDevTools()\`][win.showDevTools]开启开发工具进行编程 .

[https_npm.taobao.org_mirrors_nwjs_v0.47.0]: https://npm.taobao.org/mirrors/nwjs/v0.47.0/
[NPM]: http://npm.taobao.org/mirrors/nwjs/
[20200812154328513.png]: /images/20221124/7601c3d326f74429b197043cb7e48fa5.png
[JSON]: http://www.json.org/
[Link 1]: https://nwjs.org.cn/doc/api/Manifest-Format.html
[SDK]: https://nwjs-cn.readthedocs.io/zh_CN/latest/Base/Advanced/Build%20Flavors/index.html
[win.showDevTools]: https://nwjs-cn.readthedocs.io/zh_CN/latest/References/Window/index.html#%23winshowdevtoolsiframe-headless-callback