百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

VB.NET Edge webview2 引入

yuyutoo 2025-02-15 18:03 1 浏览 0 评论

一、前言

继微软抛弃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 - Microsoft Edge Developer

如果本文有不对的地方还要以官方文档为准,研究不深。先说体验效果,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
事件中接受发送的消息。

  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自动补充前缀的方法

 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

界面布局

有问题之处欢迎指正

个人博客:VB.NET Edge webview2 引入-IT涉猎者

未经允许不得转载:https://blog.lxfamn.cn/?p=6698

相关推荐

史上最全的浏览器兼容性问题和解决方案

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

平面设计基础知识_平面设计基础知识实验收获与总结
平面设计基础知识_平面设计基础知识实验收获与总结

CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

2025-02-21 16:01 yuyutoo

写作排版简单三步就行-工具篇_作文排版模板

和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

写一个2048的游戏_2048小游戏功能实现

1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

  最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

柠檬科技肖勃飞:大数据风控助力信用社会建设

...

你的自我界限够强大吗?_你的自我界限够强大吗英文

我的结果:A、该设立新的界限...

行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

2025-02-21 16:00 yuyutoo

今年国家综合性消防救援队伍计划招录消防员15000名

记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

一起盘点最新 Chrome v133 的5大主流特性 ?

1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

style="text-align:center;"data-mce-style="text-align:...

学物理能做什么?_学物理能做什么 卢昌海

作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

你不知道的关于这只眯眼兔的6个小秘密
你不知道的关于这只眯眼兔的6个小秘密

在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

2025-02-21 16:00 yuyutoo

取消回复欢迎 发表评论: