WebView2 UserData2 示例 - UserControl 封装 WebView2

概述

演示如何将 cWebView2Host 封装到 VB6 UserControl 中，创建可复用的"Edge 浏览器控件"，支持从工具箱直接拖拽到窗体上使用。

项目结构

下载源码 [ 注意：重新到bin目录注册 DLL 文件 ]

代码请到 VBMAN2 项目 demos/webview2/userData2 目录获取。

userData2/
  ├── Form1.frm              # 主窗体，使用 Edge 控件数组
  ├── Edge.ctl               # 自定义 UserControl，封装 cWebView2Host
  ├── Edge.ctx               # UserControl 工具箱图标
  ├── vbman2_webview2.vbp    # VB6 项目文件（含 UserControl=Edge.ctl）
  └── vbman2_webview2.vbw    # VB6 工作区文件

核心代码解析

1. Edge UserControl 封装(Edge.ctl)

Public WithEvents wv As cWebView2Host

Public Event TitleChange()

Const BASE_URL As String = "https://douyin.com"

Private Sub UserControl_Initialize()
    Set wv = New cWebView2Host
End Sub

Private Sub wv_Create()
    ' 配置用户数据目录
    wv.EnvironmentOptions.UserDataFolder = App.Path & "\UserDir\account"
End Sub

Private Sub wv_DocumentTitleChanged()
    ' 转发事件给 UserControl 的消费者
    RaiseEvent TitleChange
End Sub

封装要点：

• Public WithEvents wv — 将 cWebView2Host 暴露为控件的公共属性
• RaiseEvent TitleChange — 转发 WebView2 事件为 UserControl 自定义事件
• UserControl_Initialize 中创建 WebView2 实例

2. 主窗体使用(Form1.frm)

' Edge1 控件数组，索引 0 已在设计时放置
' 可通过 Load Edge1(1), Load Edge1(2) 动态添加更多实例

窗体上有一个 Frame 容器、ListBox、添加/删除按钮，以及一个 Edge1 控件数组（索引 0）。

功能说明

1. UserControl 封装模式

   • 将 cWebView2Host 封装到自定义 UserControl 中
   • 控件可从 VB6 工具箱直接拖到窗体上
   • 隐藏 WebView2 初始化复杂性

2. 事件转发

   • UserControl 内部接收 cWebView2Host 事件
   • 通过 RaiseEvent 转发给外部消费者
   • 消费者只需处理 UserControl 级别的事件

3. 控件数组支持

   • Edge1(0) 在设计时创建
   • 可通过 Load Edge1(n) 动态创建更多实例
   • 每个控件数组元素有独立的 cWebView2Host 实例

4. UserDataFolder 配置

   • 在 wv_Create 事件中设置
   • 支持多实例使用不同的数据目录

技术要点

1. Public WithEvents wv：在 UserControl 中使用 Public WithEvents 声明，外部代码可以通过 Edge1(0).wv 直接访问底层 cWebView2Host 的全部 API

2. UserControl_Initialize：控件初始化时自动创建 cWebView2Host 实例，无需外部调用

3. 控件数组动态添加：VB6 的 Load 语句创建控件数组的新元素，每个元素独立运行

4. UserControl_Resize：可在 UserControl 的 Resize 事件中调用 wv.Resize() 自动适配控件大小

应用场景

1. 创建可复用的浏览器控件组件
2. 在多个项目中共享 WebView2 集成逻辑
3. 团队开发中标准化 WebView2 的使用方式
4. 构建 OCX 组件供其他应用使用

扩展建议

1. 为 Edge UserControl 添加更多公共方法（如 Navigate、SetData），封装常用操作
2. 添加 UserControl_Resize 事件处理，自动调整 WebView2 大小
3. 实现控件的属性页（Property Page），允许在设计时配置 URL、UserDataFolder 等
4. 可编译为 OCX 组件，供其他 VB6 项目或 VBA 应用引用