WebView2 BindDataUI 示例 - 双向数据绑定

概述

这是 cWebView2Host 最完整的数据绑定示例，演示 BindUI（UI -> 宿主）和 BindData（宿主 -> UI）的双向绑定系统，以及 SetData 推送数据到 DOM。

项目结构

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

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

bindDataUI/
  ├── Form1.frm              # 主窗体，包含绑定逻辑和回调方法
  ├── www/
  │   └── index.html         # 测试用 HTML 页面（6 个测试区域）
  ├── vbman2_webview2.vbp    # VB6 项目文件
  └── vbman2_webview2.vbw    # VB6 工作区文件

核心代码解析

1. 声明与初始化(Form1.frm)

Dim WithEvents wv As cWebView2Host

Private Sub Form_Load()
    Set wv = New cWebView2Host
    wv.Initialize Me.hWnd, App.Path & "\www"
End Sub

使用 WithEvents 声明以接收 Ready 等事件。传入本地文件夹路径，自动映射为 WebView2 可访问的资源。

2. 绑定配置(wv_Ready 事件)

Private Sub wv_Ready()
    ' === BindData: 宿主 -> UI ===
    ' 文本输入双向绑定
    wv.BindData "name", "#name-input", "value"
    wv.BindData "name", "#name-preview", "textContent"
    
    ' 复选框控制面板可见性
    wv.BindData "enabled", "#toggle-enabled", "checked"
    wv.BindData "enabled", "#settings-panel", "visible"
    
    ' 图片和计数器
    wv.BindData "avatar", "#avatar", "src"
    wv.BindData "count", "#msg-count", "textContent"
    
    ' CSS 类绑定（状态样式）
    wv.BindData "statusOnline", "#status-dot", "class"
    
    ' HTML 内容绑定
    wv.BindData "items", "#item-list", "innerHTML"
    
    ' === BindUI: UI -> 宿主 ===
    wv.BindUI Me, "OnNameInput", "#name-input", EventName:="input"
    wv.BindUI Me, "OnToggle", "#toggle-enabled", EventName:="change"
    wv.BindUI Me, "OnIncMsg", "#btn-inc"
    wv.BindUI Me, "OnResetMsg", "#btn-reset"
    
    ' === 推送初始数据 ===
    wv.SetData "name", "张伟"
    wv.SetData "enabled", True
    wv.SetData "avatar", "https://api.dicebear.com/7.x/adventurer/svg?seed=Felix"
    wv.SetData "count", "3"
    
    Me.Caption = wv.DocumentTitle
End Sub

3. UI 回调方法

' 文本输入回调 — 实时更新预览
Public Sub OnNameInput(ByVal EventName As String, ByVal Detail As String)
    Dim val As String
    val = JsonValue(Detail, "value")
    wv.SetData "name", val
End Sub

' 复选框切换回调
Public Sub OnToggle(ByVal EventName As String, ByVal Detail As String)
    Dim checked As Boolean
    checked = (InStr(Detail, """checked"":true") > 0)
    wv.SetData "enabled", checked
End Sub

' 增加消息计数
Public Sub OnIncMsg(ByVal EventName As String, ByVal Detail As String)
    Dim count As Long
    count = Val(wv.JsProp("document.querySelector('#msg-count').textContent"))
    wv.SetData "count", count + 1
End Sub

' 重置消息计数
Public Sub OnResetMsg(ByVal EventName As String, ByVal Detail As String)
    wv.SetData "count", 0
End Sub

4. JSON 辅助函数

Private Function JsonValue(ByVal Json As String, ByVal Key As String) As String
    Dim pos As Long
    pos = InStr(Json, """" & Key & """:""")
    If pos > 0 Then
        pos = pos + Len(Key) + 3
        Dim endPos As Long
        endPos = InStr(pos, Json, """")
        If endPos > 0 Then
            JsonValue = Mid(Json, pos, endPos - pos)
        End If
    End If
End Function

功能说明

1. 文本双向绑定

   • 输入框实时更新预览文本
   • BindUI 捕获 input 事件 → SetData 回推数据 → BindData 更新 DOM

2. 复选框控制可见性

   • checkbox 的 checked 属性绑定
   • 面板的 visible（自定义属性）绑定
   • 一个数据键控制多个 DOM 元素

3. 图片与计数器

   • src 属性绑定动态图片 URL
   • textContent 绑定计数器文本

4. CSS 类名绑定

   • class 属性整体替换
   • 用于切换状态样式

5. HTML 内容绑定

   • innerHTML 绑定渲染 HTML 片段
   • 适用于动态列表渲染

技术要点

1. BindData 和 BindUI 必须在 wv_Ready 事件中执行，不能在 Form_Load 中
2. 回调方法必须声明为 Public，签名必须为 (ByVal EventName As String, ByVal Detail As String)
3. 同一数据键可绑定到多个元素和属性，实现一对多更新
4. Detail 是 JSON 字符串，需要手动解析，示例提供了简单的 JsonValue 辅助函数
5. visible 是自定义属性，内部通过 JS 设置 style.display 实现显示/隐藏

应用场景

1. 数据录入表单的实时预览
2. 设置面板的开关控制
3. 动态数据展示仪表盘
4. 任何需要 VB6 与 Web UI 深度交互的场景

扩展建议

1. 使用 SetDataBatch 批量推送初始数据，减少多次 JS 调用
2. 对于复杂 JSON 解析，可集成 JSON 库替代手动字符串处理
3. 实现服务端数据加载后通过 SetData 更新 UI，构建完整的数据驱动界面