近段时间了解了一下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(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";

}



   

浏览器预览

 

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