本文主要是介绍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.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()`开启开发工具进行编程 .
这篇关于nw.js初探的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!