当前位置：首页 > news >正文

electron-vite_4使用WebContentsView快速集成已有项目

news 2025/1/11 10:18:05

Web 嵌入官方推荐使用WebContentsView；集成也比较简单，但还是需要你单独写点东西；

src/main/index.ts进行修改

在这里插入图片描述

import { app, 
shell, BrowserWindow, 
ipcMain, nativeImage, WebContentsView, dialog } from 'electron';function createWindow(): void {// 1.创建 browser window.const mainWindow = new BrowserWindow({width: 900,height: 670,show: false,autoHideMenuBar: true,...(process.platform === 'linux' ? { icon: appIcon } : {}),transparent: false,frame: true,resizable: true,webPreferences: {preload: join(__dirname, '../preload/index.js'),sandbox: false}})// 2.创建WebContentsViewconst view1 = new WebContentsView()// 3. 添加给mainWindow mainWindow.contentView.addChildView(view1)// 4.知道要加载的线上url最好是httpsview1.webContents.loadURL('https://baidu.com')// 5.指定显示位置;x,y是偏移；这里选择0；width和height和mainWindow保持一致view1.setBounds({ x: 0, y: 0, width: 900, height: 670});// 染进程第一次完成绘制时mainWindow.on('ready-to-show', () => {// 6-1.关闭谷歌调试工具mainWindow.webContents.closeDevTools();// 6-2.当页面发生改变的时候重新指定显示位置mainWindow.on('resize', () => {  // 获取mainWindow宽高const [width, height] = mainWindow.getContentSize();view1.setBounds({ x: 0, y: 0, width, height});  });mainWindow.show()})mainWindow.webContents.setWindowOpenHandler((details) => {shell.openExternal(details.url)return { action: 'deny' }})// HMR for renderer base on electron-vite cli.// Load the remote URL for development or the local html file for production.if (is.dev && process.env['ELECTRON_RENDERER_URL']) {mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])} else {// 7.注意这里一定要加载index.htmlmainWindow.loadFile(join(__dirname, '../renderer/index.html'))}
}

renderer/index.html

注意修改title, 比方说‘微信’、‘钉钉’、‘小红书’、‘有道云’

<!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>百度</title>
</head>
<body>
</body>
</html>