C# winform webview2的使用--初体验（生成单e

开发工具 vs2019
项目框架 .NET Core3.1

1.安装WebView2 Runtime,添加Nuget包 Microsoft.Web.WebView2

image.png

2.拖拽WebView2控件到winform窗体上

image.png

3.可视化属性界面直接修改winform和webview2的属性值,修改属性值的代码会在窗体初始化方法里显示

winform属性值

image.png

webview2属性值

image.png

           // 
            // webView21
            // 
            this.webView21.CreationProperties = null;
            this.webView21.DefaultBackgroundColor = System.Drawing.Color.White;
            //充满整个winform
            this.webView21.Dock = System.Windows.Forms.DockStyle.Fill;
            this.webView21.Location = new System.Drawing.Point(0, 0);
            this.webView21.Name = "webView21";
            this.webView21.Size = new System.Drawing.Size(1184, 661);
            //设置url
            this.webView21.Source = new System.Uri("https://wenhui.link/authpage", System.UriKind.Absolute);
            this.webView21.TabIndex = 0;
            this.webView21.ZoomFactor = 1D;
            this.webView21.CoreWebView2InitializationCompleted += new System.EventHandler<Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs>(this.webView21_CoreWebView2InitializationCompleted);

            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(7F, 17F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(1184, 661);
            this.Controls.Add(this.webView21);
            this.FormBorderStyle = System.Windows.Forms.FormBorderStyle.FixedSingle;
            this.Icon = ((System.Drawing.Icon)(resources.GetObject("$this.Icon")));
            this.MaximizeBox = false;
            this.MinimumSize = new System.Drawing.Size(1200, 700);
            this.Name = "Form1";
            this.Text = "触点通";
            this.WindowState = System.Windows.Forms.FormWindowState.Maximized;
            ((System.ComponentModel.ISupportInitialize)(this.webView21)).EndInit();
            this.ResumeLayout(false);

4.webView2与JS交互
给webView2添加事件，点击闪电，为CoreWebView2InitializationCompleted添加事件（之前数据交互在窗体构造函数中async调用，webbview2第一次打开总是取不到数据，于是就将传值操作写在CoreWebView2InitializationCompleted事件中，亲测可用）

image.png

private void webView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
        {
           
            //webview和js交互
            var macadress = "这是个栗子";
            webView21.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(@"var macadress='" + macadress + "'");

            //开启开发者工具
            //webView21.CoreWebView2.OpenDevToolsWindow();
            //禁止dev菜单
            //webView21.CoreWebView2.Settings.AreDevToolsEnabled = false;
            //禁止所有菜单
            //webView21.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;

        }

5.重写关闭按钮，提示确定删除+改变窗口大小时webview2跟着改变

       //重写关闭按钮
        protected override void WndProc(ref Message msg)
        {
            const int WM_SYSCOMMAND = 0x0112;
            const int SC_CLOSE = 0xF060;
            if (msg.Msg == WM_SYSCOMMAND && ((int)msg.WParam == SC_CLOSE))
            {
                // 点击winform右上关闭按钮 
                // 加入想要的逻辑处理
                MessageBoxButtons mess = MessageBoxButtons.OKCancel;
                DialogResult dr = MessageBox.Show("确定要退出系统吗？", "提示", mess);
                if (dr == DialogResult.OK)
                {
                    Application.Exit();
                }
                return;
            }
            base.WndProc(ref msg);
        }

      //改变窗口大小时webview2跟着改变
       private  void Form_Resize(object sender, EventArgs e)
        {
            this.webView21.Dock = System.Windows.Forms.DockStyle.Fill;
        }

6.发布单exe可执行程序

image.png
image.png
image.png
image.png
image.png image.png