nw.js初探

最新推荐文章于 2024-04-17 09:50:10 发布

任磊abc

最新推荐文章于 2024-04-17 09:50:10 发布

阅读量1k

点赞数 1

分类专栏： electorn 文章标签： nwjs vue

本文链接：https://blog.csdn.net/sinat_36728518/article/details/107958826

版权

electorn 专栏收录该内容

14 篇文章 2 订阅

订阅专栏

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/
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镜像下载，速度飞快，我选择最的 https://npm.taobao.org/mirrors/nwjs/v0.47.0/ 上下载；

3、win开发版本配置

开发NW.js应用

例子 1 - Hello World

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

步骤 1. 创建 package.json:

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

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

【注意】 "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构造方式进行开发和测试 , 其他构造方式发布应用 .

Open Developer Tools 开启开发工具

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

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

任磊abc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
nw.js初探

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/1.nw.js是干嘛的？官网上的解释：NW.js基于Chromium和Node
复制链接

扫一扫