混合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来定义的。