Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> Xamarin.Android 入門之:xamarin使用webserver和html交互,xamarin

Xamarin.Android 入門之:xamarin使用webserver和html交互,xamarin

編輯:關於android開發

Xamarin.Android 入門之:xamarin使用webserver和html交互,xamarin


一、引言

如今,Android+html5開發已經成為最流行的開發模式。

Android 中可以通過webview來實現和js的交互,在程序中調用js代碼,只需要將webview控件的支持js的屬性設置為true

Android(Java)與JavaScript(HTML)交互有四種情況:

1) Android(Java)調用HTML中js代碼

2) Android(Java)調用HTML中js代碼(帶參數)

3) HTML中js調用Android(Java)代碼

4) HTML中js調用Android(Java)代碼(帶參數)

二、准備工作 

1.添加一個Android項目,在Assets中添加一個名為Test的html文件

2.添加以下html代碼到Test.html

<html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> function javacalljs(){ document.getElementById("content").innerHTML += "<br\>java調用了js函數"; } function javacalljswithargs(arg){ document.getElementById("content").innerHTML += ("<br\>"+arg); } </script> </head> <body> this is my html <br /> <a onClick="window.Test.startFunction()">點擊調用java代碼</a><br /> <a onClick="window.Test.startFunction('hello world')">點擊調用java代碼並傳遞參數</a> <br /> <div id="content">內容顯示</div> </body> </html> View Code

3.刪除layout文件夾下的main.axml文件的原油控件,添加以下控件

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="9" /> <ScrollView android:id="@+id/scrollView1" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/msg" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="text" /> </ScrollView> <Button android:id="@+id/button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="java調用js函數" /> </LinearLayout> View Code

三、代碼

1.在MainActivity.cs中刪除原來的代碼,替換以下代碼

[Activity(Label = "WebService", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity, Button.IOnClickListener//繼承按鈕的點擊接口 { /// <summary> /// 定義控件 /// </summary> public WebView webview; public TextView msgtext; protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); //找到控件 webview = FindViewById<WebView>(Resource.Id.webview); msgtext = FindViewById<TextView>(Resource.Id.msg); //找到按鈕並堅挺點擊事件 Button button = FindViewById<Button>(Resource.Id.button); button.SetOnClickListener(this); webview.Settings.JavaScriptEnabled = true;//設置webserver支持js webview.AddJavascriptInterface(this, "Test");//添加js接口 webview.LoadUrl("file:///android_asset/Test.html");//加載html的地址 //webview.LoadUrl(this.GetString(Resource.String.Url));//如果我們的html文件實在服務器端則這邊可以填服務器端的地址例如127.0.0.1:91/Test.html } public void OnClick(View v) { // 無參數調用 webview.LoadUrl("javascript:javacalljs()"); // 傳遞參數調用 webview.LoadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")"); } [Export("startFunction")] public void startFunction() { RunOnUiThread(new Runnable(() => { msgtext.Text = msgtext.Text + "\njs調用了java函數"; })); } /// <summary> /// 當用戶調用了這個方法會傳遞過來一個參數,我們可以獲取出來然後用Android的toast顯示 /// </summary> /// <param name="str"></param> [Export("startFunction")] public void startFunction(string str) { Toast.MakeText(this, str, ToastLength.Short).Show(); RunOnUiThread(new Runnable(() => { msgtext.Text = msgtext.Text + "\njs調用了js函數"+str; })); } } View Code

2.最後在虛擬機上運行,當我們點擊“點擊調用java代碼”的時候在我們程序中多了一行文字,當我們點擊“點擊調用java代碼並傳遞參數”,程序除了添加了一行文字之外還跳出了提示。當我們點擊java調用js函數在我們html頁面山會把我們傳遞的參數顯示出來。好了簡單的Android和html的交互就是這樣。

 

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved