首頁 > web前端 > js教程 > 主體

H5跟ios、android資料對接的方式

一个新手
發布: 2017-10-19 09:44:21
原創
2240 人瀏覽過

需求:

  APP要用H5頁面做展示,而且要取得對應的商品ID,使用者點擊H5頁面跳回APP原生頁面。

方法:

  先要判斷使用者是ios還是android裝置(這裡只考慮ios跟android,因為它兩個寫法還是有點不一樣,所以分開),然後禁止掉H5頁面的跳轉,取得點擊區域的ID,傳給APP。

ios:其中goDetail是ios他們要呼叫的方法,data就是ID值,type是類型有其它參數的時候可以傳給APP


var u = navigator.userAgent; //获取用户设备
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

$("a").click(function(){
    var href = $(this).attr("data-href");
    if (isIOS && window.WebViewJavascriptBridge) { //ios app 设备才执行
        $(this).attr("href","javascript:;");//禁止H5页面跳转
        WebViewJavascriptBridge.callHandler('goDetail', {"data": href,'type':"1"}, function(){

        });
        return false;

    }
});
登入後複製

android:在安卓程式碼裡面呼叫H5裡面寫的一個方法gotoAndroidApp(),然後他們取得goodsDetail參數的值,第一個為ID,第二個為type值,有其它參數的時候可以依序傳多個


// 安卓app才调用的方法
function gotoAndroidApp() {
    $("a").click(function(){
        $(this).attr("href","javascript:;");
        var href = $(this).attr("data-href");
        window.androidVik.goodsDetail(href,1);
        return false;
    });
}
登入後複製

完整的案例:


##




    
    
    对接app







登入後複製

以上是H5跟ios、android資料對接的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板