.Net WebView2 项目,实现 嵌入 WEB 页面 Chromium内核

本文介绍了如何利用WebView2在C# WinForms项目中构建小型且功能丰富的应用程序。通过详细步骤,展示了从安装WebView2运行时、引入Nuget包到实现网页加载、自适应布局、执行JS脚本以及开启开发者工具的过程。此外,还提供了代码示例和下载链接,帮助开发者快速上手WebView2的使用。
摘要由CSDN通过智能技术生成

        WebView2 项目得天独厚,有微软操作系统win10以及win11的加持,最起码,生成的项目文件是很小的,我这边是3.6M,相对于CefSharp项目动辄100M的大小来讲,大大降低分发的大小,所以还是值得深入研究一下的。

开发需要的条件

1.运行时:WebView2 - Microsoft Edge Developer

       

通过控制面板,我们也能看到已经安装了这个运行时了。

没有的话,需要上边的那个地址下载安装。

具体地址:https://go.microsoft.com/fwlink/p/?LinkId=2124703https://go.microsoft.com/fwlink/p/?LinkId=2124703

也可以通过 csdn下载:MicrosoftEdgeWebview2Setup-C#文档类资源-CSDN下载MicrosoftEdgeWebview2Setup是微软Edge游览器的webview2更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/kesshei/85398248

2.Nuget包

需要引入以下Nuget包

Microsoft.Web.WebView2

安装好之后,我这里默认是使用的WinFrom UI框架。

案例参考:https://github.com/MicrosoftEdge/WebView2Samples

官方案例:WebView2Samples-C#文档类资源-CSDN下载

新建项目 (winfrom 作为参考)

如果没有出现WebView2可以重启一下项目就会有了

同时,为了方便看,我们把Dock属性选为Fill 全填充就好了

这个时候,我们添加一下的基础环境代码,就可以让页面启动了。

 public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
            Resize += new EventHandler(Form_Resize);
            webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;
            Initialize();
        }
         /// <summary>
         /// 实现自适应页面缩放
         /// </summary>
        private void Form_Resize(object sender, EventArgs e)
        {
            webView21.Size = ClientSize - new Size(webView21.Location);
        }
        /// <summary>
        /// webview 加载完毕
        /// </summary>
        private void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
            webView21.CoreWebView2.Navigate("https://www.baidu.com/");
        }
        /// <summary>
        /// WebView2初始化
        /// </summary>
        async void Initialize()
        {
            var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);
            await webView21.EnsureCoreWebView2Async(result);
        }
    }

 这个页面可以自由的拉伸,十分的方便。

其中这一行,在本地Cache增加了,这个时候,如果你登录了账号,你重启,账号还是存在的,因为数据存到本地缓存了。

var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);
webView21.CoreWebView2.OpenDevToolsWindow();

 开启开发者工具 (可以通过右键,检查页面实现打开开发者工具)

然后,我们要执行js脚本了,准备输入一个内容,然后,点击搜索。

实现这个功能,需要新增一个按钮

添加以下脚本即可

        /// <summary>
        /// 点击按钮
        /// </summary>
        private async void button1_Click(object sender, EventArgs e)
        {
            //开启开发者工具 (可以通过右键,检查页面实现打开开发者工具)
            // webView21.CoreWebView2.OpenDevToolsWindow();

            //填充搜索内容
            await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#kw').value='1234'");
            //启动搜索
            await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#su').click();");
        }

这个是实现的效果 

 至此,我们已经实现了一个完成的WebView2的 项目案例。

下边是相应的代码下载地址:

补增一个gitee的地址:

https://gitee.com/kesshei/web-view2-demo.giticon-default.png?t=M4ADhttps://gitee.com/kesshei/web-view2-demo.gitWebView2Demo-C#文档类资源-CSDN下载这个是以winfrom为基础UI框架,做的一个关于c#WebView2的demo。更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/kesshei/85398785

以及百度网盘地址:

链接:https://pan.baidu.com/s/1Uhtxk4mWidasgBA9Bltd1w 
提取码:7o05 
--来自百度网盘超级会员V8的分享

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝创精英团队

你的支持是我最大的动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值