使用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("http://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("http://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 }
而"http://192.168.0.113:8080/"是我们的Web站点,大部分业务逻辑在网站里处理,WebApp只是在外表包了一个壳
5.2 我们再新建一个本地Web站点
改动首页HTML,主要功能是点击按钮,会调用后台ShowToast,这是个提示功能
1 @{ 2 ViewBag.Title = "Home Page"; 3 } 4 5 <br /> 6 <div class="jumbotron"> 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("http://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 class="jumbotron"> 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应运而生。
请发表评论