How to connect H5 with ios and android data

Requirements:

The APP must use an H5 page for display, and the corresponding product ID must be obtained. The user clicks on the H5 page to jump back to the APP's native page.

Method:

First, you must determine whether the user is an ios or an android device (only ios and android are considered here, because the writing methods are still a little different, so they are separated), Then disable the jump of the H5 page, obtain the ID of the click area, and pass it to the APP.

ios:goDetail is the method they want to call in ios, data is the ID value, and type is the type that can be passed to the APP when there are other parameters

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: Call a method gotoAndroidApp() written in H5 in the Android code, and then they get the value of the goodsDetail parameter, the first one is the ID, and the second one is the type value , when there are other parameters, you can pass multiple

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

Complete case:

    
    
    



    ios点击按钮


    android点击按钮

The above is the detailed content of How to connect H5 with ios and android data. For more information, please follow other related articles on the PHP Chinese website!