使用C#開發Android應用之WebApp

時間 2019-11-05

標籤使用 c# 開發 android 應用 webapp 欄目 C# 简体版

原文原文鏈接

近段時間瞭解了一下VS2017開發安卓應用的一些技術，特意把C#開發WebApp的一些過程記錄下來，javascript

歡迎你們一塊兒指教、討論，廢話少說，是時候開始表演真正的技術了。。html

一、新建空白Android應用

二、拖一個WebView控件進來

三、打開模擬器Genymotion，選擇一個系統版本，啓動

四、加載網頁

4.1 打開MainActivity.cs，在OnCreate方法裏添加2行代碼前端

 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         }

加載網頁就是這樣簡單，F5調試，就能夠看到模擬器有了變化，打開了咱們的應用，並如期加載了網頁java

五、網頁端調用手機APP後臺方法

5.1 打開MainActivity.cs，重寫OnCreate爲以下web

 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         }

標紅的是實現前端調用後臺方法的關鍵，新建CustomJSInterface.cs瀏覽器

 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         [Export]
11         [JavascriptInterface]
12         public void ShowToast(string message)
13         {
14             Toast.MakeText(context, message, ToastLength.Short).Show();
15         }
16     }

而"http://192.168.0.113:8080/"是咱們的Web站點，大部分業務邏輯在網站裏處理，WebApp只是在外表包了一個殼安全

5.2 咱們再新建一個本地Web站點ide

改動首頁HTML，主要功能是點擊按鈕，會調用後臺ShowToast，這是個提示功能post

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>

瀏覽器預覽網站

5.3 VS2017按F5部署，能夠看的模擬器也正常把本地站點加載進來了

點擊"獲取前端JS返回的數據"

六、APP執行前端JS方法

6.1 重寫OnCreate

 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             };

6.2 新建CustomWebViewClient.cs

1     class CustomWebViewClient : WebViewClient
2     {
3         public override bool ShouldOverrideUrlLoading(WebView view, String url)
4         {
5             view.LoadUrl(url);
6             return true;
7         }
8     }

6.3 新建ReceiveValueCallback.cs，這個類主要負責處理前端返回的數據

 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     }

6.4 修改Index.html

 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>