Android應用中怎么實現與H5互調

發布時間：2020-12-04 16:23:53 來源：億速云閱讀：173 作者：Leah 欄目：移動開發

Android應用中怎么實現與H5互調？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

案例一：Java與Js簡單互調

首先，在Android代碼中加載H5頁面：

private void initWebView() {
  webView = new WebView(this);
  WebSettings webSettings = webView.getSettings();
  //設置支持javaScript腳步語言
  webSettings.setJavaScriptEnabled(true);

  //支持雙擊-前提是頁面要支持才顯示
  webSettings.setUseWideViewPort(true);

  //支持縮放按鈕-前提是頁面要支持才顯示
  webSettings.setBuiltInZoomControls(true);

  //設置客戶端-不跳轉到默認瀏覽器中
  webView.setWebViewClient(new WebViewClient());

  //加載網絡資源
  //webView.loadUrl("http://atguigu.com/teacher.shtml");
  webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

  //顯示頁面
  setContentView(webView);
 }

JavaAndJavaScriptCall.html:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <script type="text/javascript">

 function javaCallJs(){
   document.getElementById("content").innerHTML += 
    "<br\>java調用了js無參函數";
 }

 function javaCallJs(arg){
   document.getElementById("content").innerHTML =
    ("歡迎："+arg );
 }


 function showDialog(){
  alert("谷粉們你好,我是來自javascript");
 }
 </script>
</head>
<body>
<div align="left" id="content"> 谷粉</div>

<input type="button" value="點擊Android被調用" onclick="window.Android.showToast()" />
</body>
</html>

Java調用javaScript:

/**
 * Java調用javaScript
 * @param numebr
 */
private void login(String numebr) {
 webView.loadUrl("javascript:javaCallJs("+"'"+numebr+"'"+")");
 setContentView(webView);
}

JavaScript調用Java

 /**
  * js可以調用該類的方法
  */
 class AndroidAndJSInterface{
  @JavascriptInterface
  public void showToast(){
   Toast.makeText(JavaAndJSActivity.this, "我被js調用了", Toast.LENGTH_SHORT).show();
  }
 }
 //與此同時需要在webview當中注冊，后面的“Android”與html中的對應：
 webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");
 //html里的點擊事件實現：<br>
 <input type="button" value="點擊Android被調用" onclick="window.Android.showToast()" />

案例二：H5頁面調用Android播放視頻

了解了簡單調用，下面講的這個也就簡單了:

1_JsCallJavaVideoActivity的布局和實例化控件

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.atguigu.androidandh6.JsCallJavaVideoActivity">

 <WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

</RelativeLayout>

2_實例化控件并且配置

public class JsCallJavaVideoActivity extends Activity {

 private WebView webView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_js_call_java_video);
  webView = (WebView) findViewById(R.id.webview);
  WebSettings webSettings = webView.getSettings();
  //設置支持javaScript腳步語言
  webSettings.setJavaScriptEnabled(true);

  //支持雙擊-前提是頁面要支持才顯示
//  webSettings.setUseWideViewPort(true);

  //支持縮放按鈕-前提是頁面要支持才顯示
  webSettings.setBuiltInZoomControls(true);

  //設置客戶端-不跳轉到默認瀏覽器中
  webView.setWebViewClient(new WebViewClient());

  //加載網絡資源
//  webView.loadUrl("http://atguigu.com/teacher.shtml");
   webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");

 }

 }

3_加載頁面

//加載本地資源 
 webView.loadUrl("file:///android_asset/RealNetJSCallJavaActivity.htm");

4_參照js代碼寫Java被調用代碼

url = "/mobiles/interActive/65411";
var videourl = "http://10.0.2.2:8080/yellow.mp4";
var itemid = "65411";
var itemdesc = "1級單殺小龍，5級單殺峽谷先鋒！"; 
var itempic = "https://cache.yisu.com/upload/information/20200623/125/130803.jpg";
var itemtitle = "6.9瑪爾扎哈OP套路教程";
var obj_play = document.getElementById('play');
var obj_download = document.getElementById('download');
if(obj_play != null) {
 obj_play.ontouchstart = function() {
  this.className = 'inter_click';
  javascript:android.playVideo(itemid, videourl, itemtitle);
  ajaxrequest('/stat/item', "POST", true, {type:'play', id:itemid});
 }
 obj_play.ontouchend = function() {
  this.className = 'inter';
 }
}

5_配置Javascript接口

//設置支持js調用java
webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");

6_Javascript接口類

class AndroidAndJSInterface {
 /**
  * 該方法將被js調用
  * @param id
  * @param videoUrl
  * @param tile
  */
 @JavascriptInterface
 public void playVideo(int id,String videoUrl,String tile){
  //調起系統所有播放器
  Intent intent = new Intent();
  intent.setDataAndType(Uri.parse(videoUrl),"video/*");
  startActivity(intent);
 }
}

案例三：H5頁面調用Android撥打電話

1_JsCallJavaCallPhoneActivity布局

<&#63;xml version="1.0" encoding="utf-8"&#63;>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context="com.atguigu.androidandh6.JsCallJavaVideoActivity">

 <WebView
  android:id="@+id/webview"
  android:layout_width="match_parent"
  android:layout_height="match_parent"/>

</RelativeLayout>

2_初始化WebView并且配置

private WebView webView;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_js_call_java_video);
  webView = (WebView) findViewById(R.id.webview);
  WebSettings webSettings = webView.getSettings();
  //設置支持javaScript腳步語言
  webSettings.setJavaScriptEnabled(true);

  //支持雙擊-前提是頁面要支持才顯示
//  webSettings.setUseWideViewPort(true);

  //支持縮放按鈕-前提是頁面要支持才顯示
  webSettings.setBuiltInZoomControls(true);

  //設置客戶端-不跳轉到默認瀏覽器中
  webView.setWebViewClient(new WebViewClient());

  //設置支持js調用java
  webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");

  //加載本地資源
//  webView.loadUrl("http://atguigu.com/teacher.shtml");
  webView.loadUrl("file:///android_asset/JsCallJavaCallPhone.html");

 }

3_加載JsCallJavaCallPhone.html頁面

//加載本地資源
// webView.loadUrl("http://atguigu.com/teacher.shtml");
  webView.loadUrl(file:///android_asset/JsCallJavaCallPhone.html);

4_從java代碼傳遞json數據給javascript

class AndroidAndJSInterface {
 /**
  * 該方法將被js調用,用于加載數據
  */
 @JavascriptInterface
 public void showcontacts() {
  // 下面的代碼建議在子線程中調用
  String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";
  // 調用JS中的方法
  webView.loadUrl("javascript:show('" + json + "')");
 }

 }

5_撥打電話代碼

class AndroidAndJSInterface {
  /**
   * 該方法將被js調用,用于加載數據
   */
  @JavascriptInterface
  public void showcontacts() {
   // 下面的代碼建議在子線程中調用
   String json = "[{\"name\":\"阿福\", \"phone\":\"18600012345\"}]";
   // 調用JS中的方法
   webView.loadUrl("javascript:show('" + json + "')");
  }
  /**
   * 撥打電話
   * @param phone
   */
  public void call(String phone) {
   Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
//   startActivity(intent);
  }
 }

6_h6頁面：

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Insert title here</title>
  <script type="text/javascript">
   function show(jsondata){   
     var jsonobjs = eval(jsondata);
     var table = document.getElementById("personTable");
     for(var y=0; y<jsonobjs.length; y++){
      var tr = table.insertRow(table.rows.length); 
      var td1 = tr.insertCell(0);
      var td2 = tr.insertCell(1);
      td2.align = "center";
      td1.innerHTML = jsonobjs[y].name;
      td2.innerHTML = "<a href='javascript:Android.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";
     }
   }

  </script>
 </head>
 <body onload="javascript:Android.showcontacts()">

 <table border="0" width="100%" id="personTable" cellspacing="0">
   <tr>
    <td width="30%">姓名</td>
    <td align="center">電話</td>
   </tr>
  </table>


 </body>
</html>

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。

向AI問一下細節

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

Android應用中怎么實現與H5互調

猜你喜歡

亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

Android應用中怎么實現與H5互調

猜你喜歡

最新資訊

相關推薦

相關標簽