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

需求：

　　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;
    });
}

完整的案例：

##

    
    
    



    ios点击按钮


    android点击按钮

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