C#开发移动应用系列(2.使用WebView搭建WebApp应用)
上篇文章地址:C#开发移动应用系列(1.环境搭建)
嗯..一周了 本来打算2天一更的 - - ,结果 出差了..请各位原谅..
今天我们来讲一下使用WebView搭建WebApp应用.
说明一下为何要用WebApp的形式,因为首先..易于更新,其次学习成本又会降低一个档次
因为不需要去很深入的了解各种安卓的界面布局,我们直接全屏覆盖一个WebView就好了.(当然,实际应用中还是需要加入一部分原生控件来提高用户体验)
确定一下本篇的学习目标:
1.学会使用WebView基础功能
2.通过WebView调用页面中的JS代码
3.通过WebView让页面中的JS代码调用后台的C#代码
效果图:
1.使用WebView构建基础框架
我们首先打开上一篇我们只放了一个button的界面.
从左侧工具栏中找到WebView并拖到我们的界面中,并放大到覆盖整个页面.位置如图:
然后编写MainActivity.cs文件,在OnCreate()方法中获取我们的webView并进行基础设置
代码如下:
//获取WebView对象 var webView = FindViewById<WebView>(Resource.Id.webView1); //申明WebView的配置 WebSettings settings = webView.Settings; //设置允许执行JS settings.JavaScriptEnabled = true; //设置可以通过JS打开窗口 settings.JavaScriptCanOpenWindowsAutomatically = true; //这里是自己创建的WebView客户端类 var webc = new MyCommWebClient(); //设置自己的WebView客户端 webView.SetWebViewClient(webc);
说明都已经在注释里了.
下面我们来讲一下倒数第二行的MyCommWebClient是怎么来的.
这里是我们自己申明的一个客户端类,用来拦截页面的跳转连接(不然会调用安卓原生游览器加载新页面),并在本页面中加载用的,代码如下:
class MyCommWebClient: WebViewClient { //重写页面加载的方法 public override bool ShouldOverrideUrlLoading(WebView view, String url) { //使用本控件加载 view.LoadUrl(url); //并返回true return true; } }
这样,当页面中有A标签连接跳转的时候就不会调用安卓的原生游览器加载了.
最后,我们在MainActivity.cs文件加上一句代码
webView.LoadUrl("你的地址");
就会跳转到你设定的页面中了.
至此就完成了基本的WebView设置
我们进入下一个阶段...
2.通过WebView调用页面中的JS代码
既然是要进行webAPP的开发 那么通过WebView来调用JS,肯定是少不了的..
下面我们就开始讲解如何调用.
首先我们要创建一个Web项目..我这里的例子创建的ASP.NET Core的..
至于怎么让你的Web项目可以局域网访问..我就不多说了..自行百度
修改我们的前端HTML页面
<body ontouchstart=""> <button onclick="showmessage('页面按钮点击')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">弹出</button> <script src="~/js/js/mui.js"></script> <script src="~/js/examples/hello-mui/js/mui.js"></script> <script> //定义一个JS方法,并返回一个字符串 function showmessage(message) { mui.alert(message) return "JS反馈" } </script> </body>
如果我们不需要获取这个JS的返回值
那么很简单,代码如下:
webView.LoadUrl("javascript:" + "showmessage('安卓按钮点击')");
就这样,一句即可..
如果你要获取返回值.那就请往下看..
我们需要使用到WebView的EvaluateJavascript函数
这个函数有两个参数,一个是你要调用的JS,另一个则是IValueCallback
如图:
我们要创建一个类,来继承这个IValueCallback并提供返回值
代码如下:
public class ValueCall : Java.Lang.Object, IValueCallback {//定义delegate public delegate void TestEventHandler(string message); //用event 关键字声明事件对象 public event TestEventHandler TestEvent; public void Dispose() { } //重写方法,获取返回值 public void OnReceiveValue(Java.Lang.Object value) { string a = value.ToString(); TestEvent(a); } }
这里我们采用事件回调的方式,来返回我们获取的Value,(注:细心的朋友肯定发现了,我们还继承了Java.Lang.Object,因为这个接口是Java的对象..所以..我们需要继承一下JAVA基类..不然会报类型转换错误)
然后我们回到MainActivity.cs
在里面定义ShowMessage()的函数如下:
public void ShowMessage(string message) { //很简单就是弹出返回值 Toast.MakeText(this.ApplicationContext, message, ToastLength.Short).Show(); }
编写OnCreate函数中的代码如下:
//获取按钮 var btn = FindViewById<Button>(Resource.Id.button1);//添加点击事件 btn.Click += delegate { ValueCall vc = new ValueCall(); //添加弹出返回值事件 vc.TestEvent += ShowMessage; //调用JS webView.EvaluateJavascript("showmessage('安卓按钮点击')", vc); };
这样,我们就完成了整个C#调用JS代码并获取返回值的过程
3.通过WebView让页面中的JS代码调用后台的C#代码
下面我们就来讲如何使用JS来调用C#代码.
首先,我们申明一个类如下:
public class MyJSInterface : Java.Lang.Object { Context context; //因为要弹出内容..所以构造函数需要一个当前的上下文对象 public MyJSInterface(Context context) { this.context = context; } //注意,这里需要加两个特性 [Export] [JavascriptInterface] public void SayHello(string message) { Toast.MakeText(context, message, ToastLength.Short).Show(); } }
其实很简单,就是创建一个函数,然后添加两个特性,代表着JS可以调用(有点类似WebAPI).
这里需要注意的是Java.Interop.ExportAttribute这个特性.
需要项目引用Mono.Android.Export
注意这里的项目引用..的意思..就是 右键项目-->选择添加引用..而不是只Using
回到我们的MainActivity.cs文件中的OnCreate方法.给我们webview继续添加代码如下:
//添加我们刚创建的类,并命名为wv webView.AddJavascriptInterface(new MyJSInterface(this), "wv"); //加载测试页面 webView.LoadUrl("http://192.168.14.134:57870/");
修改我们测试页面的代码如下:
<body ontouchstart=""> <button onclick="showmessage('页面按钮点击')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">弹出</button> <button onclick="ShowAdMessage()" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">调用后台C#</button> <script src="~/js/js/mui.js"></script> <script src="~/js/examples/hello-mui/js/mui.js"></script> <script> function showmessage(message) { mui.alert(message) return "JS反馈" } function ShowAdMessage() { // alert(wv); wv.SayHello("这里是JS调用后台的C#代码"); } </script> </body>
我们添加了一个按钮,并直接通过wv对象来调用后台的函数...
信息弹出成功.到此.我们的JS调用C#代码就调用结束了
代码虽然不多,但是很实用.
基本了解这些内容 我们就可开始我们的WebApp基础开发了.
当然,这些只是基础,我们要做一个商业应用..肯定是需要调用到机器的硬件设备,比如陀螺仪..摄像头什么之类的..
这个我们留待后面讲解..敬请期待.. ...
顺便说一句..各位大哥 - -,期待更新的..是不是应该点个推荐加个关注?..(滑稽)
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
C#开发移动应用系列(1.环境搭建)
原文: C#开发移动应用系列(1.环境搭建) 前言 是时候蹭一波热度了..咳咳..我什么都没说.. 其实也是有感而发,昨天看到Jesse写的博文(是时候开始用C#快速开发移动应用了),才幡然醒悟 , 原来我们的Xamarin已经如此的成熟了... 其实从2013开始就想用Xamarin,奈何 当初收费一座大山压在身上 完全无法见得庐山真面目 后面2015,微软收购Xamarin,没过多久就宣布对个人用户免费..那个兴奋劲就别提了.. 兴奋的我电脑都重装了好几遍...(因为装Xamarin搞的各种冲突)..奈何..资源有限 国内没镜像 FQ没路子.. 吃饭没钱..咳,暴露了 然后VS2017终于来了,首先 国内有镜像了 庞大的android-sdk也能嗖嗖下载了..然而又一座大山压过来..(也许是微软爸爸太好,每次都管吃管住,各种开发环境 所需资源全部准备好) 让我任性了一把..特秒的 VS2017集成的谷歌仿真器..真是卡出翔...我又放弃了..直到昨天..看到博文.. 才醒悟..这算个什么事..当初2013时期都能折腾一个月的我 如今这么好的条件...这点小事情就能难倒?.. 所以....
- 下一篇
C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码
原文: C#使用Xamarin开发可移植移动应用(2.Xamarin.Forms布局,本篇很长,注意)附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.com/l2999019/DemoApp 可以Star一下,随意 - - 一点感想 很意外的,第一篇博文被博客园的编辑大哥置顶了.感谢. 评论也很多,褒贬不一,我还是那句话.技术是从无到有的过程,就像一个刚出生的人 不是说他有个强大的爸爸 所以就可以一出生就上天. .NET如此,JAVA亦如此.言尽于此,对于喷子 好自为之.. 好了,废话不多说,我们开始本章的内容. 今天的学习内容? 昨天学了内容页,当然就少不了内容页里面的布局,所以.. 今天我们主要学习Xamarin.Forms中提供的各类布局手段,如图: Xamarin.Forms提供了5种布局,我这里只截取了4种,第五种是ScrollView,个人觉得..这个的操作作用大于布局作用..所以本章就不讲了. 本篇很长...内容很多,且自己认为比较重要..大家耐心看 各种布局,Demo效果如下: 正文 0.使用Xamari...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- CentOS8安装Docker,最新的服务器搭配容器使用
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- Hadoop3单机部署,实现最简伪集群
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题