上篇文章地址:C#開發移動應用系列(1.環境搭建)javascript
嗯..一週了 原本打算2天一更的 - - ,結果 出差了..請各位原諒..html
今天咱們來說一下使用WebView搭建WebApp應用.前端
說明一下爲什麼要用WebApp的形式,由於首先..易於更新,其次學習成本又會下降一個檔次java
由於不須要去很深刻的瞭解各類安卓的界面佈局,咱們直接全屏覆蓋一個WebView就行了.(固然,實際應用中仍是須要加入一部分原生控件來提升用戶體驗)web
肯定一下本篇的學習目標:框架
1.學會使用WebView基礎功能ide
2.經過WebView調用頁面中的JS代碼函數
3.經過WebView讓頁面中的JS代碼調用後臺的C#代碼工具
效果圖:佈局
1.使用WebView構建基礎框架
咱們首先打開上一篇咱們只放了一個button的界面.
從左側工具欄中找到WebView並拖到咱們的界面中,並放大到覆蓋整個頁面.位置如圖:
而後編寫MainActivity.cs文件,在OnCreate()方法中獲取咱們的webView並進行基礎設置
代碼以下:
//獲取WebView對象 var webView = FindViewById<WebView>(Resource.Id.webView1); //申明WebView的配置 WebSettings settings = webView.Settings; //設置容許執行JS settings.JavaScriptEnabled = true; //設置能夠經過JS打開窗口 settings.JavaScriptCanOpenWindowsAutomatically = true; //這裏是本身建立的WebView客戶端類 var webc = new MyCommWebClient(); //設置本身的WebView客戶端 webView.SetWebViewClient(webc);
說明都已經在註釋裏了.
下面咱們來說一下倒數第二行的MyCommWebClient是怎麼來的.
這裏是咱們本身申明的一個客戶端類,用來攔截頁面的跳轉鏈接(否則會調用安卓原生遊覽器加載新頁面),並在本頁面中加載用的,代碼以下:
class MyCommWebClient: WebViewClient
{
//重寫頁面加載的方法
public override bool ShouldOverrideUrlLoading(WebView view, String url)
{
//使用本控件加載
view.LoadUrl(url);
//並返回true
return true;
}
}
這樣,當頁面中有A標籤鏈接跳轉的時候就不會調用安卓的原生遊覽器加載了.
最後,咱們在MainActivity.cs文件加上一句代碼
webView.LoadUrl("你的地址");
就會跳轉到你設定的頁面中了.
至此就完成了基本的WebView設置
咱們進入下一個階段...
2.經過WebView調用頁面中的JS代碼
既然是要進行webAPP的開發 那麼經過WebView來調用JS,確定是少不了的..
下面咱們就開始講解如何調用.
首先咱們要建立一個Web項目..我這裏的例子建立的ASP.NET Core的..
至於怎麼讓你的Web項目能夠局域網訪問..我就很少說了..自行百度
修改咱們的前端HTML頁面
<body ontouchstart="">
<button onclick="showmessage('頁面按鈕點擊')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">彈出</button>
<script src="~/js/js/mui.js"></script>
<script src="~/js/examples/hello-mui/js/mui.js"></script>
<script>
//定義一個JS方法,並返回一個字符串
function showmessage(message) {
mui.alert(message)
return "JS反饋"
}
</script>
</body>
若是咱們不須要獲取這個JS的返回值
那麼很簡單,代碼以下:
webView.LoadUrl("javascript:" + "showmessage('安卓按鈕點擊')");
就這樣,一句便可..
若是你要獲取返回值.那就請往下看..
咱們須要使用到WebView的EvaluateJavascript函數
這個函數有兩個參數,一個是你要調用的JS,另外一個則是IValueCallback
如圖:
咱們要建立一個類,來繼承這個IValueCallback並提供返回值
代碼以下:
public class ValueCall : Java.Lang.Object, IValueCallback
{//定義delegate
public delegate void TestEventHandler(string message);
//用event 關鍵字聲明事件對象
public event TestEventHandler TestEvent;
public void Dispose()
{
}
//重寫方法,獲取返回值
public void OnReceiveValue(Java.Lang.Object value)
{
string a = value.ToString();
TestEvent(a);
}
}
這裏咱們採用事件回調的方式,來返回咱們獲取的Value,(注:細心的朋友確定發現了,咱們還繼承了Java.Lang.Object,由於這個接口是Java的對象..因此..咱們須要繼承一下JAVA基類..否則會報類型轉換錯誤)
而後咱們回到MainActivity.cs
在裏面定義ShowMessage()的函數以下:
public void ShowMessage(string message)
{
//很簡單就是彈出返回值
Toast.MakeText(this.ApplicationContext, message, ToastLength.Short).Show();
}
編寫OnCreate函數中的代碼以下:
//獲取按鈕
var btn = FindViewById<Button>(Resource.Id.button1);//添加點擊事件
btn.Click += delegate
{
ValueCall vc = new ValueCall();
//添加彈出返回值事件
vc.TestEvent += ShowMessage;
//調用JS
webView.EvaluateJavascript("showmessage('安卓按鈕點擊')", vc);
};
這樣,咱們就完成了整個C#調用JS代碼並獲取返回值的過程
3.經過WebView讓頁面中的JS代碼調用後臺的C#代碼
下面咱們就來說如何使用JS來調用C#代碼.
首先,咱們申明一個類以下:
public class MyJSInterface : Java.Lang.Object
{
Context context;
//由於要彈出內容..因此構造函數須要一個當前的上下文對象
public MyJSInterface(Context context)
{
this.context = context;
}
//注意,這裏須要加兩個特性
[Export]
[JavascriptInterface]
public void SayHello(string message)
{
Toast.MakeText(context, message, ToastLength.Short).Show();
}
}
其實很簡單,就是建立一個函數,而後添加兩個特性,表明着JS能夠調用(有點相似WebAPI).
這裏須要注意的是Java.Interop.ExportAttribute這個特性.
須要項目引用Mono.Android.Export
注意這裏的項目引用..的意思..就是 右鍵項目-->選擇添加引用..而不是隻Using
回到咱們的MainActivity.cs文件中的OnCreate方法.給咱們webview繼續添加代碼以下:
//添加咱們剛建立的類,並命名爲wv
webView.AddJavascriptInterface(new MyJSInterface(this), "wv");
//加載測試頁面
webView.LoadUrl("http://192.168.14.134:57870/");
修改咱們測試頁面的代碼以下:
<body ontouchstart="">
<button onclick="showmessage('頁面按鈕點擊')" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">彈出</button>
<button onclick="ShowAdMessage()" type="button" class="mui-btn mui-btn-primary mui-btn-outlined">調用後臺C#</button>
<script src="~/js/js/mui.js"></script>
<script src="~/js/examples/hello-mui/js/mui.js"></script>
<script>
function showmessage(message) {
mui.alert(message)
return "JS反饋"
}
function ShowAdMessage() {
// alert(wv);
wv.SayHello("這裏是JS調用後臺的C#代碼");
}
</script>
</body>
咱們添加了一個按鈕,並直接經過wv對象來調用後臺的函數...
信息彈出成功.到此.咱們的JS調用C#代碼就調用結束了
代碼雖然很少,可是很實用.
基本瞭解這些內容 咱們就可開始咱們的WebApp基礎開發了.
固然,這些只是基礎,咱們要作一個商業應用..確定是須要調用到機器的硬件設備,好比陀螺儀..攝像頭什麼之類的..
這個咱們留待後面講解..敬請期待.. ...
順便說一句..各位大哥 - -,期待更新的..是否是應該點個推薦加個關注?..(滑稽)