首页 > 其他分享 >【WebView2】(二)WinForm 引入 WebView2 显示 Web 内容

【WebView2】(二)WinForm 引入 WebView2 显示 Web 内容

时间:2023-05-31 13:56:49浏览次数:47  
标签:Web webview2 microsoft WebView2 Microsoft WinForm

https://www.itsvse.com/thread-10362-1-1.html

需求:使用 VS 2022 新建一个 .NET Framework 4.7.2 的 WinForm 项目,引用 Microsoft.Web.WebView2 SDK 包,使用 WebView2 控件显示和渲染 Web 应用。Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎,以在本机应用中显示 web 内容。

回顾:

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


WebView2 运行时

如果您的 Windows 系统没有安装 WebView2 运行时(Windows 11 系统默认已经安装),第一次需要手动下载,地址:https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

新建 WinForm 项目

打开 VS 2022 新建一个 .NET Framework 4.7.2 的 WinForm 项目,创建后需要引用 Microsoft.Web.WebView2 包,nuget 命令如下:

作者加班熬夜写的,代码回复可见。


在工具箱中,找到 WebView2 Windows Forms Control 下的 WebView2 控件拖动到 Form1 窗体,如下图:

<ignore_js_op>

提示:默认情况下,在 Visual Studio 2017 中, WebView2 不会显示在工具箱中。 若要使 WebView2 在工具箱中显示,请选择 “工具 > 选项 > 常规 ”>并将 自动填充工具箱设置设置为 True。

设置 webView21 控件 Dock: Fill,Source:https://www.itsvse.com/,如下图:

<ignore_js_op>

启动项目,可以看到 WinForm 应用程序成功加载和显示 Web 内容,如下图:

<ignore_js_op>

WinForm 应用程序大小

大家最关心的其中一个问题就是应用程序的大小,新建一个 WinForm 应用程序引用 WebView2 SDK 后,几乎没写任何代码后的程序大小为:1.36M,如下图:


<ignore_js_op>

显示 WebView2 运行时版本

如何通过 .NET 程序获取系统是否安装 WebView2 运行时或者 WebView2 运行时的版本呢?代码如下:

作者加班熬夜写的,代码回复可见。


<ignore_js_op>

调用 GetAvailableBrowserVersionString() 方法异常,就代表没有安装 WebView2 运行时。


关于分发应用和 WebView2 运行时,参考:https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/concepts/distribution

启用开发者工具

通过需要将 Web 应用和 WinForm 进行联调的过程中,有时候需要看 dom 元素或者网络资源请求,如何启用开发者工具呢?

可以启动后在 webview2 控件使用 F12 方法打开 DevTools 开发者工具,或者使用如下代码打开:

作者加班熬夜写的,代码回复可见。

如下图:

<ignore_js_op>

禁用右击菜单和开发者工具

在实际的生产环境中,我们将应用程序客户端部署到客户机器上面的时候,不希望用户能够右击(刷新、查看网页源代码等操作),并且禁用开发者工具和网页缩放控制,代码如下:
<ignore_js_op>

作者加班熬夜写的,代码回复可见。

Microsoft.Web.WebView2.Core API 文档:https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.web.webview2.core?view=webview2-dotnet-1.0.1343.22
Microsoft.Web.WebView2.WinForms API 文档:https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.web.webview2.winforms?view=webview2-dotnet-1.0.1343.22

标签:Web,webview2,microsoft,WebView2,Microsoft,WinForm
From: https://www.cnblogs.com/Dongmy/p/17445903.html

相关文章

  • webgl 渲染带透明通道的视频(threeJS)
    首先,你需要一个这样的视频 或者一个这样的视频 webgl渲染可以用three.js,上下叠加的代码如下:import*asTHREEfrom'three';letvideoWidth=540;//视频实际的宽度letvideoHeight=540;//原视频实际的高度的一般//定义渲染器varrenderer=new......
  • C# WebApi接收参数的常用方式
    C#后端开发请求相关知识C#WebApi接收参数的常用方式查询字符串参数:查询字符串是通过HTTPGET请求中的URL中传递的键值对。在WebAPI中,可以使用以下方式获取查询字符串参数://使用Request.QueryString获取单个查询字符串参数stringname=Request.QueryString["name......
  • WEB漏洞—SQL注入之加解密,二次,DNS等注入
    1、加解密注入sqli-labs-master(LESS-21)靶机示例数据包抓包,找到cookie数据包Cookie:uname=YWRtaW4%3D%3D是URL编码里的=,所以直接改为等号,在base64里解密这里想要注入直接写and1=1不现实,对admin'and1=1加密后再提交给数据包这里直接报错注入,在这之前需要Base64加密......
  • 如何使用WebGL绘制图片
    1.获取画布元素:首先需要获取到HTML中的canvas元素,这个元素将作为WebGL渲染的目标。2.获取WebGL上下文:使用canvas元素的getContext()方法获取WebGL上下文,这个上下文是WebGL渲染的核心。3.创建顶点数据:WebGL渲染需要定义顶点数据,这些数据描述了要绘制的形状。在这里,我们需要创建一......
  • WebClient发送get、post请求(form、json)(功能封装)
    1.情景展示Spring3.0引入了RestTemplate,但是在后来的官方源码中介绍,RestTemplate有可能在未来的版本中被弃用,所谓替代RestTemplate,在Spring5中引入了WebClient作为非阻塞式ReactiveHttp客户端。WebClient处理单个HTTP请求的响应时长并不比RestTemplate更快,但是它处理并发的能......
  • JavaWeb
    JavaWeb1、基本概念1.1、前言web开发:web,网页的意思静态webhtml,css提供给所有人看的数据始终不会发生变化动态web几乎所有的网站都是动态的提供给所有人看的数据始终会发生变化,每个人在不同的时间,不同的地点看到的信息各不相同技术栈:Servlet/JSP,ASP,PHP在Java中......
  • webpack5功能升级
    webpack5此版本重点关注以下内容:通过持久缓存提高构建性能.使用更好的算法和默认值来改善长期缓存.通过更好的树摇和代码生成来改善捆绑包大小.清除处于怪异状态的内部结构,同时在v4中实现功能而不引入任何重大更改.通过引入重大更改来为将来的功能做准备,以使我们能够尽......
  • vues全局使用WebSocket
    //import{showInfoMsg,showErrorMsg}from'@/utils/popInfo'//importElementUIfrom'element-ui';import{Toast}from'vant';functioninitWebSocket(baseObj){console.log(baseObj)//constwsUri=WS_API+&quo......
  • windows web服务器代码移植到linux所采的坑
    windowsweb服务器代码移植到linux所采的坑一、导入问题不能直接将编译后的class文件放入linux服务器中,虽说java是跨平台性好,但是windows下的class文件是不能在linux下直接运行的.二、编译问题1.编码问题在linux端编译代码时,最先遇到的就是编码问题,默认是按ACSII码编译的,不行......
  • laravel实现调用 webservice 接口
    1、打开php.ini  放开soap  2、代码实现 ......