共用的h5回调页面

产生背景：

APP里的公用页面，像帮助中心页、授权认证结果页、各种协议页面，都需要做成H5页面，方便安卓和ios去调用。

交互情况描述：

    要是有动态值，就需要定义在自己H5链接的后面，让他们传值，自己取参，动态放入页面中，动态数据多，就需要调用后台接口，所需的参数让安卓和ios在调取H5页面时，传过来，取到在调用后台接口，获取数据渲染页面。
   例如： https://www.cnblogs.com/missme-lina/p/10688954.html?res=0&no=1
   这个链接参数定义好，给APP他们，他们会直接调H5页面，要是H5页面有回到APP的上的操作，如认证成功，回到APP“认证中心”界面，那就需要添加APP的方法，去调用，本地调用是没定义，这需要APP定义好给你，你在添加调用，看他们APP的是否可以正常调用并回到他们想自己的“认证中心”界面。

具体交互流程，基本就描述完毕，下面总结一下，具体操作。

具体操作：

取参、调后台接口

基础操作，略过

判断是访问来源：

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS){
  alert('来源是ios');
}
if(isAndroid){
  alert('来源是isAndroid');
}

调用APP方法

if(isAndroid){
    $(".return-btu").on("click",function(){
        window.js.getResult(address);// js调用java代码，安卓用的java
        //.js.getResult() 安卓那自定义的方法 .js和.getResult是可变的方法名
        //address是前端传入参数
    })
}else{ //ios  
    $(".return-btu").on("click",function(){
        window.webkit.messageHandlers.backToAuthCenter.postMessage(address);//同理，ios自定义方法，和传参
    })
}

在本地自己这，展示H5页面，调用是没用的，会报“方法没定义”的错误，正常，这需要H5嵌套在APP界面里，才可以执行他们的方法，看他们自测结果，配合调试。

说明，这说的app代指安卓和ios。

转载于:https://www.cnblogs.com/missme-lina/p/10694385.html