WEBAPP开发之使用C#开发Android应用之WebApp
凌雪 2018-09-13 来源 :网络 阅读 416 评论 0

摘要:本文将带你了解WEBAPP开发之使用C#开发Android应用之WebApp,希望本文对大家学微信有所帮助。

本文将带你了解WEBAPP开发之使用C#开发Android应用之WebApp,希望本文对大家学微信有所帮助。


使用C#开发Android应用之WebApp
     
     
     
     近段时间了解了一下VS2017开发安卓应用的一些技术,特地把C#开发WebApp的一些过程记录下来,
    欢迎大家一起指教、讨论,废话少说,是时候开始表演真正的技术了。。
     
    1、新建空白Android应用
   
    2、拖一个WebView控件进来
  
    3、打开模拟器Genymotion,选择一个系统版本,启动
 
   
    4、加载网页
4.1 打开MainActivity.cs,在OnCreate方法里添加2行代码
   
     1         protected override void   OnCreate(Bundle savedInstanceState)
 2         {
 3               base.OnCreate(savedInstanceState);
 4
 5               // Set our view from the "main" layout resource
 6               SetContentView(Resource.Layout.Main);
 7
 8             var web =   FindViewById<WebView>(Resource.Id.webView1);
 9               web.LoadUrl("//www.baidu.com");
    10         }
   
    加载网页就是这样简单,F5调试,就可以看到模拟器有了变化,打开了我们的应用,并如期加载了网页
 
    5、网页端调用手机APP后台方法
5.1 打开MainActivity.cs,重写OnCreate为如下
   
     1         protected override void   OnCreate(Bundle savedInstanceState)
 2         {
 3               base.OnCreate(savedInstanceState);
 4
 5               var webView = new WebView(this);
 6             SetContentView(webView);
 7
 8               webView.Settings.JavaScriptEnabled = true;
 9             webView.AddJavascriptInterface(new   CustomJSInterface(this), "CSharp");
    10               webView.LoadUrl("//192.168.0.113:8080/");
    11         }
   
    标红的是实现前端调用后台方法的关键,新建CustomJSInterface.cs
   
     1       public class CustomJSInterface : Java.Lang.Object
 2       {
 3         Context context;
 4
 5         public CustomJSInterface(Context   context)
 6         {
 7             this.context = context;
 8         }
 9
    10         [Export]
    11           [JavascriptInterface]
    12         public void   ShowToast(string message)
    13         {
    14               Toast.MakeText(context, message, ToastLength.Short).Show();
    15         }
    16     }
   
    而"//192.168.0.113:8080/"是我们的Web站点,大部分业务逻辑在网站里处理,WebApp只是在外表包了一个壳
5.2 我们再新建一个本地Web站点
   
    改动首页HTML,主要功能是点击按钮,会调用后台ShowToast,这是个提示功能
   
    1 @{
    2     ViewBag.Title = "Home   Page";
    3 }
    4
    5 <br />
    6 <div>
    7     <button type="button"   onClick="CSharp.ShowToast('hello')">由前端调用C#后台方法</button>
    8 </div>
   
    浏览器预览
   
     
    5.3 VS2017按F5部署,可以看的模拟器也正常把本地站点加载进来了
   
    点击"获取前端JS返回的数据"
   
    6、APP执行前端JS方法
6.1 重写OnCreate
   
     1             // 必须重写WebView客户端
 2             webView.SetWebViewClient(new   CustomWebViewClient());
 3             // 先打开首页
 4               webView.LoadUrl("//192.168.0.113:8080/");
 5
 6             // APP主动获取前端数据
 7             var btn =   FindViewById<Button>(Resource.Id.button1);
 8             btn.Click += delegate
 9             {
    10                 var callback = new   ReceiveValueCallback();
    11                   callback.OnReceiveValueCallback += (message) =>
    12                 {
    13                     Toast.MakeText(this.ApplicationContext,   message, ToastLength.Short).Show();
    14                 };
    15
    16                   webView.EvaluateJavascript("GetData()", callback);
    17             };
   
    6.2 新建CustomWebViewClient.cs
   
    1     class CustomWebViewClient :   WebViewClient
    2     {
    3         public override bool ShouldOverrideUrlLoading(WebView   view, String url)
    4         {
    5               view.LoadUrl(url);
    6             return true;
    7         }
    8     }
   
    6.3 新建ReceiveValueCallback.cs,这个类主要负责处理前端返回的数据
   
     1     public class ReceiveValueCallback :   Java.Lang.Object, IValueCallback
 2       {
 3         public delegate void   OnReceiveValueCallbackHandler(string message);
 4         public event   OnReceiveValueCallbackHandler OnReceiveValueCallback;
 5
 6         // 重写ReceiveValue方法
 7         public void   OnReceiveValue(Java.Lang.Object value)
 8         {
 9               OnReceiveValueCallback(value.ToString());
    10         }
    11     }
   
    6.4 修改Index.html
   
     1 @{
 2       ViewBag.Title = "Home Page";
 3 }
 4
 5 <br />
 6 <div>
 7       <button type="button"   onClick="CSharp.ShowToast('hello')">由前端调用C#后台方法</button>
 8 </div>
 9
    10 <script type="text/javascript">
    11     function GetData() {
    12         return   "123456789";
    13     }
    14 </script>
   
    6.5 VS2017按F5部署
   
    6.6 点击按钮"获取前端JS返回的数据"
   
     
     7、WebAPP使用疑问
 7.1 细心的人可能注意到:前端代码完全可以自己处理完业务,那还有WebApp什么事情呢?这时的APP完全就跟一个浏览器差不多!
7.2 确实是这样的WebApp相对与其他安卓APP来说,是轻量级的,只是一个壳子,但是他也是有其合适的使用范围;
    比如:如果前端并没有数据持久化功能(如纯JS前端),这时要保存数据只能调用其他的WebApi,而由于JS的特性可能会引起一些安全问题。
    或者根本没有第三方API,数据需要保存在手机端,JS也没有这种权限。
    所以既兼顾了像升级Web站点那样简便,又有一些手机端的操作权限,WebApp应运而生。
 
    

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之webapp频道!

本文由 @凌雪 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程