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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容