共用的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。