Node-Webkit(现更名为NW.js)是一个基于Chromium和Node.js技术的应用运行时(Application Runtime),它可以让你使用HTML5、JavaScript和CSS构建桌面应用程序。Node-Webkit集成了Chromium和Node.js,为Web开发人员提供了使用Web技术开发跨平台桌面应用的便捷方式。接下来,我将详细介绍如何使用Node-Webkit打包Web应用为exe文件。
### 准备工作
首先确保已安装Node.js和npm(Node.js自带的包管理器)。
### 步骤一:安装 nwjs
打开终端或命令提示符,运行以下命令安装`nw`:
```bash
npm install -g nw
```
这将全局安装nwjs,以便我们可以从任意位置运行它。
### 步骤二:创建一个简单的Web应用
在文件夹中创建以下文件:
1. `index.html` - 包含HTML结构和载入css和js
2. `app.js` - JavaScript逻辑
3. `styles.css` - CSS样式
4. `package.json` - 包含应用的基本信息和配置
以下是示例内容:
- `index.html`:
```html
```
- `app.js`:
```javascript
document.querySelector('header').addEventListener('click', () => {
alert('Hello from Node-Webkit!');
});
```
- `styles.css`:
```css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #F0F0F0;
}
header {
color: #444;
background-color: #EEE;
}
```
- `package.json`:
```json
{
"name": "node-webkit-app",
"version": "1.0.0",
"main": "index.html",
"scripts": {
"start": "nw ."
},
"window": {
"title": "Node-Webkit App",
"toolbar": false
}
}
```
`main`属性指定Web应用的主入口文件(通常为index.html)。`window`对象可以包含有关窗口样式和行为的详细配置,如`title`和`toolbar`等。
### 步骤三:测试应用
在命令提示符处,进入包含上述文件的文件夹并运行以下命令:
```
npm start
```
这会启动Node-Webkit,显示`index.html`内容的窗口。点击标题进行测试。
### 步骤四:打包为exe文件
为了将应用打包为exe文件,我们需要使用`nw-builder`:
```bash
npm install -g nw-builder
```
在项目文件夹中运行以下命令打包应用:
```
nwbuild -p win64 .
```
这将在`build`文件夹下生成可执行的exe文件,默认为64位。`-p`参数可以接受以下值:`win32`, `win64`, `osx32`, `osx64`, `linux32`, `linux64`。可以同时多个目标平台, 具体例子:`nwbuild -p win64,osx64 .`
至此,我们已成功使用Node-Webkit将Web应用打包为exe文件。