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

時間 2020-06-09

標籤 xamarin.android xamarin android 入門使用 webserver html 交互欄目 Android 简体版

原文原文鏈接

1、引言

現在，Android+html5開發已經成爲最流行的開發模式。javascript

Android 中能夠經過webview來實現和js的交互，在程序中調用js代碼，只須要將webview控件的支持js的屬性設置爲truehtml

Android（Java）與JavaScript（HTML）交互有四種狀況：html5

1） Android（Java）調用HTML中js代碼java

2） Android（Java）調用HTML中js代碼（帶參數）android

3） HTML中js調用Android（Java）代碼git

4） HTML中js調用Android（Java）代碼（帶參數）github

2、準備工做

1.添加一個Android項目，在Assets中添加一個名爲Test的html文件web

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文件的原油控件，添加如下控件ide

<?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

3、代碼

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的交互就是這樣。配上項目地址https://github.com/huguodong/WebService

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。