Electron WebView 完全指南

Electron WebView 完全指南

项目地址:https://gitcode.com/gh_mirrors/el/electron-webview

---

1. 项目目录结构及介绍

├── assets                   # 资源文件夹，存放图标和其他静态资产
│   ├── icons                # 图标子文件夹
│       └── png              # PNG图标格式
│       └── mac              # Mac OS特定图标格式 (icns)
├── main.js                  # 主进程入口文件，负责创建窗口和管理webview
├── index.html               # 渲染进程的主要HTML文件，可能包含webview标签
├── package.json             # 项目配置文件，包括依赖管理和脚本命令
├── preload.js               # 预加载脚本，用于在webview内运行，提供特殊的API访问或修改行为
├── .gitignore               # Git忽略文件，指定不纳入版本控制的文件或文件夹
├── LICENSE                  # 项目许可证文件，此处遵循MIT协议
└── README.md                # 项目说明文件，包含简介、安装步骤、使用方法等

此目录结构展示了一个典型的Electron应用布局，其中main.js是应用程序启动的关键，而index.html与webview标签紧密相关，用于显示或管理嵌入式的Web内容。preload.js允许在webview沙箱环境中运行特定的JavaScript代码，以便与主进程或webview进行更深层次的交互。

---

2. 项目的启动文件介绍

主要文件：main.js

main.js文件是Electron应用的起点，它定义了应用的生命周期和主窗口的行为。通常包含以下关键部分：

• 初始化Electron App: 导入electron模块并创建一个新的App实例。
• 创建BrowserWindow: 使用new BrowserWindow初始化一个窗口，并可以设置其大小、位置、是否可缩放等属性。
• 加载webview: 在窗口内部通过HTML的webview标签或者通过编程方式动态插入webview，配置其属性如partition（数据隔离）、src（加载的URL）等。
• 事件监听: 监听窗口事件（如关闭），以及webview相关的事件，实现复杂的逻辑控制。

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      // 其他webPreferences配置
    }
  })

  mainWindow.loadFile('index.html') // 加载含有webview标签的HTML文件
}

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

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

---

3. 项目的配置文件介绍

主要文件：package.json

package.json不仅记录了项目的基本信息，还包含了项目的脚本指令和依赖管理。对于Electron项目，这里特别关注几个字段：

• scripts: 定义了一系列npm脚本，比如启动应用(start), 打包应用(package-*)等。
• dependencies: 列出所有Node.js和Electron的依赖库。
• devDependencies: 记录开发过程中使用的工具或库，如构建工具、测试框架等。
• build: 如果有配置打包工具（如electron-builder或electron-packager），将在这里定义打包选项。
• description, author, license: 项目的基本描述信息。

示例scripts段落可能包含：

{
  "scripts": {
    "start": "electron .",          // 启动应用
    "package-mac": "electron-packager . --platform=darwin --arch=x64", // 打包MacOS版
    "create-installer-mac": "electron-installer-dmg ./release-builds/Electron webview-darwin-x64/Electron webview.app --out=release-builds" // 创建DMG安装程序
  },
  "dependencies": {
    "electron": "^3.1.x"
  },
  "devDependencies": {
    "electron-packager": "^latest",
    "electron-installer-dmg": "^latest"
  }
}

这个文件是项目的基石，通过它可以自动化许多开发流程和发布步骤。

electron-webview 💻 A simple electron webview with cool features. 项目地址: https://gitcode.com/gh_mirrors/el/electron-webview