VB.NET Edge webview2 引入

一、前言

继微软抛弃IE浏览器全面拥抱Chromium内核推出Edge浏览器后，一直在关注那老旧的webbrowser未来如何发展。虽然编程语言千千万，也有人不看好winform编程，但在当前windows依旧占据相当的市场份额。在webbrowser中官方支持的是IE内核，而IE内核又跟你的电脑的安装版本有关系，再加上IE对各种html前端支持的不友好。vuejs都已经彻底抛弃了IE浏览器，迟迟不敢在生产环境大量应用vueweb应用。（有人可能会说可以换webkit或者cesharp内核，笔者也尝试过，但毕竟不是微软的亲生，各种不友好，各种复杂,webkit都多久没更新了，根据历史经验过于复杂的东西一般很难长久）。       之前关注过webview2,但那段时间刚出支持也不是很友好，无法很有效继承，有说要安装edge浏览器的，又说要安装别的，而win7可能又不支持等等，而恰好我们的场景用又存在大量的win7，只能暂时放弃。        最近要应用Vue，重新关注了一下相关应用，很惊喜的发现，webview2有了官方比较好的支持（可能早就有了，但是肯定不会超过1年）微软官方文档链接
 如果本文有不对的地方还要以官方文档为准，研究不深。先说体验效果，webview2真的很好，内核彻底替换为chromium,Vue项目跑起来了也不用担心各种不兼容了，终于不用为webbrowser担忧了。由于项目使用的VB.NET(不要问为甚么不是C#,我会一点，但是用不到），因此考虑到系统中的使用还是集成到了VB.NET中，在搜索过程中发现webview2的资料不多，一些属性还没有很好的案例，可能与winform的没落有关系吧，而且相关介绍均是C#的，也包括官方文档。因此在基本集成以后，通过这篇文章做简单分享与记录。这里的集成比较简单，主要是满足WEB和客户端的混合编程，也是webview2介绍中的重要应用之一，毕竟WEB才是管理系统的未来。

二、Webview2 简单介绍

Webview2 加了个2可能是为了跟安卓的webview区分吧，毕竟一搜webview出来的全是安卓的。

Webview2支持win7、win8、win10以及对应的server版本，可以说是涵盖了windows的江山，具体的版本说明可以参考官方文档。如果你说还有xp，天就被聊死了，我们不是一路人。

从搜到的帖子看大家对于webview2还是持肯定态度的，比webkit，cefsharp的兼容性要好的多，从我的体验来讲它可以完全替代webbrowser控件，正在生产环境中替代原有webbrowser控件。

三、环境配置

Webview2虽然没有了IE一堆乱糟糟的版本问题，但是Webview2毕竟是依赖与Edge诞生的产品，它依然需要一定的环境，微软提供了2种方案。

Webview2 runtime 运行时环境，分为x86,x64,arm版本，按照对应版本下载即可，通过实测在64位安装x86版本也可以使用，但还是建议按照对应版本安装。在前面给到的微软官方链接可以安装

Microsoft Edge 预览体验成员（预览版） 注意不是我们附带的发布版的edge，是单独的预览版，有3款可以选择，官方建议candy版天天更新。
这里选择的是Webview2 runtime毕竟我们是集成环境，这里可以根据需要选择。

开发工具要求VS2017以上，案例使用的vs2017

.net版本 有说要4.6.2以上的，官方文档选的4.7.2。案例实测4.5.2中可用。

四、进入正题

官方文档是C#的比较简单，C#er们自行阅览即可，毕竟在大神面前我只是个渣渣。

1、引入Webview2

在"解决方案资源管理器"中，右击项目名称，然后选择"管理 NuGet 包

在搜索栏中，键入并单击"Microsoft.Web.WebView2"。WebView2

工具箱中就有了webview2控件了，拖拽即可，不过多解释

2、关键方法、事件

导航方法（链接跳转）

WebView21.CoreWebView2.Navigate(im_ipurl)

自动检测安装Webview2 runtime

(放在WebView21_CoreWebView2InitializationCompleted事件中）

   Function installruntime()
        Try
            Dim v As String = WebView21.Source.ToString
            Me.Text = ("Copyright © 2021-2022 lxfamn, All Rights Reserved " )
        Catch ex As Exception
            If Environment.Is64BitOperatingSystem Then
                MsgBox("系统全面升级浏览器内核，接下来系统将自动为您安装补丁，请在弹出窗口选运行，64位系统")
                Process.Start("\\运行组件共享路径\webruntime\X64.exe")
            Else
                MsgBox("系统全面升级浏览器内核，接下来系统将自动为您安装补丁，请在弹出窗口选运行，32位系统")
                Process.Start("\\运行组件共享路径\webruntime\X64.exe")
            End If

        End Try
    End Function

   Private Sub WebView21_CoreWebView2InitializationCompleted(sender As Object, e As CoreWebView2InitializationCompletedEventArgs) Handles WebView21.CoreWebView2InitializationCompleted
        installruntime()
        WebView21.CoreWebView2.Navigate(im_ipurl & "/home")

    End Sub

NavigationCompleted 相当于webbrowser  documnentcomplete事件

事件执行流程如下图所示：

3、最关键、复杂的流程

webview与主机程序的交互过程，在原有的webbrowser中在WebBrowser1_DocumentCompleted事件中通过对WebBrowser1.DocumentText的解析可以做进行不同的处理。

CoreWebView2 是webview2下的一个核心方法，感觉像是内核中的一些方法
在webview2中没有了上述事件和方法，取而代之的是postMessage，官方案例使用的C#，使用了aysn异步绑定等方式。

简单可以理解为，提供了WebView21.CoreWebView2.ExecuteScriptAsync和WebView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync方法，向站点注入javasript程序来实现相关功能，这里我只使用了ExecuteScriptAsync方法，在NavigationCompleted事件，在页面加载完成后向主机发送消息，WebView21_WebMessageReceived 事件中接受发送的消息。

```vb
Private Sub WebView21_NavigationCompleted(sender As Object, e As CoreWebView2NavigationCompletedEventArgs) Handles WebView21.NavigationCompleted
TextBox1.Text = WebView21.Source.ToString()'导航完成后，在标题栏中显示当前网址
If (TextBox1.Text.Contains("www.microsoft.com")) Then
WebView21.CoreWebView2.Navigate("https://blog.lxfamn.cn/?cat=101"😉
End If
WebView21.CoreWebView2.ExecuteScriptAsync("window.chrome.webview.postMessage(document.body.innerHTML);")
End Sub

Private Sub WebView21_WebMessageReceived(sender As Object, e As CoreWebView2WebMessageReceivedEventArgs) Handles WebView21.WebMessageReceived
    webdeal(e.WebMessageAsJson.ToString)'根据接收的消息进行逻辑处理
End Sub

### 4、其他的一些

建议结合官方文档进行阅览，理解一些方法和规则，一些方法和过程在官方文档中解释还是比较清楚的，本文主要是帮助解释一些在vb.net以及一些逻辑等问题的解释。

附上一些处理url自动补充前缀的方法

```vb
 Function geturl(dealway As String)
        Try
            Dim urlstr As String = TextBox1.Text
            If Not urlstr.Contains("http") Then
                Dim re As New Regex("((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}")
                Dim Contents As MatchCollection = re.Matches(urlstr)
                Dim rea As New Regex("[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+\.?")
                Dim Contentsa As MatchCollection = rea.Matches(urlstr)
                If Contentsa.Count > 0 Or Contents.Count > 0 Then

                    urlstr = "http://" & urlstr
                Else
                    If dealway = "百度" Then
                        urlstr = "https://www.baidu.com/s?wd=" & urlstr
                    End If
                    If dealway = "blog" Then
                        urlstr = "https://blog.lxfamn.cn/?cat=101"

                    End If

                End If
            End If
            WebView21.CoreWebView2.Navigate((urlstr))
        Catch
            installruntime()
        End Try
    End Function

界面布局

有问题之处欢迎指正

转载请注明： https://blog.lxfamn.cn/?p=6698

转载请注明出处:

转载自http://lxfamn.cn/blog

未经允许不得转载：lxfamn » VB.NET Edge webview2 引入