【WebView2】（五）虚拟主机之加载本地 HTML 资源

小渣渣

需求：假如客户机器无法访问外部 Web 网站（例如：基于 WebView2 做一个音乐播放器软件，在没有网络的情况下，也能正常使用播放本地歌曲），WebView2 就无法访问外网资源无法显示，从而使软件无法正常工作，如何将 HTML、CSS、JS 资源嵌入到安装包里面，使 WinFrom 程序加载客户本地文件资源呢？将 HTML、CSS、JS 代码打包进安装包还有一个优势是不会受到用户网速的影响，因为 WebView2 是直接读取客户本地的文件。

回顾：

【WebView2】（一）初识 Microsoft Edge WebView2 技术
https://www.itsvse.com/thread-10361-1-1.html

【WebView2】（二）WinForm 引入 WebView2 显示 Web 内容
https://www.itsvse.com/thread-10362-1-1.html

【WebView2】（三）Web 与 WinForm 应用程序双向通信
https://www.itsvse.com/thread-10364-1-1.html

【WebView2】（四）Web 与 WinForm 相互调用函数方法
https://www.itsvse.com/thread-10365-1-1.html

Angular 编译打包

前端使用 angular 框架开发，通过如下命令打包：

登录可见。

打包生成了 HTML、CSS、JS 文件，如下图：




WinFrom 虚拟主机和文件夹映射

使 WebView2 能够正常加载本地 Web 资源，需要使用 SetVirtualHostNameToFolderMapping 设置域名和文件夹的映射关系，然后通过 WebView2 访问设置的域名，参考：https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.web.webview2.core.corewebview2.setvirtualhostnametofoldermapping?view=webview2-dotnet-1.0.1343.22

主机名规则：RFC 6761保留了几个保证不会被真实站点使用的特殊用途域名（例如.example、.test和.invalid）。请注意，使用.local作为顶级域名是可行的，但在导航过程中可能会导致延迟。如果可以的话，应该避免使用.local。

c# 代码如下：

登录可见。

其中 SetVirtualHostNameToFolderMapping 第二个文件夹参数应该使安装包释放 Web 资源到本地磁盘文件夹的地址，我这里只是测试，所以写死了。

运行 WinFrom 程序，可以成功加载和渲染本地的 Web 资源，如下图：



（完）

落月天涯

感谢大佬分享，正在学习