混合app開發--js和webview之間的交互總結

使用場景：原生APP內嵌套H5頁面，app使用的是webview框架進行嵌套

這樣就存在兩種情況

1.原生app調用H5的方法

2.H5調用app的方法

分別講解下，其實app與H5之間的交互式非常簡單的，都有成熟的解決方法，下面說下，這次項目中，我們用到的方法

app調用H5方法

其實就一句話，app在引入某個頁面的時候可以直接調用這個頁面的js方法，但是注意一點，js方法不能有多級嵌套，否則會調用失敗

//直接調用可以成功
function fn(){
  console.log("調用h5");  
}

//下面這種情況是調用不成功的
$(document).ready(function(){
  function fn(){}//如果app調用這個方法是調用不到的
});

window.onload=function(){
   function fn(){}//這個方法也是調用不到的 
};

H5調用app的方法

var isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i) ? true : false;
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
    }
};
var handler = {
    callHander: function (json) {
        if (isMobile.iOS()) {
            window.webkit.messageHandlers.control.postMessage(JSON.stringify(json))
        }
        if (isMobile.Android()) {
            window.control.postMessage(JSON.stringify(json));
        }
    }
};

直接這樣調用就可以了

handler.callHander({
    'body':'share' //方法名，這個是和app端自行約定的
    ...參數寫多少都是約定好的
});

這樣就可以調用原生的方法了，經常H5的頁面嵌套到app中，需要定義頭部的導航的標題，和右上角顯示的內容，這些其實都可以通過H5傳遞參數給app來定義的。