产生背景:

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。

共用的h5回调页面的更多相关文章

  1. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  2. 运用预加载提升H5移动页面的用户体验

    原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...

  3. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  4. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  5. 解决微信授权回调页面域名只能设置一个的问题 [php]

    最终的解决方案是:https://github.com/liuyunzhuge/php_weixin_proxy,详细的介绍请往下阅读. 在做项目集成微信登录以及微信支付的时候,都需要进行用户授权.这 ...

  6. 到处都是坑的微信支付V3之 微信支付回调页面

    据上次 到处都是坑的微信支付V3 后很多园友在被虐了千百遍后终于跳转到了亲切的微信支付界面,但输入密码支付后却不知道怎么处理了,接下来补上支付后的处理流程. 1. html中根据前台支付后反馈信息成功 ...

  7. C# 微信扫码支付 回调页面

    .NET版 微信扫码支付,官方推荐使用[模式二] 一.微信扫码支付模式一: 1.回调页面:官方demo中example文件下的NativeNotifyPage.aspx 2.微信回调地址:http:/ ...

  8. H5 App页面 绝对定位 软键盘弹出时顶起底部按钮

    做H5 App页面时,有时候,按钮可能会放到页面的最底下,这个时候可能会用到绝对定位(position: absolute),但是,当input 输入框被点击时,弹出的软键盘会顶起底部的按钮,就像这样 ...

  9. 快速构建H5单页面切换应用

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

随机推荐

  1. JavaScript控制页码的显示与隐藏

    前端页面开发分页显示功能时,一般都要求使用自定义的页码样式,直接用网上分页插件就比较麻烦了,这里记录一下工作中总结的一个比较简单通用的控制页码显示与隐藏的的js代码. 首先是使用时需要自己根据自己具体 ...

  2. 第31节:Java基础-类与对象

    前言 Java基础-类与对象,方法的重载,构造方法的重载,static关键字,main()方法,this关键字,包,访问权限,类的继承,继承性,方法的重写,super变量. 方法的重载:成员方法的重载 ...

  3. 【Spark调优】:结合业务场景,优选高性能算子

    聚合操作使用reduceByKey/aggregateByKey替代groupByKey 参见我的这篇博客说明 [Spark调优]:如果实在要shuffle,使用map侧预聚合的算子 内存充足前提下使 ...

  4. spring boot 通过controller跳转到指定 html 页面问题以及请求静态资源问题

    1. 项目结构 2. pom文件配置 重点是红色框内的依赖 3. application配置文件 4. controller 注意使用@Controller注解: @RestController 等价 ...

  5. python3模块: os

    简介 os模块主要用于提供系统高级别的操作. 常用方法 os.access(path, mode) # 检验权限模式 os.chdir(path) # 改变当前工作目录 os.chflags(path ...

  6. java几种垃圾收集方法和垃圾收集器

    标记清除法: 分为两个阶段,标记----清除 标记阶段将所有需要回收的对象做标记,然后在清除阶段将所有的标记对象回收 但是这种回收方法有很大的缺点,那就是这两个过程的的效率并不高,两个过程都是效率很低 ...

  7. Tensflow的targmax函数

    一.函数: argmax( input, axis=None, name=None, dimension=None, output_type=tf.int64 ) 简单的说,tf.argmax就是返回 ...

  8. laravel框架的安装与配置

    正常安装: 1.composer.(https://getcomposer.org/Composer-Setup.exe) 安装之前要确保目录:wamp\bin\php\php5.4.3下的php.i ...

  9. mongodb 语句和SQL语句对应(SQL to Aggregation Mapping Chart)

    SQL to Aggregation Mapping Chart https://docs.mongodb.com/manual/reference/sql-aggregation-compariso ...

  10. Thread,ThreadPool,Task, 到async await 的基本使用方法和理解

    很久以前的一个面试场景: 面试官:说说你对JavaScript闭包的理解吧? 我:嗯,平时都是前端工程师在写JS,我们一般只管写后端代码. 面试官:你是后端程序员啊,好吧,那问问你多线程编程的问题吧. ...