使用 VebView2，在C#WinForm中显示前端效果，做到C#与js通讯

最新推荐文章于 2024-09-25 17:01:35 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2024-09-25 17:01:35 发布

阅读量6.5k

点赞数 4

分类专栏： c# html 文章标签： c# html vue js

本文链接：https://blog.csdn.net/yueqin0512/article/details/115787248

版权

本文介绍了如何在C# WinForm应用中使用WebView2控件，展示前端HTML（如Vue）效果，并实现C#与JavaScript的通信。首先通过NuGet安装WebView2，然后在窗体中添加必要的控件，设置URL，实现页面跳转。接着，展示了如何在HTML文件中添加交互功能，并在C#中注入JavaScript代码，确保点击按钮时能触发HTML中的响应。最后，通过实例说明了WebView2在WinForm中的应用。

摘要由CSDN通过智能技术生成

VebView2控件的使用

下载Microsoft Edge Can
新建winForm窗体项目
点击项目->管理NuGet程序包->浏览（WebView2）->安装
在窗体中添加TextBox（addressBar）,Button(goButton),VebView2(webView)
更改webView控件的source属性,设置默认路径url:https://blog.csdn.net/Yueqin0512
给按钮添加点击事件
在Form1.cs添加引用using Microsoft.Web.WebView2.Core;,并添加如下代码

        public Form1()
        {
   
            InitializeComponent();
            this.Resize += new System.EventHandler(this.Form_Resize);

            webView.NavigationStarting += EnsureHttps;
            InitializeAsync();
        }

        private void Form_Resize(object sender, EventArgs e)
        {
   
            webView.Size = this.ClientSize - new System.Drawing.Size(webView.Location);
            goButton.Left = this.ClientSize.Width - goButton.Width;
            addressBar.Width = goButton.Left - addressBar.Left;
        }

        private void goButton_Click(object sender, EventArgs e)
        {
   
            if (webView != null && webView.CoreWebView2 != null)
            {
   
                webView.CoreWebView2.Navigate(addressBar.Text);
            }
        }


        private void