Electron使用&创建_electron renderer.js在哪-CSDN博客

本文链接：https://blog.csdn.net/mingketao/article/details/123006275

Electron

`第一步：初始化项目并运行`

首先创建一个文件夹并初始化 npm 包

mkdir my-electron-app && cd my-electron-app

npm init

将 electron 包安装到应用的开发依赖中（如果npm下载报错，切换cnpm。cnpm安装方式）

npm install --save-dev electron

项目根目录下创建一个名为index.html的文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- 加了这句后，项目调试控制台不会输出由Electron提示的‘不安全提示’;下面的是只允许加载本域名下的js代码 -->
        <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
        <title>Hello World!</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

4.创建主进程index.js文件（package.json文件里{"main": "index.js"}的，“index.js”即为项目的主进程）

const { app, BrowserWindow } = require('electron');
function createWindow() {
    const win = new BrowserWindow(
        //创建窗口         
        {
            width: 800,
            height: 600,
            webPreferences: {
                // 开启nodeJs环境                 
                nodeIntegration: true,
                contextIsolation: false,
            },
        }
    );
    win.webContents.openDevTools();
    //开启调试     
    win.loadFile('index.html');
    //在窗口中显示的页面路径 } 
}

app.whenReady().then(() => {
    //electron生命钩子，在项目启动时触发     
    createWindow();
    //创建窗口 
});

运行Electron项目,在package.json 添加一个运行脚本运行 npm run start

    "scripts": {
        "start": "electron ."
    },

或者在当前项目下，直接运行下面命令

electron .

`第二步：remote在渲染进程中使用Electron Api`

在除了主进程中（如：index.js）掉用Electron Api会报错，所以可以用到remote。但是这个模块有很多微妙的陷阱！
注意： @electron/remote需要 Electron 10 或更高版本。

1.安装remote模块（如果npm下载报错，切换cnpm。cnpm安装方式）

npm install --save @electron/remote

2.在主进程中（如：index.js），初始化remote

 const { app, BrowserWindow } = require('electron');
// 1.开启remote（在主进程文件开头放入此代码） 
const remote = require('@electron/remote/main');
remote.initialize();
//2.在创建窗口中初始化，加入remote.enable(webContents)，如 
function createWindow() {
    const win = new BrowserWindow(
        //创建窗口         
        {
            width: 1500,
            height: 900,
            webPreferences: {
                // 开启nodeJs环境                 
                nodeIntegration: true,
                contextIsolation: false,
            },
        }
    );
    win.loadFile('index.html') //在窗口中显示的页面路径 
    remote.enable(win.webContents) //<--------加入的是这句 
}

app.whenReady().then(() => {
    //electron生命钩子，在项目启动时触发     
    createWindow();
    //创建窗口 
});

3.在渲染进程中引用并使用方法（在项目中创建一个js文件”renderer.js“,并放入此代码）

const { BrowserWindow } = require('@electron/remote');
let win = new BrowserWindow(
    {
        width: 1400, 
        height: 800
    }
);
win.loadURL('https://blog.csdn.net/mingketao');

在index.html中，引入”renderer.js“

<script src="renderer.js"></script>

如果此步报错请看这里：
a.在electron >= 14.0.0中，您必须使用新的enableAPI 分别为每个所需的远程模块启用WebContents：require(“@electron/remote/main”).enable(webContents)。默认情况下对任何WebContents实例都禁用，并且仅WebContents在显式调用require(“@electron/remote/main”).enable(webContents).

b.在electron < 14.0.0中，@electron/remote尊重enableRemoteModuleWebPreferences 值。您必须将s{ webPreferences: { enableRemoteModule: true } }的构造函数传递给BrowserWindow应该被授予使用权限的构造函数@electron/remote。

c.参考remote github使用文档