Electron 极简入门

Electron相当于个性化的浏览器，它把V8引擎单独打包成型。可以把网页打包成一个在桌面运行的程序。大家见到的微信电脑版就是Electron做的。功能的强大超出你的想象，可以构建跨平台桌面程序，本身支持node.js，可以使用node.js的一些模块。

下面就是极简入门（采用命令行创建）

一 、创建空的文件夹

• 随便在某个位置 创建名为 electron-demo 的空文件。
• 用命令行进入该文件 image.png
• 初始化项目
  yarn init -y
  image.png
• 安装Electron (可以指定版本号 yarn add --dev electron@版本号)
  这里用的是 6.0.0 版本( yarn add --dev electron@6.0.0 )
  image.png
• 查看当前的版本号 image.png

二、进入编辑器开始配置

1、创建如下文件

• package.json （已经通过yarn init -y 建好）
• main.js
• index.html

image.png

2、在package.json中添加script

"scripts": {
        "start": "electron .",
        "pack": "electron-builder --dir",
        "dist": "electron-builder"
    },

3、修改main

image.png

三、在main.js中加入以下代码

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)

四、在命令行中 运行文件

image.png

效果如下 ：

image.png

五、发布成可执行文件

• 可以使用的发布工具 electron-builder
  image.png
• 在package.json添加builder配置

"build": {
        "appId": "yapp.nihao",
        "mac": {
            "category": "game"
        }
    },

image.png

• 在 script中添加脚本

  
  image.png

• 在命令行中 打包 完成

  
  image.png

image.png image.png

最终长成这个样子

image.png