C# 开发Android应用之WebApp

2018 年 4 月 7 日 DotNet

(点击上方蓝字,可快速关注我们)


来源:蓝建荣

cnblogs.com/lanxiaoke/p/8725370.html


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应运而生。


看完本文有收获?请转发分享给更多人

关注「DotNet」,提升.Net技能 

淘口令复制以下红色内容,再打开手淘即可购买

范品社,使用¥极客T恤¥抢先预览(长按复制整段文案,打开手机淘宝即可进入活动内容)

登录查看更多
0

相关内容

C# 是微软推出的一种基于.NET框架的、面向对象的高级编程语言。C# 由 C 语言和 C++ 派生而来,继承了其强大的性能,同时又以 .NET 框架类库作为基础,拥有类似 Visual Basic 的快速开发能力。
【2020新书】使用高级C# 提升你的编程技能,412页pdf
专知会员服务
56+阅读 · 2020年6月26日
【实用书】Python技术手册,第三版767页pdf
专知会员服务
229+阅读 · 2020年5月21日
【实用书】Python爬虫Web抓取数据,第二版,306页pdf
专知会员服务
115+阅读 · 2020年5月10日
【电子书】C++ Primer Plus 第6版,附PDF
专知会员服务
83+阅读 · 2019年11月25日
用 Python 开发 Excel 宏脚本的神器
私募工场
26+阅读 · 2019年9月8日
用Now轻松部署无服务器Node应用程序
前端之巅
16+阅读 · 2019年6月19日
7 款实用到哭的App,只说一遍
高效率工具搜罗
84+阅读 · 2019年4月30日
使用 C# 和 Blazor 进行全栈开发
DotNet
6+阅读 · 2019年4月15日
从webview到flutter:详解iOS中的Web开发
前端之巅
5+阅读 · 2019年3月24日
I2P - 适用于黑客的Android应用程序
黑白之道
28+阅读 · 2019年3月6日
C# 10分钟完成百度人脸识别
DotNet
3+阅读 · 2019年2月17日
Android P正式发布,你需要尽快做适配了
前端之巅
3+阅读 · 2018年8月7日
Arxiv
10+阅读 · 2020年4月5日
VIP会员
相关VIP内容
相关资讯
用 Python 开发 Excel 宏脚本的神器
私募工场
26+阅读 · 2019年9月8日
用Now轻松部署无服务器Node应用程序
前端之巅
16+阅读 · 2019年6月19日
7 款实用到哭的App,只说一遍
高效率工具搜罗
84+阅读 · 2019年4月30日
使用 C# 和 Blazor 进行全栈开发
DotNet
6+阅读 · 2019年4月15日
从webview到flutter:详解iOS中的Web开发
前端之巅
5+阅读 · 2019年3月24日
I2P - 适用于黑客的Android应用程序
黑白之道
28+阅读 · 2019年3月6日
C# 10分钟完成百度人脸识别
DotNet
3+阅读 · 2019年2月17日
Android P正式发布,你需要尽快做适配了
前端之巅
3+阅读 · 2018年8月7日
Top
微信扫码咨询专知VIP会员