近段时间了解了一下 VS2017 开发安卓应用的一些技术, 特地把 C# 开发 webApp 的一些过程记录下来,
欢迎大家一起指教, 讨论, 废话少说, 是时候开始表演真正的技术了..
1, 新建空白 Android 应用
2, 拖一个 WebView 控件进来
3, 打开模拟器 Genymotion, 选择一个系统版本, 启动
4, 加载网页
4.1 打开 MainActivity.cs, 在 OnCreate 方法里添加 2 行代码
- protected override void OnCreate(Bundle savedInstanceState)
- {
- base.OnCreate(savedInstanceState);
- // Set our view from the "main" layout resource
- SetContentView(Resource.Layout.Main);
- var web = FindViewById<WebView>(Resource.Id.webView1);
- web.LoadUrl("http://www.baidu.com");
- }
加载网页就是这样简单, F5 调试, 就可以看到模拟器有了变化, 打开了我们的应用, 并如期加载了网页
5, 网页端调用手机 APP 后台方法
5.1 打开 MainActivity.cs, 重写 OnCreate 为如下
- protected override void OnCreate(Bundle savedInstanceState)
- {
- base.OnCreate(savedInstanceState);
- var webView = new WebView(this);
- SetContentView(webView);
- webView.Settings.JavaScriptEnabled = true;
- webView.AddJavascriptInterface(new CustomJSInterface(this), "CSharp");
- webView.LoadUrl("http://192.168.0.113:8080/");
- }
标红的是实现前端调用后台方法的关键, 新建 CustomJSInterface.cs
- public class CustomJSInterface : Java.Lang.Object
- {
- Context context;
- public CustomJSInterface(Context context)
- {
- this.context = context;
- }
- [Export]
- [JavascriptInterface]
- public void ShowToast(string message)
- {
- Toast.MakeText(context, message, ToastLength.Short).Show();
- }
- }
而 "http://192.168.0.113:8080/" 是我们的 Web 站点, 大部分业务逻辑在网站里处理, WebApp 只是在外表包了一个壳
5.2 我们再新建一个本地 Web 站点
改动首页 html, 主要功能是点击按钮, 会调用后台 ShowToast, 这是个提示功能
- @{
- ViewBag.Title = "Home Page";
- }
- <br />
- <div class="jumbotron">
<button type="button" onClick="CSharp.ShowToast('hello')"> 由前端调用 C# 后台方法 </button>
</div>
浏览器预览
5.3 VS2017 按 F5 部署, 可以看的模拟器也正常把本地站点加载进来了
点击 "获取前端 JS 返回的数据"
6,APP 执行前端 JS 方法
6.1 重写 OnCreate
- // 必须重写 WebView 客户端
- webView.SetWebViewClient(new CustomWebViewClient());
- // 先打开首页
- webView.LoadUrl("http://192.168.0.113:8080/");
- // APP 主动获取前端数据
- var btn = FindViewById<Button>(Resource.Id.button1);
- btn.Click += delegate
- {
- var callback = new ReceiveValueCallback();
- callback.OnReceiveValueCallback += (message) =>
- {
- Toast.MakeText(this.ApplicationContext, message, ToastLength.Short).Show();
- };
- webView.EvaluateJavascript("GetData()", callback);
- };
6.2 新建 CustomWebViewClient.cs
- class CustomWebViewClient : WebViewClient
- {
- public override bool ShouldOverrideUrlLoading(WebView view, String url)
- {
- view.LoadUrl(url);
- return true;
- }
- }
6.3 新建 ReceiveValueCallback.cs, 这个类主要负责处理前端返回的数据
- public class ReceiveValueCallback : Java.Lang.Object, IValueCallback
- {
- public delegate void OnReceiveValueCallbackHandler(string message);
- public event OnReceiveValueCallbackHandler OnReceiveValueCallback;
- // 重写 ReceiveValue 方法
- public void OnReceiveValue(Java.Lang.Object value)
- {
- OnReceiveValueCallback(value.ToString());
- }
- }
6.4 修改 Index.html
- @{
- ViewBag.Title = "Home Page";
- }
- <br />
- <div class="jumbotron">
<button type="button" onClick="CSharp.ShowToast('hello')"> 由前端调用 C# 后台方法 </button>
- </div>
- <script type="text/javascript">
- function GetData() {
- return "123456789";
- }
- </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 应运而生.
来源: https://www.cnblogs.com/lanxiaoke/p/8725370.html