C# Winform 中使用 Webview2

这篇具有很好参考价值的文章主要介绍了C# Winform 中使用 Webview2。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

目前的windows/Linux下的UI方案,以Qt为主,Flutter, Electron为辅,其他的各种UI都是不堪大用。众所周知,Electron的资源占用和内容占用太大,效率不行,所以有了后续各种跨语言的Web套壳方案:

  • walls go语言下web套壳
  • tarui Rust下的web套壳

除了使用CEF的Qt/C++/C#方案,Qt+WebEngine, 目前在Windows下各家的最终归路都转向Webview2方案,可以极大地减少发布的程序的大小。

备注:

  1. VS2019支持.Net Framework(~4.8), 对于Net Core 3 和Net 5 支持并不是很完善,并且已过了维护期
  2. VS2022对Net 6, 7以及Net Framework 4.8 的支持都很完善,建议使用此搭配

C# Winform下Webview2方案Demo

.Net Framework 使用4.8

UI Form核心Code:

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace webview
{
    public partial class Form1 : Form
    {
        private webTool tool;

        public Form1()
        {
            InitializeComponent();
            // https://blog.csdn.net/bashendixie5/article/details/126432821
            tool = new webTool(ref webView2_main);
            initWebview2();
        }

        private async void initWebview2()
        {
            var userData = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), Application.ProductName);
            var env = await Microsoft.Web.WebView2.Core.CoreWebView2Environment.CreateAsync(null, userData);
            await webView2_main.EnsureCoreWebView2Async(env);
            //webView2_main.CoreWebView2InitializationCompleted += WebView2_main_CoreWebView2InitializationCompleted;

            // title 发生变化时
            webView2_main.CoreWebView2.DocumentTitleChanged += CoreWebView2_DocumentTitleChanged;
            // 有新的网页请求时, 拦截
            webView2_main.CoreWebView2.NewWindowRequested += CoreWebView2_NewWindowRequested;

            // add binding with C#
            webView2_main.CoreWebView2.AddHostObjectToScript("tool", tool);
        }

        private void CoreWebView2_NewWindowRequested(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NewWindowRequestedEventArgs e)
        {
            var defer = e.GetDeferral();
            e.Handled = true; 
            webView2_main.Source = new Uri(e.Uri);
            // 或者新开一个windows
            //e.NewWindow = webView2_main.CoreWebView2;
            defer.Complete();
        }

        private void CoreWebView2_DocumentTitleChanged(object sender, object e)
        {
            Text = webView2_main.CoreWebView2.DocumentTitle;
        }

        private void button_go_Click(object sender, EventArgs e)
        {
            webView2_main.Source = new Uri(textBox_url.Text.Trim());
        }

        private void button_back_Click(object sender, EventArgs e)
        {
            if(webView2_main.CanGoBack) webView2_main.GoBack();
        }

        private void button_forward_Click(object sender, EventArgs e)
        {
            if (webView2_main.CanGoForward) webView2_main.GoForward();
        }

        private void button_test_Click(object sender, EventArgs e)
        {
            var a = new Dictionary<string, object>();
            a["123"] = "xxxyy";
            a["abc"] = 15.23;
            a["0"] = true;
            tool.callJs(a);
        }
    }
}

依赖的object必须实现COM接口:

using Microsoft.Web.WebView2.WinForms;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

// https://learn.microsoft.com/zh-tw/dotnet/api/microsoft.web.webview2.core.corewebview2.addhostobjecttoscript?view=webview2-dotnet-0.9.628-prerelease

namespace webview
{
    [ClassInterface(ClassInterfaceType.AutoDual)]
    [ComVisible(true)]
    public class webTool
    {
        private WebView2 web;

        public webTool(ref WebView2 web)
        {
            this.web = web;
        }
        public void msg(string txt)
        {
            MessageBox.Show(txt, "By Form", MessageBoxButtons.OK, MessageBoxIcon.Warning);
        }
        public void callJs(object args)
        {
            string js = $"console.log({JsonConvert.SerializeObject(args)})";
            web.ExecuteScriptAsync(js);
        }
    }
}

html Demo参考:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS with C# Demo</title>
</head>
<script>
    var tool = window.chrome.webview.hostObjects.tool;
    function call_C(){
    console.log(tool);
    tool.msg("hello, i am from web ui");
    alert("ok");
    }
</script>
<body>
    <button onclick="call_C()">Call C# Code with message</button>
    <pre>
    var tool = window.chrome.webview.hostObjects.tool;
    function call_C(){
        console.log(tool);
        tool.msg("hello, i am from web ui");
        alert("ok");
    }
</pre>
</body>


</html>

程序Setup打包

对于打包程序,使用Visual Studio Setup Installer Project创建,参考:

  • Unistall 提供
  • 手动拖动文件夹可以快速添加
  • 需要手动判断需要的文件
  • Program File一般无写权限,使用AppData/Local/xxx作为自己的程序数据目录

参考文章:

  • https://www.pianshen.com/article/14091375659/
  • https://blog.csdn.net/jk_rou/article/details/130307402
  • https://betheme.net/yidongkaifa/72139.html?action=onClick

Webview2 控件找不到

如果遇到Webview2控件在Toolbox的工具箱中找不到,可以考虑下面2个方案:

  1. 检查webview2的版本依赖,一般有对应Edge版本要求,所以,升级Edge就好了
  2. 当前Webview2安装包没有你使用的net framework/net core版本,但是实际上还是可以用的,参照如下方法,手动添加到工具箱就可以啦。
**Solution**

I found the solution for adding the WebView2 control to the toolbox on the GitHub site you provided, post is [here](https://github.com/MicrosoftEdge/WebViewFeedback/issues/323). Here are the details of the solution for others to follow:

- Right-click on the toolbar in Visual Studios
- Select 'Choose Items...'
- Click the '.NET Framework Components' tab
- Click 'Browse', may have to wait for scan to finish
- Navigate to '<your-solution-folder>\\packages\\Microsoft.Web.WebView2.0.9.538-prerelease\\lib\\net462'
- Select the correct DLL for your application type
- Once the file is selected click the 'OK' button in the window

Done! Now you can access the WebView2 control in the toolbox. If you're using .Net Core then try replacing 'net462' with 'netcoreapp3.0' in the folder path.

注意:文章来源地址https://www.toymoban.com/news/detail-522409.html

  1. Webview2目前并不是支持所有的net framework!!!
  2. 如果遇上Webview2安装完成后在ToolBox不显示问题,需要检查Edge浏览器版本。还要核对你使用的net framework版本。参考这里:https://www.nuget.org/packages/Microsoft.Web.WebView2#supportedframeworks-body-tab。
  3. 如果你用net 4.8 可以考虑手动添加net 4.5的dll使用,木有问题。但是net core 6/7 使用 3的dll肯定是不行的

到了这里,关于C# Winform 中使用 Webview2的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 一.Winform使用Webview2(Edge浏览器核心) 创建demo(Demo1)实现回车导航到指定地址

    往期相关文章目录 专栏目录 WinForms 应用中的 WebView2 入门 按照官方文档一路操作,可以自行百度或者查看WinForms 应用中的 WebView2 入门。为了避坑,本人安装的时vs2022(visual studio 以下简称vs) 打开vs(visual studio 以下简称vs) 点击 创建新项目 ,选择 C# Windows 窗体应用 (.NET Framework

    2024年02月21日
    浏览(40)
  • c#使用webView2 访问本地静态html资源跨域Cors问题

    在浏览器中访问本地静态资源html网页时,可能会遇到跨域问题如图。   是因为浏览器默认启用了同源策略,即只允许加载与当前网页具有相同源(协议、域名和端口)的内容。 WebView2默认情况下启用了浏览器的同源策略,即只允许加载与主机相同源的内容。所以如果我们把

    2024年02月20日
    浏览(46)
  • net中winform教程 浏览器控件,还是微软的WebView2最好用

    如果想在Winform项目中使用浏览器控件,可能想到的第一个控件就是微软自带的WebBrowser,可这个不争气的家伙,从出现到现在,没有一丁点的升级,即使身为Net程序员,也不得不对它竖起了中指。不过,好在微软迷途知返,提供了升级控件,才算摆平。不然让Google的Cef控件抢

    2024年02月11日
    浏览(49)
  • WPF混合开发之WebView2(二) WebView2的简单使用

    在上一篇文章中,我们介绍了WebView2的环境搭建,点此前往,在这一章节,我们将使用WebView2简单搭建一个WPF程序,在程序中加载百度搜索页面,废话不多说,直接上流程。 建立WPF工程 建立WPF工程步骤很简单,在此不再截图,直接上步骤: 打开Visual Stido 2022(博主使用的是vs

    2024年02月05日
    浏览(71)
  • c#使用webView2 访问本地静态html资源跨域Cors问题 (附带代理服务helper帮助类)

    在浏览器中访问本地静态资源html网页时,可能会遇到跨域问题如图。   是因为浏览器默认启用了同源策略,即只允许加载与当前网页具有相同源(协议、域名和端口)的内容。 WebView2默认情况下启用了浏览器的同源策略,即只允许加载与主机相同源的内容。所以如果我们把

    2024年02月21日
    浏览(40)
  • WPF中使用WebView2控件

    WebView2 全称 Microsoft Edge WebView2 控件,此控件的作用是在本机桌面应用中嵌入web技术(html,css,javascript),从名字就可以看出来WebView2使用了Edge内核渲染web内容。 通俗来说,WebView2控件是一个UI组件,允许在桌面应用中提供web能力的集成,即俗称的混合开发。 助力程序开发和

    2024年02月03日
    浏览(46)
  • 【小沐学C#】WPF中嵌入web网页控件(WebBrowser、WebView2、CefSharp)

    使用 Windows Presentation Foundation (WPF),你可以创建适用于 Windows 且具有非凡视觉效果的桌面客户端应用程序。 WPF 的核心是一个与分辨率无关且基于矢量的呈现引擎,旨在充分利用现代图形硬件。 WPF 通过一套完善的应用程序开发功能对该核心进行了扩展,这些功能包括可扩展应

    2024年02月03日
    浏览(55)
  • C++ 在Win32中简单使用WebView2

    Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎,以在本机应用中显示 web 内容。 使用 WebView2 可以在本机应用的不同部分嵌入 Web 代码,或在单个 WebView2 实例中生成所有本机应用。可以去官网查看具体

    2024年02月06日
    浏览(42)
  • WebView2 的初步集成与试用

    目录 一、环境概况 二、安装 三、集成测试  参考资料         由于以前公司自己集成了一个浏览器供客户使用,而原来的浏览器使用的是IWebBrowser2的技术,而IWebBrowser2技术支持的IE框架只能到ie11,但由于现在新的js框架横行,而且加上windows放弃了IE浏览器,而有的客户项目

    2024年02月05日
    浏览(45)
  • QT5 通过 webview2 加载网页

    官方文档参考:https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/get-started/win32 头文件主要为:WebView2和WixLibrary,存储在include/external 库主要为:WebView2LoaderStatic.lib和WebView2Loader.dll,存储在lib/external CMakeLists文件 base/set_env.cmake init_project.cmake base/set_compile_arg.cmake main函数 MainWindow函数

    2024年02月07日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包