使用NWjs构建桌面应用(二)-使用npm构建
前一种方法,直接下载官方包构建比较蠢,不能使用开发工具,每次修改还要手动重启项目
所以推荐使用npm构建nw应用
使用方法:
-
1.新建文件夹作为项目目录,初始化项目
npm init
-
2.新建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>nw</title>
</head>
<body>
<div>使用npm搭建nw完成</div>
</body>
</html>
- 3.完善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": "",
"license": "ISC",
"dependencies": {
}
}
- 4.运行应用
上边的package.json添加了几个script脚本，依赖于nwjs-builder-phoenix这个node.js模块
所以先下载nwjs-builder-phoenix模块
npm install --save-dev nwjs-builder-phoenix
运行应用: npm run start
运行结果:
修改内容再试一下:
右键弹出,重新加载应用
修改完成:
- 5.打包
npm run dist
生成dist文件夹
打开dist文件夹,里面是这个
在打开
这就是我们的应用程序,打开它
完成
