使用C#開發Android應用之WebApp

近段時間了解了一下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應運而生。