js和原生app交互，傳遞方法名和參數

前段時間，嵌入到app的H5頁面，需要和原生app做交互，查了一下資料，記錄了一些東西，方便以后查看翻閱。

此例中，在和原生app做交互時，前端主要做兩件事情：

1、前端定義方法名，並且告知app開發人員定義的方法名、傳遞的參數名，方便app人員獲取；

2、Android和ios交互的js寫法不一樣，所以需要判斷該手機是Android還是ios。

 

下面是需求，以及實現的代碼和截圖：

需求： 點擊H5頁面中的按鈕“立即加入”，跳轉到原生app支付頁面，傳給app一個活動id

實現代碼：

1.html代碼：

解釋：paymentVip 是定義的方法名，{$vipactivity.id} 是php開發人員傳遞的活動id，其實僅僅就是傳遞的一個參數。

 

 

<div class="default-content">
    <img src="/mobile/newest/img/user/vip_title.png">
    <a href="javascrip:;" class="btn" onclick="paymentVip('{$vipactivity.id}')">立即加入</a>
</div>

 

2、js代碼：

解釋：（1）、paymentVip 是定義的方法名，{"activityId": id} 是傳遞給app的參數。 第3行代碼  var mobile=$('#mobile').val(); 是獲取當前機型，對應不同的js寫法，ios和android 在第3和第9行傳遞的方法名，一定和定義的方法名 paymentVip 保持一致。自行修改方法名和 傳遞的參數，其余的寫法保持一致就可以了；

（2）如果和app交互不需要傳參， 則直接去掉參數，本例中直接去掉 {"activityId": id} 。但是機型是ios不傳參，但要額外傳遞 {"code": 1}，code值隨便，主要是為了方便ios 獲取定義的方法名，如果不傳一個類似的參數，ios總是獲取不到定義分方法，不知道為什么。

/*6.1——vip跳轉*/
function paymentVip(id) {
    var mobile=$('#mobile').val();
    if (mobile == 'ios') {
        window.webkit.messageHandlers.paymentVip.postMessage({"activityId": id});
    }
    if (mobile == 'android') {
        window.WebViewJavascriptBridge.callHandler(
            'paymentVip',
            {"activityId": id},
            function (responseData) {
                document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
            }
        );
    }
}

截圖展示：

圖1：html代碼

 圖2：對應的js代碼

 

 圖3：傳遞參數為空的代碼，注意ios寫法

 

 

如有錯誤，請指出，我是小白，我要學習！