Electron 操作指南 🧐

一、安装Electron 手撸版

创建文件夹初始化

// gitbase || linux 创建文件夹命令
mkdir myelectron

// 进入指定文件夹
cd myelectron

// 使用 npm 或者 yarn 初始化生成 package.json 文件
npm init -y && yarn init -y

使用命令下载Electron

npm install electron -D || --save-dev
yarn add electorn -D || --save-dev

在文件夹下创建三个文件 main.js preload.js index.html

/**
* main.js
*/
const { app, BrowserWindow } = require('electron')
const path = require('path')

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreference: {
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('index.html')
}
app.whenReady().then( () => {
    createWindow()
    app.on('activate', () => {
        if(BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

/**
* preload.js
*/
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if(element) element.innerText = text
}
for(const dependency of ['node', 'chrome', 'electron'])
    replaceText(`${dependency}-version`, process.versions[dependency])
})

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>electron</title>
</head>
<body>
  <div>Hello Electron</div>
</body>
</html>

二、启动+打包 😪

启动需要在 package.json 文件下script配置

"name":"myelectron",
"version":"1.0.0",
"main":"main.js",
"license":"MIT",
"author":"XM",
"script":{
    "start": "electron ."
}

打包使用插件 electron-builder

// 安装electron-builder
npm install electron-builder -D || --save-dev
                    &&
yarn add electron-builder -D || --save-dev

// 启动打包
yarn electron-builder

electron-builder 打包卡是因为要下载四个依赖文件根据实际报错信息下载相应的文件

1、electron-v20.0.2-win32-x64

2、winCodeSign-2.6.0

3、nsis-3.0.4.1

4、nsis-resources-3.4.1

更多内容请看Electron官方网站

Electron 笔记

Electron 操作指南 🧐

一、安装Electron 手撸版

二、启动+打包 😪