zoukankan      html  css  js  c++  java
  • 共用的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。

  • 相关阅读:
    八数码难题 (codevs 1225)题解
    小木棍 (codevs 3498)题解
    sliding windows (poj 2823) 题解
    集合删数 (vijos 1545) 题解
    合并果子 (codevs 1063) 题解
    等价表达式 (codevs 1107)题解
    生理周期 (poj 1006) 题解
    区间 (vijos 1439) 题解
    区间覆盖问题 题解
    种树 (codevs 1653) 题解
  • 原文地址:https://www.cnblogs.com/missme-lina/p/10694385.html
Copyright © 2011-2022 走看看