WebView2 LoadFile 示例 - 加载本地 HTML 文件

概述

演示如何通过 cWebView2Host 加载本地文件系统中的 HTML 文件，将桌面应用与丰富的 Web 前端完美结合。

项目结构

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

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

loadFile/
  ├── Form1.frm              # 主窗体，包含本地文件加载逻辑
  ├── www/
  │   └── index.html         # 本地 HTML 页面（922行完整着陆页）
  ├── vbman2_webview2.vbp    # VB6 项目文件
  └── vbman2_webview2.vbw    # VB6 工作区文件

核心代码解析

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

Dim wv As New cWebView2Host

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

当 Initialize 的第二个参数是本地文件夹路径时，cWebView2Host 自动将其映射为 WebView2 可访问的资源。

2. 本地 HTML 页面 (www/index.html)

www/index.html 是一个完整的单页网站，包含：

• SVG Logo 和品牌展示
• CSS 动画和过渡效果
• IntersectionObserver 滚动显示效果
• 响应式布局
• 完整的现代 Web 页面特效

这证明了 WebView2 可以完美渲染复杂的现代 Web 内容。

功能说明

1. 文件夹路径自动映射

   • 传入 App.Path & "\www" 这样的本地路径
   • 内部自动映射为 http://vbman2.com/index.html
   • 页面内的相对路径（CSS、JS、图片）自动解析

2. 完整的 Web 能力

   • 支持 CSS3 动画和过渡
   • 支持 ES6+ JavaScript
   • 支持 IntersectionObserver 等现代 API
   • 支持 SVG 矢量图形

3. 零配置本地服务

   • 无需启动本地 HTTP 服务器
   • 无需配置文件或参数
   • 直接传入文件夹路径即可

技术要点

1. App.Path：VB6 运行时属性，返回 EXE 所在目录。使用 App.Path & "\www" 确保无论程序在哪里运行都能找到 HTML 文件

2. 路径映射原理：cWebView2Host 使用 WebView2 的 SetVirtualHostNameToFolderMapping API 将文件夹映射为虚拟主机名

3. 资源引用：HTML 中的相对路径引用（如 <link href="style.css">, <script src="app.js">）都能正常工作

4. 协议限制：文件夹映射模式使用 http:// 协议，如果需要 https:// 协议，请手动调用 SetVirtualHostNameToFolderMapping

应用场景

1. 桌面应用内嵌帮助文档
2. 离线 Web 应用（无需远程服务器）
3. 数据可视化仪表盘
4. 丰富的 UI 界面使用 HTML/CSS/JS 实现

扩展建议

1. 使用 SetVirtualHostNameToFolderMapping 可指定自定义域名和 https 协议
2. 本地 HTML 可以通过 window.chrome.webview.postMessage 与 VB6 通信
3. 结合 BindUI/BindData 实现本地 HTML 界面与 VB6 数据的双向交互