.NET 6 上的 WebView2 体验

侠醉穆

前言
上次说为了不想在web端登录博客园，我想着还是继续使用MarkWord编写博客，不过在使用的过程中，如果markdown文件的目录中有中文的话，Markdown预览就不能够显示粘贴的图片了，原因是之前.NET Framework的WeBrowser库太老了，应该升级一下。
替换WebBrowser的方案很多，在Stackoverflow上有人推荐使用WebView2，我就直接用了，也没有多想，实际上使用的问题还是不少的，简单记录一下。
WebView2
这个东西是微软推出基于Edge或者说是基于chromium内核的浏览器组件，可以提供现代的浏览器体验，用于集成到.NET程序中，实现.NET对web的访问与调用，或者反过来也行。这个东西感觉是CefSharp的有利竞争者呀，虽然我也没咋用过CefSharp。
WebBrowser->WebView2
迁移的第一步是引用的替换，WebBrowser在System.Windows.Forms.WebBrowser命名空间，如果使用WPF的话，需要使用WindowsFormsHost，这个就体验不是那么好了，WPF下，有Microsoft.Web.WebView2.Wpf，可以提供给WPF原生的访问，赞一个。
访问DOM
然后就是出现的错误了，最难受的是，WebView2不提供对DOM的访问权限！，WebBrowser可以直接通过Document来访问DOM节点，而WebView2只能设置访问的Uri信息，然后控制导航与调用js。
为了实现动态的控制预览框的内容，访问DOM是必须的，如果我动态的渲染一个文件，然后随时再构造Uri，再传递到WebView2中，那太啰嗦了。由于这个东西可以直接调用JS，那么我们换一个思路：通过WebView2调用JS，然后使用Js操作DOM，曲线实现控制DOM的目标。废话不多说，直接上代码。
if(winWebDoc.CoreWebView2==null)return;varscript="document.body.innerHTML='"+Markdown.ToHtml(MarkValue,pipeline).Trim()+"'";winWebDoc.ExecuteScriptAsync(script);

之前我也尝试过document.write的方法，发现有点问题，还是不能正常识别。

WebView2除了直接在传递js的函数体以外，还可以调用页面中的顶级JS函数，具体使用方法参见后面的参考文献或者园子里面的这篇文章，反正我这么使用之后中文目录的问题就解决了，不过右侧渲染如果有回车换行的话，就经常会卡死，好像是引擎就崩溃了。
替换默认换行
经过debug，发现WebView2在运行的过程中，需要渲染的html内，标签之间不能有\r\n之类的东西，如果有就寄了。而使用CommonMark.CommonMarkConverter.Convert方法转换的markdown文件都会有这个东西...
这个库时间也比较久远了，经过简单研究，我换成了Markdig这个库，二者兼容，而且Markdig还提供了更多定制的地方，我这里将所有的换行，替换为空字符。
privateMarkdownPipelinepipeline=newMarkdownPipelineBuilder().ConfigureNewLine("").Build();这样，换行就没啥问题了，但是在初次使用时，会出现WebView2无法正常渲染的问题。
WebView2初始化
WebView2的初始化和其他的库有点不同，它提供了一个EnsureCoreWebView2Async的方法，对它的操作，请一定等这个方法返回。可以使用await，也可以和我一样，使用TPL。
winWebDoc.EnsureCoreWebView2Async().ContinueWith(t=>{Dispatcher.Invoke(()=>{winWebDoc.Source=newUri(System.IO.Path.Combine(Environment.CurrentDirectory,"index.html"));});});注意我这里使用加载了一个本地的模板HTML文件，访问本地文件的时候，需要使用Uri的方式访问。
结语
经过了一番折腾，终于是能够继续使用MarkWord写博客了，虽然我更换了主题之后，滚动不是很利索了，另外渲染代码换行好像还有点问题，不过好歹能用了，以后再折腾吧。

P.S. WebView2可以通过更简单的方法直接访问网页，使用NavigateToString方法可以直接设置全局的document。

参考资料

非常详细：

• https://weblog.west-wind.com/posts/2021/Jan/14/Taking-the-new-Chromium-WebView2-Control-for-a-Spin-in-NET-Part-1
  
• https://weblog.west-wind.com/posts/2021/Jan/26/Chromium-WebView2-Control-and-NET-to-JavaScript-Interop-Part-2
  

转自：波多尔斯基
链接：http://cnblogs.com/podolski/p/16199151.html

一豪

大人，此事必有蹊跷！