C#开发移动应用系列(2.使用WebView搭建WebApp应用)

C#开发移动应用系列(2.使用WebView搭建WebApp应用)
原文: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);//并返回truereturn 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{//定义delegatepublic 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;//调用JSwebView.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基础开发了.

当然,这些只是基础,我们要做一个商业应用..肯定是需要调用到机器的硬件设备,比如陀螺仪..摄像头什么之类的..

这个我们留待后面讲解..敬请期待.. ...

顺便说一句..各位大哥 - -,期待更新的..是不是应该点个推荐加个关注?..(滑稽)

posted on 2018-09-10 11:32 NET未来之路 阅读(...) 评论(...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/9618189.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/266065.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

new 一个模板、类_Java必备基础-类(Class)

你好&#xff0c;我是goldsunC让我们一起进步吧&#xff01;类上一篇文章介绍了Java的基础数据类型和引用数据类型中的数组&#xff0c;引用数据类型除了数组之外&#xff0c;还包括类和接口。那什么是引用数据类型呢&#xff1f;看个例子&#xff1a;public class Test {publi…

华北电力大学计算机科学与技术考研,华北电力大学吴克河教授谈计算机科学与技术专业...

导语&#xff1a;读万卷书不如行万里路&#xff0c;行万里路不如名师点悟。选导师也是个大学问——择师而师&#xff0c;不可草草。为此我们特邀请众多精英导师&#xff0c;我们期待他们的亲身经历和观点建议&#xff0c;能够给考研路上的你以参考……华北电力大学计算机科学与…

安卓APP_ 控件(4)—— ImageView

摘自&#xff1a;安卓APP_ 控件&#xff08;4&#xff09;—— ImageView 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-03-29 21:52:06 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115311375 开篇&#xff1a;安卓APP_ 控件&#xff0…

使用python的openpyxl模块操作excel

openpyxl&#xff08;可读写excel表&#xff09;专门处理Excel2007及以上版本产生的xlsx文件&#xff0c;xls和xlsx之间转换容易 openpyxl的安装 模块的引入 from openpyxl import Workbook from openpyxl.styles import Color, Font, Alignment from openpyxl.styles import B…

安卓APP_ 控件(5)—— ProgressBar

摘自&#xff1a;安卓APP_ 控件&#xff08;5&#xff09;—— ProgressBar 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-03-31 13:03:07 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115313496 控件ProgressBar就是对进度条的设定&…

sql 写query_为什么需要动态SQL

为什么需要动态SQL在使用 EF或者写 SQL语句时&#xff0c;查询条件往往是这样一种非常常见的逻辑&#xff1a;如果客户填了查询信息&#xff0c;则查询该条件&#xff1b;如果客户没填&#xff0c;则返回所有数据。我常常看到很多人解决这类问题时使用了错误的静态 SQL的解决办…

AMBA总线协议AHB、APB

一、什么是AMBA总线 AMBA总线规范是ARM公司提出的总线规范&#xff0c;被大多数SoC设计采用&#xff0c;它规定了AHB (Advanced High-performance Bus)、ASB (Advanced System Bus)、APB (Advanced Peripheral Bus)。AHB用于高性能、高时钟频率的系统结构&#xff0c;典型的应用…

安卓APP_ 控件(6)—— Notification通知

摘自&#xff1a;安卓APP_ 控件&#xff08;6&#xff09;—— Notification通知 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-02 00:30:14 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115382674 Notification通知的使用 一、创建一…

安卓APP_ 控件(7)——Toolbar栏目样式

摘自&#xff1a;安卓APP_ 控件&#xff08;7&#xff09;——Toolbar栏目样式 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-02 15:42:07 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115395997 Toolbar栏目样式 什么是Toolbar?设置…

Gartner:2013年SIEM市场分析(MQ)

2013年5月7日&#xff0c;Gartner一年一度的SIEM magic quadrant报告出炉了。如下图&#xff1a;对比一下去年的MQ矩阵&#xff1a;简言之&#xff0c;上榜厂商减少到16个&#xff0c;Q1Labs在三强竞争中稍占上风&#xff0c;Arcsight有所退步&#xff0c;Splunk终于跻身第一阵…

北林计算机考研真题答案,真题解析|『北林』2020年考研初试真题

原标题&#xff1a;真题解析&#xff5c;『北林』2020年考研初试真题真题解析&#xff5c;『北林』2020年考研初试真题前言从今年的考试题型来看未做改变&#xff0c;(选择、名词解释、简答、论述)但分数分布略有更改。从考试内容来看&#xff0c;基本持平于去年的难易程度&…

安卓APP_ 控件(8)—— AlertDialog

摘自&#xff1a;安卓APP_ 控件&#xff08;8&#xff09;—— AlertDialog 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-02 18:13:20 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115400659 显示对话框&#xff0c;效果如下图&…

安卓APP_ 控件(9)—— PopupWindow弹窗

摘自&#xff1a;安卓APP_ 控件&#xff08;9&#xff09;—— PopupWindow弹窗 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-05 14:41:35 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115405555 实现效果如下&#xff1a; 点击触发…

计算机网址登录教程,melogincn电脑登录教程

请问melogincn使用电脑登录设置的教程&#xff1f;在电脑上怎么登陆水星(美科星)无线路由器的后台&#xff0c;通过melogincn&#xff0c;试了下发现不知道如何打开&#xff0c;求分享用melogincn用电脑登录设置的教程。使用环境描述&#xff1a;melogincn实际上应该是melogin.…

从外网给新建的Exchange 2007/2010分发通讯组发邮件失败

前几天部署Exchange2010时建立了几个通讯组邮箱&#xff0c;测试下来发现只有exchange内部组员进行邮件交流没有问题&#xff0c;外网发送到组邮箱时会收到#550 5.7.1 RESOLVER.RST.AuthRequired; authentication required ##的错误&#xff0c;当时没有找出问题原因&#xff0…

安卓APP_ 布局(1)—— LinearLayout

摘自&#xff1a;安卓APP_ 布局&#xff08;1&#xff09;—— LinearLayout 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-05 16:46:22 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115442240 LinearLatout 一、orientation&#xf…

鼠标点击测试_鼠标键盘如何检测故障,这边教您简单的测试

沉迷&#xff0c;教您简单的测试鼠标故障。有线键盘和鼠标的检测步骤&#xff1a;(1)将电脑关机&#xff0c;拔插对应的连接线。(2)移除所有除了键盘和鼠标之外的设备&#xff0c;然后重启电脑。(3)重启后&#xff0c;观察鼠标的灯是否有亮。点击滚动锁定键&#xff0c;观察键盘…

影响计算机的速度有哪些,影响电脑速度的硬件有哪些

影响电脑速度的硬件有哪些?影响最直接的是cpu、内存条、硬盘。其次是主板、显卡。一、处理器cpucpu是电脑的大脑&#xff0c;是运算核心和控制核心&#xff0c;它的主要作用是处理指令和数据&#xff0c;电脑所有的硬件工作分工都市cpu分配和协调的。所以&#xff0c;cpu的层次…

atom编写python程序_编写我们的第一个Python程序,print.py

Python安装后&#xff0c;默认会安装很多功能模块&#xff0c;方便开发应用程序时调用&#xff0c;需要增加默认功能模块以外的模块时&#xff0c;使用的是PIP 这个工具&#xff0c;把需要模块安装到C:\Users\Administrator\AppData\Local\Programs\Python\Python38-32\Lib\sit…

安卓APP_ 布局(2) —— RelativeLayout相对布局

摘自&#xff1a;安卓APP_ 布局&#xff08;2) —— RelativeLayout相对布局 作者&#xff1a;丶PURSUING 发布时间&#xff1a; 2021-04-05 20:19:54 网址&#xff1a;https://blog.csdn.net/weixin_44742824/article/details/115445242 RelativeLayout 一、根据父容器定位二、…