C#开发移动应用系列(2.使用WebView搭建WebApp应用)
上篇文章地址:C#開發(fā)移動應(yīng)用系列(1.環(huán)境搭建)
?
嗯..一周了 本來打算2天一更的 - - ,結(jié)果 出差了..請各位原諒..
今天我們來講一下使用WebView搭建WebApp應(yīng)用.
說明一下為何要用WebApp的形式,因?yàn)槭紫?.易于更新,其次學(xué)習(xí)成本又會降低一個檔次
因?yàn)椴恍枰ズ苌钊氲牧私飧鞣N安卓的界面布局,我們直接全屏覆蓋一個WebView就好了.(當(dāng)然,實(shí)際應(yīng)用中還是需要加入一部分原生控件來提高用戶體驗(yàn))
確定一下本篇的學(xué)習(xí)目標(biāo):
1.學(xué)會使用WebView基礎(chǔ)功能
2.通過WebView調(diào)用頁面中的JS代碼
3.通過WebView讓頁面中的JS代碼調(diào)用后臺的C#代碼
效果圖:
正文1.使用WebView構(gòu)建基礎(chǔ)框架
? ?我們首先打開上一篇我們只放了一個button的界面.
? 從左側(cè)工具欄中找到WebView并拖到我們的界面中,并放大到覆蓋整個頁面.位置如圖:
然后編寫MainActivity.cs文件,在OnCreate()方法中獲取我們的webView并進(jìn)行基礎(chǔ)設(shè)置
代碼如下:
//獲取WebView對象 var webView = FindViewById<WebView>(Resource.Id.webView1); //申明WebView的配置 WebSettings settings = webView.Settings; //設(shè)置允許執(zhí)行JS settings.JavaScriptEnabled = true;//設(shè)置可以通過JS打開窗口settings.JavaScriptCanOpenWindowsAutomatically = true; //這里是自己創(chuàng)建的WebView客戶端類 var webc = new MyCommWebClient(); //設(shè)置自己的WebView客戶端 webView.SetWebViewClient(webc);說明都已經(jīng)在注釋里了.
下面我們來講一下倒數(shù)第二行的MyCommWebClient是怎么來的.
這里是我們自己申明的一個客戶端類,用來攔截頁面的跳轉(zhuǎn)連接(不然會調(diào)用安卓原生游覽器加載新頁面),并在本頁面中加載用的,代碼如下:
class MyCommWebClient: WebViewClient{//重寫頁面加載的方法public override bool ShouldOverrideUrlLoading(WebView view, String url){ //使用本控件加載 view.LoadUrl(url);//并返回truereturn true;}}這樣,當(dāng)頁面中有A標(biāo)簽連接跳轉(zhuǎn)的時候就不會調(diào)用安卓的原生游覽器加載了.
最后,我們在MainActivity.cs文件加上一句代碼
webView.LoadUrl("你的地址");就會跳轉(zhuǎn)到你設(shè)定的頁面中了.
至此就完成了基本的WebView設(shè)置
我們進(jìn)入下一個階段...
2.通過WebView調(diào)用頁面中的JS代碼
既然是要進(jìn)行webAPP的開發(fā) 那么通過WebView來調(diào)用JS,肯定是少不了的..
下面我們就開始講解如何調(diào)用.
首先我們要創(chuàng)建一個Web項(xiàng)目..我這里的例子創(chuàng)建的ASP.NET Core的..
至于怎么讓你的Web項(xiàng)目可以局域網(wǎng)訪問..我就不多說了..自行百度
修改我們的前端HTML頁面
<body ontouchstart=""><button onclick="showmessage('頁面按鈕點(diǎn)擊')" 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('安卓按鈕點(diǎn)擊')");就這樣,一句即可..
如果你要獲取返回值.那就請往下看..
我們需要使用到WebView的EvaluateJavascript函數(shù)
這個函數(shù)有兩個參數(shù),一個是你要調(diào)用的JS,另一個則是IValueCallback
如圖:
我們要創(chuàng)建一個類,來繼承這個IValueCallback并提供返回值
代碼如下:
public class ValueCall : Java.Lang.Object, IValueCallback{//定義delegatepublic delegate void TestEventHandler(string message);//用event 關(guān)鍵字聲明事件對象public event TestEventHandler TestEvent;public void Dispose(){}//重寫方法,獲取返回值public void OnReceiveValue(Java.Lang.Object value){string a = value.ToString();TestEvent(a);}}這里我們采用事件回調(diào)的方式,來返回我們獲取的Value,(注:細(xì)心的朋友肯定發(fā)現(xiàn)了,我們還繼承了Java.Lang.Object,因?yàn)檫@個接口是Java的對象..所以..我們需要繼承一下JAVA基類..不然會報類型轉(zhuǎn)換錯誤)
?
然后我們回到MainActivity.cs
在里面定義ShowMessage()的函數(shù)如下:
public void ShowMessage(string message){//很簡單就是彈出返回值Toast.MakeText(this.ApplicationContext, message, ToastLength.Short).Show();}?
編寫OnCreate函數(shù)中的代碼如下:
//獲取按鈕 var btn = FindViewById<Button>(Resource.Id.button1);//添加點(diǎn)擊事件btn.Click += delegate{ValueCall vc = new ValueCall();//添加彈出返回值事件vc.TestEvent += ShowMessage;//調(diào)用JSwebView.EvaluateJavascript("showmessage('安卓按鈕點(diǎn)擊')", vc);};?
這樣,我們就完成了整個C#調(diào)用JS代碼并獲取返回值的過程
?
3.通過WebView讓頁面中的JS代碼調(diào)用后臺的C#代碼
下面我們就來講如何使用JS來調(diào)用C#代碼.
首先,我們申明一個類如下:
public class MyJSInterface : Java.Lang.Object{Context context;//因?yàn)橐獜棾鰞?nèi)容..所以構(gòu)造函數(shù)需要一個當(dāng)前的上下文對象public MyJSInterface(Context context){this.context = context;}//注意,這里需要加兩個特性 [Export][JavascriptInterface]public void SayHello(string message){Toast.MakeText(context, message, ToastLength.Short).Show();}}?
其實(shí)很簡單,就是創(chuàng)建一個函數(shù),然后添加兩個特性,代表著JS可以調(diào)用(有點(diǎn)類似WebAPI).
這里需要注意的是Java.Interop.ExportAttribute這個特性.
需要項(xiàng)目引用Mono.Android.Export
注意這里的項(xiàng)目引用..的意思..就是 右鍵項(xiàng)目-->選擇添加引用..而不是只Using
回到我們的MainActivity.cs文件中的OnCreate方法.給我們webview繼續(xù)添加代碼如下:
//添加我們剛創(chuàng)建的類,并命名為wv webView.AddJavascriptInterface(new MyJSInterface(this), "wv"); //加載測試頁面 webView.LoadUrl("http://192.168.14.134:57870/");?
修改我們測試頁面的代碼如下:
<body ontouchstart=""><button onclick="showmessage('頁面按鈕點(diǎn)擊')" 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">調(diào)用后臺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調(diào)用后臺的C#代碼");}</script> </body>我們添加了一個按鈕,并直接通過wv對象來調(diào)用后臺的函數(shù)...
信息彈出成功.到此.我們的JS調(diào)用C#代碼就調(diào)用結(jié)束了
?
寫在最后?代碼雖然不多,但是很實(shí)用.
基本了解這些內(nèi)容 我們就可開始我們的WebApp基礎(chǔ)開發(fā)了.
當(dāng)然,這些只是基礎(chǔ),我們要做一個商業(yè)應(yīng)用..肯定是需要調(diào)用到機(jī)器的硬件設(shè)備,比如陀螺儀..攝像頭什么之類的..
這個我們留待后面講解..敬請期待.. ...
順便說一句..各位大哥 - -,期待更新的..是不是應(yīng)該點(diǎn)個推薦加個關(guān)注?..(滑稽)
posted on 2018-09-10 11:32 NET未來之路 閱讀(...) 評論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/9618189.html
總結(jié)
以上是生活随笔為你收集整理的C#开发移动应用系列(2.使用WebView搭建WebApp应用)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【共读Primer】55.[6.4]函数
- 下一篇： WhqDatabase 我自己用C#开发