使用Node构建桌面GUI

发表于 | 分类于

1. 安装 NVM

它是Node.js的版本管理工具，使用它可以很方便的安装各个版本的Node.js
下载地址： https://github.com/coreybutler/nvm-windows/releases

简单使用：

  1. 安装Node.js

    使用nvm install version arch命令下载需要的版本。arch参数表示系统位数，默认是64位，如果是32位操作系统，需要执行命令：nvm install v10.16.1 32

    1
    nvm install v10.16.1

查看最新版本：https://nodejs.org/en/

  1. 切换版本

    1
    nvm use v10.16.1

  2. 查看本机安装了那些版本

    1
    nvm list

  3. 换源（淘宝镜像）

    1
    npm config set registry https://registry.npm.taobao.org

2. 安装electron

electron 安装文档：https://electronjs.org/docs

1
npm install -g electron

3. 使用electron

  1. 初始化一个Node项目
    1
    npm init

这里输入一些项目基本信息就OK了，可以一路回车，最后会生成一个package.json文件

  1. 添加electron到项目中

    1
    2
    3
    4
    # 将electron添加到项目中
    npm install --save-dev electron
    # 安装
    npm install

  2. 修改package.json

    将 test 那块修改为 "start": "electron ."

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
      "name": "electron",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "electron ."
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "electron": "^6.0.0"
      }
    }

  3. 新增入口index.js文件

    在项目根目录下新建index.js文件，文件里面的内容直接用electron提供的示例了。点击查看

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const { app, BrowserWindow } = require('electron')

    function createWindow () {   
      // 创建浏览器窗口
      let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          nodeIntegration: true
        }
      })
      // 加载index.html文件
      win.loadFile('index.html')
    }
    app.on('ready', createWindow)

  4. 新建index.html文件

    通过上面的js我们可以看到，它其实是加载的index.html文件，我们创建它，简单的写个HelloWorld

1
2
3
4
5
<html>
	<body>
		<h1>Hello World</h1>
	</body>
</html>
  1. 运行程序
    1
    npm start

这时我们就会弹出了一个GUI界面，如下图所示

-------------本文结束感谢您的阅读-------------