C＃開發Android應用之WebApp
來源：藍建榮
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(Resource.Id.webView1);
}
載入網頁就是這樣簡單，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";
}
由前端調用C#後台方法
瀏覽器預覽
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(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";
}
由前端調用C#後台方法
function GetData() {
}
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恤￥搶先預覽（長按複製整段文案，打開手機淘寶即可進入活動內容）
TAG:DotNet |