【WinForm】WebView2-个性化浏览器-桌面程序开发详解

2023-11-16

这是一个桌面程序上的浏览器,是用插件WebView2开发的浏览器桌面程序,功能体验堪比Edge浏览器,相比使用Chrome内核插件开发浏览器来说,还是用插件WebView2开发来得简单一些,接下来讲一讲实现过程。

开发之前,建议先看看微软的 WebView2 开发文档,很有帮助

使用Visual Studio开发工具,新建一个项目,项目模板选Windows 窗体应用(.Net Framework),"C#"编程语言,桌面应用,

例如,作者填写的解决方案和项目名称均为 WindowsFormsWebView2,如下图
在这里插入图片描述

注意目标框架,要选webview2支持的.NET Framework 4.7.2 以上,

页面布局

在Form1的设计窗口中,拖拉放置需要的一些组件,布局完成如下图所示
在这里插入图片描述

工具条显示的一些图标文件都存放在项目源码的资源文件夹里,可以自己在网上找来用

webview2插件

接下来就是写代码了,不忙不忙,要去找webview2插件来引用,

选中项目名,点鼠标右键,打开项目的管理NuGet程序包,如下图所示
在这里插入图片描述
搜索一下webview2,找到它,点击安装按钮,安装好如下图所示
在这里插入图片描述

点击重新编译项目,编译输出结果如果报错的话,那很不幸,
可能过程不顺利,请排查是什么错误引起的,试试提高程序项目的NET框架版本

页面逻辑

开始写逻辑代码,

从页面开始加载时处理初始化和注册事件,到页面关闭时需要释放浏览器资源,代码如下

public partial class Form1 : Form {

		/// <summary>
        /// 浏览器列表
        /// </summary>
        private List<WebView2> webViewList = new List<WebView2>();
		//...其它定义省略了
		
		public Form1()
        {
            InitializeComponent();
            //初始化...
        }

		/// <summary>
        /// 页面加载
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Form1_Load(object sender, EventArgs e){
			//...初始化页面
		}

		/// <summary>
        /// 页面关闭
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Form1_FormClosed(object sender, FormClosedEventArgs e){
			//...释放浏览器资源
			foreach (var wv in webViewList)
            {
                wv.Dispose();
            }
		}
		//...还有...
}

百度一下

看看首页布局,点击百度一下按钮,实现点击事件,代码如下

private void button1_Click(object sender, EventArgs e)
{
    var url = textBox1.Text;
    if (!url.StartsWith("http"))
    {
        url = "https://www.baidu.com/s?wd=" + url;
    }
    addNewTabPage(url);
}

打开浏览器

其中方法addNewTabPage(url),是添加标签卡,调用webview2插件打开浏览器,代码如下

private void addNewTabPage(string url)
{
	//引用webview2插件
     var webView = new WebView2();
     //将webview添加到新标签卡下...
     addWebView(webView);
	 //向多标签容器控件添加新标签卡
     var title = url.Substring(0, Math.Min(url.Length, 12));
     tabControl1.TabPages.Add(title);
	 //...
	 //再将webview添加到新标签卡下...
     page.Controls.Add(webView);
     //切换到新标签卡
     tabControl1.SelectedIndex = index;
	 //...
     updateInputUrlBox(url);
     loadUri(url);
 }

其中的两个方法updateInputUrlBox(url)loadUri(url),看名知意,这里就不展开讲

接下来,讲一讲这个方法addWebView(webView)是怎么做的,代码如下

private void addWebView(WebView2 webView)
{
	//绑定 浏览器初始化完成事件
    webView.CoreWebView2InitializationCompleted += webView21_CoreWebView2InitializationCompleted;
    //绑定 浏览器地址导航开始加载事件
    webView.NavigationStarting += webView_NavigationStarting;
    //绑定 浏览器地址导航加载完成事件
    webView.NavigationCompleted += webView_NavigationCompleted;
    //添加到列表中
    webViewList.Add(webView);
}

主要是第一个初始化事件,很重要,其它事件不是重要的,这里不再一一展开讲

初始化浏览器

看看浏览器初始化完成事件做了什么,代码如下

private void webView21_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
{
	 //获取webview2对象实例
     var webView = sender as WebView2;
     //获取浏览器内核对象
     var core = webView.CoreWebView2;
	 //...
	 //连接地址跳转事件
     core.NewWindowRequested += (sender2, e2) => coreWebView2_NewWindowRequested(webView, e2);
     //底部状态栏改变事件
     core.StatusBarTextChanged += (sender2, e2) => coreWebView2_StatusBarTextChanged(webView, e2);
     //浏览历史改变事件
     core.HistoryChanged += (sender2, e2) => coreWebView2_HistoryChanged(webView, e2);
     //下载开始事件
     core.DownloadStarting += coreWebView2_DownloadStarting;
     //...
 }

这是对内核的初始化,获得浏览器内核并绑定一些事件,
内核就是调用的浏览器程序,调用的其实就是它,可以把webview2看作是对浏览器的包装

浏览器跳转

由于很多网页内部点击链接会打开新窗口,会影响体验,需要对绑定跳转事件做一下处理,代码如下

private void coreWebView2_NewWindowRequested(WebView2 webView, Microsoft.Web.WebView2.Core.CoreWebView2NewWindowRequestedEventArgs e)
{
    e.Handled = true;//停止弹窗
    addNewTabPage(e.Uri.ToString());
}

其它一些事件同上面的实现步骤类似,非重要可忽略,
需要详细的可以看看项目源码,整个代码共占600多行吧(包括空行),看着不是很多,这里不再展开讲

打开链接

最后,如下这一行代码,就是打开链接的

webView.Source = new Uri(text);

细心观察会发现,首次执行这代码会调用初始化完成事件,就是上面提到的webView.CoreWebView2InitializationCompleted

如下这一行代码也可以打开链接的

webView.CoreWebView2.Navigate(text);

前提是要经过浏览器初始化才能用,否则webView.CoreWebView2=null 抛出对象未实例化异常

关于项目

就讲到这里,顺利的话,码完代码基本上就可以运行项目了,以下是运行效果图
在这里插入图片描述
输入关键词,然后点击百度一下按钮,或者点收藏的链接项,就可以打开新的标签卡,如下图所示
在这里插入图片描述

收藏的链接项是怎么来的呢
这是作者的项目源码实现的收藏功能,平时浏览的时候,想要收藏就点一下就有了,
收藏的链接是不会消失的,会写到文件中,然后保存到硬盘里

在此基础上改一改定制,加一加功能,就能成为自己的专用浏览器哦,

想想打造一个自己的个性化浏览器是不是很酷呢,
当然了,那些浏览器没有自己想要的功能,可以自己来实现吧,
有编程基础的话,感觉不会太复杂,不妨试一试,万一实现了呢

想要看项目源码可以点击这里查看下载,(可能手机上看不到资源一栏,请用电脑浏览器看),请放心下载,希望对你有帮助,感谢支持与信任!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【WinForm】WebView2-个性化浏览器-桌面程序开发详解 的相关文章

  • C# 操作JSON的几种方式

    关于Json数据在开发中的重要性 自然不言而喻 本篇通过两种在c 中常用的方式来实现对Json数据的序列化和反序列化 为了实现大多数的需求 我们采用稍微复杂一点的数据模型 首先我们有以下json数据 name 张三 age 20 idCar
  • TD添加IE8支持

    今天同事突然安装了IE8了 说TestDirector8 0在IE8 0下无法使用 于是在网上搜索 最后终于知道解决方法了 方法一 下载插件 安装TD自带的浏览器 通用 使用 进入TestDirector 单击Add ins Page 在新
  • 简单javascript的使用

    1 javascript的简介 是基于对象和事件驱动的语言 应用于客户端 基于对象 提供了好多对象 可以直接拿过来使用 事件驱动 html做网站静态效果 javascript动态效果 客户端 专门指浏览器 js的特点 1 交互性 信息的动态
  • csharp:百度翻译

    参考 http api fanyi baidu com api trans product index http developer baidu com wiki index php title E5 B8 AE E5 8A A9 E6 9
  • 7.3 行高:line-height属性[3]

    7 3 4 浏览器的差别与错误 浏览器在显示的时候往往会有自己的表现形式 例如在Opera内 行高将按照CSS定义的将行距除以2增加到内容区域的上下两边 而IE和Firefox则不是完全平分 如图7 29所示 图7 29 不同浏览器对行高的
  • 修复ie浏览器主页被360篡改

    一 环境 win10 二 问题 打开ie浏览器 发现主页被360篡改了 360我没有装过 怀疑是其他软件修改的 分析 浏览器主页被篡改 一般都是注册表被修改了 或者是启动程序里面有加载篡改主页 首先 看是否启动程序里面有加载篡改了主页 用右
  • Java Swing图书管理系统,界面漂亮功能全,完整源码、下载直接使用 -417

    今天为利用晚上的一小段时间为大家分享一个写的不错的窗体程序 图书管理系统 417 系统功能已经比较全面 而且界面非常漂亮 有较强的参考和使用价值 项目系统有完整源码 下载后即可以运行 希望大家可以喜欢 喜欢的帮忙点赞和关注 一起编程 一起进
  • 如何把IE浏览器快速变成灰色来哀悼在汶川地震中遇难的同胞们!

    如何把IE浏览器快速变成灰色来哀悼在汶川地震中遇难的同胞们 把IE浏览器快速变成灰色只要作以下二点即可 第一点 在html页面中 在body中加入下面语句 第二点 在css控制表中 加入下面语句 html filter progid DXI
  • C#开发Windows窗体应用程序的步骤

    使用C 开发应用程序时 一般包括创建项目 界面设计 设置属性 编写程序代码 保存项目 程序运行等6个步骤 1 创建项目 在Visual Studio2017开发环境中选择 文件 新建 项目 菜单 弹出 新建项目 对话框 如图8 1所示 图8
  • 浏览器有哪些进程?浏览器进程,渲染进程,网络进程,渲染进程有哪些线程?

    浏览器进程 渲染进程有哪些线程 在浏览器中打开两个页面 会开启几个进程 1个浏览器进程 1个网络进程 一个GPU进程 通常一个Tab页对应一个渲染进程 但有其它情况 1 如果页面中有iframe的话 iframe也会运行在单独的进程中 2
  • Android webview显示电脑版网页

    第一步获取webview的setting 同时进行配置 settings webView getSettings settings setCacheMode WebSettings LOAD NO CACHE 支持js settings s
  • 如何编译火狐浏览器的源代码

    以下摘录于 http zhidao baidu com question 33214960 html 源代码编译安装Firefox linux下 http forums mozine cn index php showtopic 601 W
  • 把路由器设置为交换机或者二级路由设置联网

    五台电脑用了一个路由 还有一台没有连上 结果又买了一个路由 问问能把剩下的电脑接上吗 该怎么接法 1 做二级路由 把第二個路由器作为二级路由用 接线的方法就像你接第一个主路由器那样 从第一个路由器LAN口出来的一条网线接在第二个路由器的WA
  • C#开发WinForm之DataGridView开发

    C 开发WinForm之DataGridView开发 原文 https blog csdn net achenyuan article details 84632751 文章目录 C 开发WinForm之DataGridView开发 基本的
  • 获取360画报图片

    在使用360画报时 有时看到喜欢的图片想保存下来 却不知道怎么保存 今天跟大家分享一下方法 1 360画报文件都在C Users Administrator AppData Roaming 360browser bkinfo这里面 但是不是
  • 如何在 webview2 中检测鼠标点击 (c#/vb.net)

    我尝试获取 html 元素的单击事件 我使用的网络浏览器 instance Nothing instance WebBrowser1 Document AddHandler instance Click AddressOf Document
  • 浏览器原理篇—渲染原理

    目录导航 为什么要学习浏览器的渲染原理 浏览器的渲染流程 浏览器的渲染阻塞 浏览器的渲染优化 为什么要学习浏览器的渲染原理 知识深度挖掘 帮助更好地理解前端性能优化 从而对实现效果进行针对性优化 如 回流和重绘 渲染机制 帮助更好地理解浏览
  • 老生常谈问题之——进程和线程的关系和区别

    最初 我们在学习进程和线程的时候都是和操作系统的知识相关的 但是我们前端菜鸟除了面试的时候很少用到他们 所以我们还是从前端常见的场景来详细的学习进程和线程吧 在前端提到关于进程和线程的概念主要有以下几个场景 1 js 是单线程的编程语言 也
  • 浏览器缓存相关面试题一网打尽,理论结合实践,用代码学习缓存问题,建议关注+收藏,(含项目源代码)

    前言 浏览器缓存的问题是面试中关于浏览器知识的重要组成部分 也是性能优化题目的一部分 但是不要被吓到 我话放到这里 就那么点东西 我这一篇文章基本上就涵盖了所有相关的知识点 认真看一遍 所有的问题都是纸老虎 一 准备工作 1 1 拉取仓库
  • DevExpress WinForms导航控件 - 交付更时尚、体验更好的业务应用(一)

    DevExpress WinForms的Side Navigation 侧边导航 和Nav Panel 导航面板 可以帮助客户交付完全可模仿UI体验的业务解决方案 这些体验在当今流行的应用程序中都可找到 DevExpress WinForm

随机推荐

  • HECI-Securtiy 防火墙路由技术

    目录 一 防火墙路由基本原理 1 路由分类 2 路由优先级 3 路由查询先后顺序 4 静态路由基本原理 1 指定出接口场景 2 指定下一跳地址场景 5 静态路由与多出口 1 主备备份 2 均衡式负载分担 3 溢出式负载分担 二 逐流与逐包报
  • 2022年实习面试 凉经

    2022年实习面试 凉经 字节跳动 数据分析师 2022 8 3 首先是自我介绍 其次给我出了一道sql的题目 里面用到了group by 的分组函数 以及最好嵌套一个子查询 然后出了一道题 感觉是产品经理方向 说B战有一个视频的播放量 一
  • java awt实现拖拉式文件路径获取

    package com example drag import java awt GridLayout import java awt datatransfer DataFlavor import java awt dnd DnDConst
  • SQL——根据字段包含值,统计条数(全文索引、CONTAINS、instr)

    根据字段包含值 统计条数 例如my column字段值可能为 0 1 2 3 4 5 目标 统计my column中的值为0 为1 为2 的各个条数 方式一 使用CONTAINS 该功能建立在全文索引之上 删除全文索引 DROP CONTE
  • 景联文科技高质量教育GPT题库:引领教育行业的技术革命

    ChatGPT拉开了大语言题库和生成式AI产业蓬勃发展的序幕 全世界教育科技公司扎堆接入GPT 4 涵盖美国 欧洲 日韩 中东和北非地区等 大语言题库在教育领域中势必将获得更加广阔的应用前景和丰富的应用场景 杭州景联文科技是AI基础数据行业
  • ElasticSearch text 和 keyword 类型

    ElasticSearch text 和 keyword 类型 text 会进行分词 先把对象进行分词处理 然后存入到es中 当使用多个单词进行查询的时候 查不到已经分词过的内容 keyword 不会进行分词 不会对es中的对象进行分词处理
  • FreeRTOS任务创建、删除

    目录 一 FreeRTOS任务创建与删除有关函数 1 1 创建 删除任务的API函数 1 1 1 动态创建任务 1 1 2 静态创建任务 1 1 3 删除任务 二 FreeRTOS任务创建与删除 动态方法 2 1 实例 三 FreeRTOS
  • LeetCode 沙漏的最大总和

    以最中间的的那个元素来移动 整个沙漏移动 class Solution public int maxSum int grid int max 0 int sum 0 for int i 1 i lt grid length 1 i for
  • 【华为OD机试】路灯照明问题【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 在一条笔直的公路上安装了N个路灯 从位置0开始安装 路灯之间间距固定为100米 每个路灯都有自己的照明半径 请计算第一个路灯和最后一个路灯之间 无法照明的区间的长度和
  • 线上git仓库地址更改,本地如何更改?

    1 进入终端查看本地代码关联的git仓库地址 git remote v 2 删除本地关联的git仓库地址 git remote rm origin 3 本地代码关联新的仓库地址 git remote add origin 新地址 4 再次查
  • 获取BDUSS的简单方式

    BDUSS是登录百度 web wap 后的唯一身份凭证 baidu com 受http only保护 拿到BDUSS就等于拿到帐号的控制权 通行贴吧 知道 百科 文库 空间 百度云等百度主要产品 在 贴吧云签系统 中 需要用到BDUSS进行
  • Linux下查看磁盘使用率及文件和文件夹大小

    原文地址 http blog sina com cn s blog 4ab088470106ge0o html 大家在使用linux的过程中 或许遇到过数据无法入库 无法上传数据等等 这就要多长个心眼 去查看一下磁盘使用率和文件大小吧 这时
  • 贪心+二分解决最大值最小、最小值最大问题

    在刷题时 总会遇到求最大值最小 最小值最大问题 也许它会暗喻是这样的一个问题 对于这样的一个问题 你会发现用dp和枚举都会超时超内存 或者说很麻烦 所以这是一个比较简单的解题方式 二分逼近思想 对于难以直接确定解的问题 采取二分枚举 检验的
  • mysql常见六大约束

    DDL语言 常见约束 约束的含义 一种限制 用于限制表中的数据 为了保证表中的数据的准确性和可靠性 分类 六大约束 1 NOT NULL 非空约束 用于保证该字段的值不能为空 比如姓名 学号等 2 DEFAULT 默认约束 用于保证该字段有
  • Pycharm中放大和缩小代码界面

    直接上图流程 打开文件 点击设置 选择 keymap 右侧搜索框输入 increase 搜索出来之后双击 选择 Add Mouse Shortcut 然后在操作框按住 Ctrl 并将鼠标滚轮上滑 完成设置 一直点击OK关闭界面即可 之后按住
  • TortoiseGit如何变动项目Ip地址

    第一步 进到项目所在目录 找到git文件夹里的config文件 第二步 用记事本打开config文件 修改ip地址信息并保存即可
  • Spring的内部bean

    当一个bean仅被用作另一个bean的属性时 才能被声明为一个内部bean 为了定义inner bean 在Spring的基于XML的配置元数据中 可以在
  • 激光炸弹题解

    维生素C吃多了会上火 个人CSDN博文目录 2022蓝桥杯 目录 题目链接 题解 题目链接 题解 1 不同目标可能在同一位置所以 w 2 可能在 5000 5000 所以要算到5001 3 long long 超内存 include
  • EasyPoi实现Excel数据导入

    EasyPoi是一个基于Java的Excel导入导出框架 主要提供了Excel读取 写入等基本功能 并且支持通过注解来定义Excel文件的格式 添加maven依赖
  • 【WinForm】WebView2-个性化浏览器-桌面程序开发详解

    这是一个桌面程序上的浏览器 是用插件WebView2开发的浏览器桌面程序 功能体验堪比Edge浏览器 相比使用Chrome内核插件开发浏览器来说 还是用插件WebView2开发来得简单一些 接下来讲一讲实现过程 开发之前 建议先看看微软的