Node.js在VS2017中开发桌面程序

136 阅读 0 评论 90 点赞

我是靠谱客的博主坚定小鸭子，这篇文章主要介绍Node.js在VS2017中开发桌面程序，现在分享给大家，希望可以做个参考。

一、环境搭建

安装 node.js ，直接从官网下载，默认安装即可。
安装express

复制代码

1
2
3
4
打开cmd
输入npm install -g express
继续输入npm install -g express-generator
到此express安装完成

安装 vs2017 ，必须安装 node.js web开发包。

二、创建空白 Node.js 控制台应用程序项目

创建好的项目结构入下：

三、编写 electron Hello Word

参照：

1、打开 package.json 加入：

复制代码

1
"dependencies": {"electron": "^1.6.6"}

最后内容如下：

复制代码

1
2
3
4
5
6
7
8
{
"name": "electron-hello-word",
"version": "0.0.0","
description": "ElectronHelloWord",
"main": "app.js?1.1.11",
"author": {"name": "Starts_2000"},
"dependencies": {"electron": "^1.6.6"}
}

2、打开 app.js，输入以下内容：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'use strict';
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow() {
    win = new BrowserWindow({ width: 800, height: 600 })
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }))
    win.webContents.openDevTools()
    win.on('closed', () => {
        win = null
    })
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
app.on('activate', () => {
    if (win === null) {
        createWindow()
    }
})

3、新建 index.html 文件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
</head>
<body>
    <h1>Hello World!</h1>We are using node
    <script>document.write(process.versions.node)</script>,
    Chrome
    <script>document.write(process.versions.chrome)</script>,
    and Electron
    <script>document.write(process.versions.electron)</script>.
</body>
</html>

四、设置和运行

1、NPM 安装 electron 包

安装成功后可看到，点击解决方案上方的显示所有文件，可以看到

2、设置项目 Node.exe路径为：

复制代码

1
.node_moduleselectrondistelectron.exe

运行解决方案，就可以看到electron 的 Hello Word示例了：

五、项目打包

1. 安装 electron-packager

使用命令

复制代码

1
npm install --save-dev electron-packager

将electron-package包安装到在项目下面，

安装完成之后，项目根目录下面的package.json文件里，会多出一条electron-package的版本号配置信息

2、首先在项目根目录下面的 package.json 里添加代码，

复制代码

1
2
3
4
5
 "scripts": {
    "test": "start",
    "start": "electron .",
    "packager": "electron-packager ./ app --all --out ./OutApp --version 0.0.0 --overwrite --icon=./img/cat.ico"
  },

PS：这里要注意，字段里的项目名字，version，icon路径要改成自己的；

3.然后，在使用命令

复制代码