使用C#開發Android應用之WebApp

C# · 發表 2018-11-10 20:51:29

摘要：近段時間瞭解了一下VS2017開發安卓應用的一些技術，特地把C#開發WebApp的一些過程記錄下來，歡迎大家一起指教、討論，廢話少說，是時候開始表演真正的技術了。。 1、新建空白Android應用 [圖片上傳中...(image-89b369-1541851677433-27)]...

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

歡迎大家一起指教、討論，廢話少說，是時候開始表演真正的技術了。。

1、新建空白Android應用

[圖片上傳中...(image-89b369-1541851677433-27)]

2、拖一個WebView控制元件進來

image

3、開啟模擬器Genymotion，選擇一個系統版本，啟動

image

4、載入網頁

4.1 開啟MainActivity.cs，在OnCreate方法裡新增2行程式碼

image

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>

image

載入網頁就是這樣簡單，F5除錯，就可以看到模擬器有了變化，打開了我們的應用，並如期載入了網頁

image

5、網頁端呼叫手機APP後臺方法

5.1 開啟MainActivity.cs，重寫OnCreate為如下

image

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>

image

標紅的是實現前端呼叫後臺方法的關鍵，新建CustomJSInterface.cs

image

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 }

</pre>

image

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

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

image

改動首頁HTML，主要功能是點選按鈕，會呼叫後臺ShowToast，這是個提示功能

image

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>

image

瀏覽器預覽

image

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

image

點選"獲取前端JS返回的資料"

image

6、APP執行前端JS方法

6.1 重寫OnCreate

image

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>

image

6.2 新建CustomWebViewClient.cs

image

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>

image

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

image

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>

image

6.4 修改Index.html

image

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>

image

6.5 VS2017按F5部署

image

6.6 點選按鈕"獲取前端JS返回的資料"

image

7、WebAPP使用疑問

7.1 細心的人可能注意到：前端程式碼完全可以自己處理完業務，那還有WebApp什麼事情呢？這時的APP完全就跟一個瀏覽器差不多！

7.2 確實是這樣的WebApp相對與其他安卓APP來說，是輕量級的，只是一個殼子，但是他也是有其合適的使用範圍；

比如：如果前端並沒有資料持久化功能（如純JS前端），這時要儲存資料只能呼叫其他的WebApi，而由於JS的特性可能會引起一些安全問題。

或者根本沒有第三方API，資料需要儲存在手機端，JS也沒有這種許可權。

所以既兼顧了像升級Web站點那樣簡便，又有一些手機端的操作許可權，WebApp應運而生。

Android開發技術交流qq群；701740775

使用C#開發Android應用之WebApp

1、新建空白Android應用

2、拖一個WebView控制元件進來

3、開啟模擬器Genymotion，選擇一個系統版本，啟動

4、載入網頁

5、網頁端呼叫手機APP後臺方法

6、APP執行前端JS方法

7、WebAPP使用疑問

您可能也會喜歡…