H5與Android之間的交互


關於Android與JS網頁端的交互,網上有很多教程,剛做這功能,參考了多方資料,最終出來后覺得簡單,但是為實現的話有諸多小問題,最終效果如下:

效果截圖

現在簡單整理一下:(直接貼代碼,注釋詳細,應該能懂的):

 一、首先是網頁端,這個就是一些簡單的標簽語言和JS函數:

  

復制代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>H5 And Android</title>
<script>  
    //定義本地方法 效果提供給Android端調用   被調用后將獲得參數值
    function callH5(data){  
        document.getElementById("result").innerHTML="result success for Android to:"+data;  
    }  
    
    
    //定義本地點擊事件 效果調用Android方法 傳遞參數給Android客服端
    function myOnclick(){
        document.getElementById("result").innerHTML="按鈕被點擊了"
        //調用android本地方法  調用對象由Android定義實例化,調用方法由Android提供 (具體對象名和方法待定,可變更)
        myObj.callAndroid("彈窗顯示回調成功了~~~");  
    }
    </script>
</head>
<body>  
    <button id="button" onclick="myOnclick()">點擊調用Android方法</button>  
    <p/>
    <div id="result">效果展示</div>  
</body>  
</html>
復制代碼

 

該代碼已經放於個人服務器上,提供地址,有需要的童鞋可以直接使用:http://lvyerose.com/h5andAndroid.html 

 二、接下來就是Android中加載web網頁,並且設置完成交互了,直接上代碼,也有詳細注釋:

 

復制代碼
 1 package com.lvyerose.h5andandroid;
 2 
 3 import android.annotation.SuppressLint;
 4 import android.os.Bundle;
 5 import android.support.v7.app.AppCompatActivity;
 6 import android.support.v7.widget.Toolbar;
 7 import android.view.View;
 8 import android.webkit.JavascriptInterface;
 9 import android.webkit.WebView;
10 import android.widget.Toast;
11 
12 public class MainActivity extends AppCompatActivity {
13     private WebView mWebView;
14     public void onCreate(Bundle savedInstanceState) {
15         super.onCreate(savedInstanceState);
16         setContentView(R.layout.activity_main);
17         Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
18         setSupportActionBar(toolbar);
19 
20         mWebView = (WebView) findViewById(R.id.webView);
21         initWeb();
22 
23     }
24 
25     @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})
26     void initWeb(){
27         //設置編碼
28         mWebView.getSettings().setDefaultTextEncodingName("utf-8");
29         //支持js
30         mWebView.getSettings().setJavaScriptEnabled(true);
31 
32         //設置本地調用對象及其接口
33         //第一個參數為實例化自定義的接口對象  第二個參數為提供給JS端調用使用的對象名
34         mWebView.addJavascriptInterface(new Contact() {
35 
36             @JavascriptInterface    //必須加的注解
37             @Override
38             public void callAndroid(String phone) {
39                 Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();
40             }
41         }, "myObj");
42         //載入js
43         mWebView.loadUrl("http://lvyerose.com/h5andAndroid.html");
44 
45         findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
46             @Override
47             public void onClick(View v) {
48                 //Android調用Js方法,其中參數 'Android OK !!!' 可傳入變量  效果如下:
49 //                mWebView.loadUrl("javascript:callH5('"+str+"')");
50                 mWebView.loadUrl("javascript:callH5('Android OK !!!')");
51 
52             }
53         });
54     }
55     //定義接口,提供給JS調用
56     interface Contact {
57         @JavascriptInterface
58         void callAndroid(String phone);
59 
60     }
61 
62 
63 
64 }
復制代碼

 

由此2步,即可完成交互效果~~~如有疑問,歡迎FQ~~~

最后附上一篇不錯的博文,關於 Android中WebView的基本使用,很詳細,涵蓋各方面。

來自蜀漢玫瑰編輯!
 
分類:  Android
 
好文要頂  關注我  收藏該文   
0
0
 
(請您對文章做出評價)
 
« 上一篇: MaterialDrawer開源側滑菜單的使用手冊
» 下一篇: Android開發藝術1之Activity的生命周期


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM