標籤：.com 是你 基類 text 效果 方法 ldo url app應用
前言上篇文章地址:C#開發行動裝置 App系列(1.環境搭建)
嗯..一周了 本來打算2天一更的 - - ,結果 出差了..請各位原諒..
今天我們來講一下使用WebView搭建WebApp應用.
說明一下為何要用WebApp的形式,因為首先..易於更新,其次學習成本又會降低一個檔次
因為不需要去很深入的瞭解各種安卓的介面布局,我們直接全屏覆蓋一個WebView就好了.(當然,實際應用中還是需要加入一部分原生控制項來提高使用者體驗)
確定一下本篇的學習目標:
1.學會使用WebView基礎功能
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;//設定允許執行JSsettings.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基礎開發了.
當然,這些只是基礎,我們要做一個商業應用..肯定是需要調用到機器的硬體裝置,比如陀螺儀..網路攝影機什麼之類的..
這個我們留待後面講解..敬請期待.. ...
順便說一句..各位大哥 - -,期待更新的..是不是應該點個推薦加個關注?..(滑稽)
C#開發行動裝置 App系列(2.使用WebView搭建WebApp應用)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
