使用C#开发Android应用之WebApp

我不是布朗尼 發表於 2019-10-22 21:05:00

<div id="cnblogs_post_body" class="blogpost-body ">
近段时间了解了一下VS2017开发安卓应用的一些技术，特地把C#开发WebApp的一些过程记录下来，
欢迎大家一起指教、讨论，废话少说，是时候开始表演真正的技术了。。
 
<h2>1、新建空白Android应用</h2>
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406001510621-234911147.png" alt="">
<h2>2、拖一个WebView控件进来</h2>
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406001537980-1578776813.png" alt="">  <img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406001744561-908725660.png" alt="">
<h2>3、打开模拟器Genymotion，选择一个系统版本，启动</h2>
 <img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406001603743-475324980.png" alt="">
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406001614401-310343237.png" alt="">
<h2>4、加载网页</h2>
4.1 打开MainActivity.cs，在OnCreate方法里添加2行代码
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre> 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 }</pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
加载网页就是这样简单，F5调试，就可以看到模拟器有了变化，打开了我们的应用，并如期加载了网页
 <img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406002007367-369859519.png" alt="">
<h2>5、网页端调用手机APP后台方法</h2>
5.1 打开MainActivity.cs，重写OnCreate为如下
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre> 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 }</pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
标红的是实现前端调用后台方法的关键，新建CustomJSInterface.cs
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre> 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 
11 
12 public void ShowToast(string message)
13 {
14 Toast.MakeText(context, message, ToastLength.Short).Show();
15 }
16 }</pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
而"http://192.168.0.113:8080/"是我们的Web站点，大部分业务逻辑在网站里处理，WebApp只是在外表包了一个壳
5.2 我们再新建一个本地Web站点
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406002642989-1822099308.png" alt="">
改动首页HTML，主要功能是点击按钮，会调用后台ShowToast，这是个提示功能
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre>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></pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
浏览器预览
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406002735024-1374743389.png" alt="">
 
5.3 VS2017按F5部署，可以看的模拟器也正常把本地站点加载进来了
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406002823858-660515670.png" alt="">
点击"获取前端JS返回的数据"
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406002913691-1749342146.png" alt="">
<h2>6、APP执行前端JS方法</h2>
6.1 重写OnCreate
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre> 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 };</pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
6.2 新建CustomWebViewClient.cs
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre>1 class CustomWebViewClient : WebViewClient
2 {
3 public override bool ShouldOverrideUrlLoading(WebView view, String url)
4 {
5 view.LoadUrl(url);
6 return true;
7 }
8 }</pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
6.3 新建ReceiveValueCallback.cs，这个类主要负责处理前端返回的数据
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre> 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 }</pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
6.4 修改Index.html
<div class="cnblogs_code">
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
<pre> 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></pre>
<div class="cnblogs_code_toolbar"><img src="//common.cnblogs.com/images/copycode.gif" alt="复制代码"></div>
</div>
6.5 VS2017按F5部署
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406003354610-205508335.png" alt="">
6.6 点击按钮"获取前端JS返回的数据"
<img src="https://images2018.cnblogs.com/blog/254672/201804/254672-20180406003414163-816085903.png" alt="">
 
<h2> 7、WebAPP使用疑问</h2>
 7.1 细心的人可能注意到：前端代码完全可以自己处理完业务，那还有WebApp什么事情呢？这时的APP完全就跟一个浏览器差不多！
7.2 确实是这样的WebApp相对与其他安卓APP来说，是轻量级的，只是一个壳子，但是他也是有其合适的使用范围；
比如：如果前端并没有数据持久化功能（如纯JS前端），这时要保存数据只能调用其他的WebApi，而由于JS的特性可能会引起一些安全问题。
或者根本没有第三方API，数据需要保存在手机端，JS也没有这种权限。
所以既兼顾了像升级Web站点那样简便，又有一些手机端的操作权限，WebApp应运而生。
 
</div>
 
出处：https://www.cnblogs.com/lanxiaoke/p/8725370.html

</div>
<div id="MySignature" role="contentinfo">
<div class="div_masklayer" id="div_masklayer"></div>
<div class="div_popup" id="Div_popup">
<div style="float:left;width:50%">
<img class="img_zfb" id="img_zfb" src="https://images.cnblogs.com/cnblogs_com/mq0036/508398/o_12.png" />
</div>
<div style="float:left;width:50%">
<img class="img_zfb" id="img_zfb" src="https://images.cnblogs.com/cnblogs_com/mq0036/508398/o_200921131119o_12.png">
</div>
您的资助是我最大的动力！ 金额随意,欢迎来赏！ 
付款后有任何问题请给我留言。
</div>

<div class="autograph">
 如果，您认为阅读这篇博客让您有些收获，不妨点击一下右下角的【推荐】按钮。 
 如果，您希望更容易地发现我的新博客，不妨点击一下绿色通道的【关注我】。(●'◡'●)
因为，我的写作热情也离不开您的肯定与支持，感谢您的阅读，我是【Jack_孟】！
<div class="blogds">
 如果对你有所帮助，赞助一杯咖啡！打

            
 付款后有任何问题请给我留言!!!
</div>
本文来自博客园，作者：jack_Meng，转载请注明原文链接：https://www.cnblogs.com/mq0036/p/11722524.html
【免责声明】本文来自源于网络，如涉及版权或侵权问题，请及时联系我们，我们将第一时间删除或更改！
</div> 
来源：https://www.cnblogs.com/mq0036/p/11722524.html

頁: [1]

琼殿技术论坛's Archiver

使用C#开发Android应用之WebApp