您的当前位置:首页正文

用nw.js构建项目

来源:要发发知识网

我是又忙又懒。

初始化项目

首先,确保你已经安装好了node.js的环境。

npm init

接下来就是常规的一些常规的填写:

package name: (nw-demo)
version: (1.0.0) 0.1.0
description: a nw.js demo
entry point: (index.js) index.html
test command:
git repository:
keywords: nw.js demo
author: classLfz
license: (ISC)
About to write to C:\classlfz\github\nw-demo\package.json:

{
  "name": "nw-demo",
  "version": "0.1.0",
  "description": "a nw.js demo",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nw.js",
    "demo"
  ],
  "author": "classLfz",
  "license": "ISC"
}


Is this ok? (yes) yes

这时候,我们就得到了一个package.json文件。

完善package.json

为了让nw.js能够完整的了解我们需要的桌面应用的一些常规的设置,我们需要对package.json补充一些内容:

{
  "name": "nw-demo",
  "version": "0.1.0",
  "description": "nw.js demo",
  "main": "index.html",
  "window": {
    "title": "nw-demo", // 应用标题
    "width": 840, // 应用初始化宽度
    "height": 600, // 应用初始化高度
    "toolbar": true, // 是否开启调试工具
    "resizable": false, // 应用是否可以调整高度以及宽度
    "icon": "images/icon.png" // 应用图标路径(相对路径)
  },
  "build": {
    "nwVersion": "0.14.7"
  },
  "directories": {
    "test": "test"
  },
  "devDependencies": {
    "nwjs-builder-phoenix": "^1.14.3"
  },
  "scripts": {
    "start": "run -x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "dist": "build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  },
  "repository": {
  },
  "keywords": [
    "nw.js",
    "demo"
  ],
  "author": "classLfz",
  "license": "ISC",
  "dependencies": {
  }
}

从上边可以看到,我们添加了一个window的字段,这里是告诉nw.js初始化这个桌面应用的一些参数。

编写index.html

然后,很简单的我们编写一个index.html作为应用主页。如果你的应用添加了前端路由的话,只要在main字段添加初始化的url路径即可,像这样:index.html/login

运行与打包应用

# 安装nwjs-builder-phoenix
npm install --save-dev nwjs-builder-phoenix
# 运行
npm run start
# 打包
npm run dist