UWP开发之控件:用WebView做聊天框

简介:

目录

说明

WebView存在的价值

使用WebView的几个重要技巧

使用WebView做的聊天框

 

说明

大家都知道,无论是之前的Winform、WPF还是现在的IOS、Android开发中,都存在一个极其牛茶但是被很多人用错了的控件:Web浏览控件。各个平台中的叫法不同,但是作用类似:能够加载显示HTML。UWP开发中同样存在这样的一个控件:WebView。往大了说,用它可以做一个简单浏览器,但是这篇博客并不打算教大家怎样用它开发一款UWP浏览器,因为我认为它存在的价值并不在此。当然了,你要是非要这样去做,也是可以的,看微软官方的Demo:https://microsoftedge.github.io/JSBrowser/(用WebView,Js语言开发的UWP浏览器)。

源码先上来:https://github.com/sherlockchou86/Blogs/tree/master/ChatBoxbyWebView

需要先看效果图的猛戳这里

 

WebView存在的价值

(1).前面说过,WebView可以加载显示HTML。这里的HTML包括Internet上的资源(比如直接定位到http://www.cnblogs.com),当然也包括本地资源,比如我在APP中使用代码现场生成一串HTML,然后让WebView去渲染呈现。大家知道HTML在界面表现方面非常出众,并且扩展性强,那么使用WebView+HTML(CSS、JS)做出来的UI肯定非常不错,我认为这是WebView被忽略的价值之一。

(2).另外,现在流行的Hybrid APP(Native代码+Web),其基础便是WebView这种能够呈现HTML的控件,不管是IOS还是Android中都有类似功能的控件作为HTML的容器,它们主要的功能就是加载并显示APP中的Web页面。与前(1)中讲的不同的是,这里的HTML页面是你自己开发并且部署到服务器上的,有关更多的介绍大家可以网上搜索Hybrid APP。由于这不是本文的重点,所以不多讲了。

不管是(1)中加载本地HTML还是(2)中加载自己服务器上的HTML页面,都会涉及到一个问题,那就是Native代码(C#)怎样与WebView中的JS进行通信,很明显,Native代码掌握整个APP的控制权,它应该可以控制WebView中HTML的显示方式,当用户操作WebView时(比如点击按钮),Native代码也应该知道。所以,在使用WebView时,通信是关键。

 

使用WebView的几个重要技巧

(1)明白WebView的作用,前面已经说过了,不要把它当做是一个普通的浏览器;

(2)C#与WebView中的JS通信

其实很简单,WebView控件有WebView.InvokeScriptAsync(...)方法,使用它可以调用JS中的任何方法,比如我要设置博客园登录页面中用户名、密码输入框的的值,我们可以这样做:

LoginWebView.Navigate(new Uri("http://www.cnblogs.com/"));  //加载博客园登录页面
string js="";  //构建脚本
js += "document.getElementById('input1').setAttribute('value','" + UserName.Text + "');"; //设置用户名
js += "document.getElementById('input2').setAttribute('value','" + PassWord.Password + "');"; //设置密码
js += "document.getElementById('signin').click();"; //点击登录
await LogintWebView.InvokeScriptAsync("eval", new string[] { js });   //eval函数大家都知道,就是执行一段字符串

如上所示,使用InvokeScriptAsync方法调用eval这个JS函数。

(3)WebView中的JS和C#通信

这个有个前提:WebView中HTML(JS)必须是你自己写的,换句话说,WebView加载的内容必须是你能控制的,否则很难监听到WebView中的代码动向,如果你加载博客园的登录页面,你想在用户点击登录的时候干点啥,呵呵,很难,因为博客园的登录页面不是你写的。那么如果加载的页面是你自己写的,那么怎样与C#通信呢?其实这个也简单,在需要通信的地方,我们使用这个JS代码:window.external.notify("...");然后我们C#中注册WebView的ScriptNotify事件,那么就可以在C#中收到JS传过来的字符串了(注意只能是string类型,因为两者数据类型不一样)。具体的代码请看我后面给出的示例。

(4)插入脚本

当你通过WebView访问一个外部网站,想要在页面中注入自己写的脚本,做不到。只能现将页面HTML下载下来保存成本地资源,然后再插入脚本,然后再使用WebView.NavigateToString("html")方法加载本地资源。做不到的原因很简单,大家都懂。

 

使用WebView做的聊天框

光说不练假把式,要证明我说的是真的,可以一信,那么接下来我给大家看一个使用WebView做的聊天框。只加载本地HTML(CSS、JS),涉及到了C#与JS之间的相互通信。代码已上传到github,有需要的同学可以下下来看一下,下面是界面:

 

细节地方还需要完善,如果有要用的机会,下下来一定要自己完善一下。另外,上个礼拜写的博客园UWP版 PC版马上就做完了,等做完源码马上传上来,感兴趣的可以关注一下。开源有益。:)

作者:周见智 
出处:http://www.cnblogs.com/xiaozhi_5638/ 
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

分类:  UWP

本文转自周见智博客博客园博客,原文链接:http://www.cnblogs.com/xiaozhi_5638/p/4987580.html,如需转载请自行联系原作者
目录
相关文章
|
XML JavaScript 前端开发
鸿蒙开发(17)---WebView组件
鸿蒙开发(17)---WebView组件
1210 0
鸿蒙开发(17)---WebView组件
|
2月前
|
Dart Android开发
鸿蒙Flutter实战:03-鸿蒙Flutter开发中集成Webview
本文介绍了在OpenHarmony平台上集成WebView的两种方法:一是使用第三方库`flutter_inappwebview`,通过配置pubspec.lock文件实现;二是编写原生ArkTS代码,自定义PlatformView,涉及创建入口能力、注册视图工厂、处理方法调用及页面构建等步骤。
68 0
|
5月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
6月前
|
安全 JavaScript 前端开发
kotlin开发安卓app,JetPack Compose框架,给webview新增一个按钮,点击刷新网页
在Kotlin中开发Android应用,使用Jetpack Compose框架时,可以通过添加一个按钮到TopAppBar来实现WebView页面的刷新功能。按钮位于右上角,点击后调用`webViewState?.reload()`来刷新网页内容。以下是代码摘要:
|
6月前
|
JavaScript 前端开发 Android开发
kotlin开发 webview如何在收到JS调用后,native返回数据给到JS
这段内容描述了在Hybrid App开发中,使用Kotlin的Compose构建的Web视图(WebView)如何通过JsBridge实现JavaScript与原生代码的交互
|
6月前
|
安全 网络安全 API
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie,首先在`build.gradle`添加WebView依赖,如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`,通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
|
7月前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
1180 1
|
7月前
|
移动开发 前端开发 JavaScript
移动端 Hybrid 开发:RN、Flutter与Webview的抉择与融合
【4月更文挑战第6天】本文对比了移动端Hybrid开发的三种主流方案——React Native (RN),Flutter和Webview。RN基于JavaScript,适合React熟练的团队,适用于性能要求高、跨平台的中大型应用。Flutter,使用Dart语言,以其高性能和自定义UI适用于追求极致体验的项目。Webview适合快速移植Web应用至移动端,开发成本低但性能受限。选择时要考虑项目规模、性能需求、团队技术栈等因素,实际应用中常采用混合策略,如RN/Flutter+Webview、原生模块集成等,以实现最佳开发效果和长期技术规划。
505 0
|
7月前
|
JavaScript 前端开发 Android开发
android开发,使用kotlin学习WebView(详细)
android开发,使用kotlin学习WebView(详细)
525 0
|
Web App开发 XML 移动开发
【Android】WebView 开发遇到的问题小结
【Android】WebView 开发遇到的问题小结
615 0
【Android】WebView 开发遇到的问题小结