Electron: npm配置electron_mirror安装及主进程和渲染进程互相通信

原创已于 2024-12-04 15:12:32 修改 · 1.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端

于 2024-08-22 19:48:52 首次发布

electron 专栏收录该内容

40 篇文章

订阅专栏

// 指定npm仓库地址
npm config set registry https://registry.npmmirror.com

// 指定electron 二进制包镜像地址
npm config set ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

// 检测npm仓库和electron镜像地址是否设置成功
npm config list

// 安装 electron
npm i electron -D
// 使用 nodemon 构建应用，可以更好的重启electron应用
npm i nodemon -g

// package.json
{
  "name": "electron-vue",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "nodemon --exec electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^33.2.0"
  }
}


// 主进程main.js

const {app, BrowserWindow, ipcMain} = require('electron')
const path = require('path')

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
            // 渲染进程使用node指令的配置
            // nodeIntegration: true, // 集成node
            // contextIsolation: false, // 上下文隔离

            // 预加载js代码
            preload: path.resolve(__dirname, './preload.js'),
            sandbox: false
        }
    })

    win.loadFile('index.html')

}

app.whenReady().then(() => {
    createWindow()

    // 当所有窗口都被关闭后创建一个窗口
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })

    // 渲染进程给主进程通信
    ipcMain.handle('send-event', (event, msg) => {
        console.log(event, msg, 'event');
        return msg
    })
})

// 关闭所有窗口时退出应用 (Windows & Linux)
// 如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。
app.on('window-all-closed', () => {
    // IOS MAC平台
    if (process.platform !== 'darwin') {
        // 关闭MAC 该文件图标
        app.quit();
    }
})

// 预先加载的脚本， 通信 preload.js

// const fs = require('fs')

// // 查找桌面的文件夹路径：pwd
// fs.writeFile('C:/Users/caijunj/Desktop/example.txt', 'abc', () => {
//     console.log('done');
    
// })

// 主进程给渲染进程发信息
const {contextBridge, ipcRenderer} = require('electron')

const handleSend = async () => {
    // 触发一个函数名
    const res = await ipcRenderer.invoke('send-event', '哈哈哈哈')
    console.log(res, 'ressssssssss');
    
}

contextBridge.exposeInMainWorld('myApi', {
    platform: process.platform,
    handleSend
})

// 渲染进程 app.js

// 渲染进程接收主进程消息
console.log(window.myApi)

// 渲染进程给主进程发送消息
document.getElementById('btn').addEventListener('click', () => {
    window.myApi.handleSend()
})

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 去掉窗口的Content-Security-Policy警告，告诉该页面的内容是使用本地的 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self' 'unsafe-inline'">
    <title>Document</title>
</head>
<body>
    hello
    <button id="btn">按钮</button>
    <script src="./renderer/app.js"></script>
</body>
</html>