产生背景:

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. ArcEngine不同种类的工作空间建立查询ICursor时“超出系统资源”

    环境 这里我的工作空间有两种:mdb库和SDE库分别打开的工作空间. 查询语句:使用Field in ('1','2')查询方式来得到游标对象. 错误 当查询语句中in后面的条件值大于1500时,在I ...

  2. Jira/Confluence的备份、恢复和迁移

    之前的文章已经分别详细介绍了Jira.Confluence的安装及二者账号对接的操作方法,下面简单说下二者的备份.恢复和迁移: 一.Jira.Confluence的备份.恢复1)Confluence的 ...

  3. springmvc接受及响应ajax请求。 以及@RequestBody 和@ResponseBody注解的使用

    1.发送ajax请求 $.ajax({ url:"user/testAjax", contentType:"application/json;charset=UTF-8& ...

  4. 从app上传图片到php,再上传到java后端服务器的方法一条龙服务

    在现在的网络开发中,上传图片类的需求实在是太普通不过了,但是对于怎么样做到上传图片,对于刚开始建立项目的时候,还是有点不知所措的.也许有幸,我们做的项目是之前已经有人写过类似的用例了,那么我们只需要依 ...

  5. mysql explain语法详解--优化你的查询

    原文地址:http://blog.csdn.net/zhuxineli/article/details/14455029 explain显示了mysql如何使用索引来处理select语句以及连接表.可 ...

  6. 机器学习与Tensorflow(4)——卷积神经网络与tensorflow实现

    1.标准卷积神经网络 标准的卷积神经网络由输入层.卷积层(convolutional layer).下采样层(downsampling layer).全连接层(fully—connected laye ...

  7. 【sping揭秘】17、@Around,@Introduction

    package cn.cutter.start.bean; import org.apache.commons.logging.Log; import org.apache.commons.loggi ...

  8. python 离散序列 样本数伸缩(原创)

    解决问题: 有一个固定长度的1维矩阵,将这个矩阵的取样点进行扩充和减少 功能函数: def discrete_scale(data, num): import numpy as np import c ...

  9. JAVA中的糕富帅技术——反射(一)

    前言 突然发现好久没写博客了,前面写的都是关于Android的东西,今天心血来潮突然有一种冲动想写一篇基于JAVA技术的博客,别问我为什么?有钱.任性! 今天就来谈谈反射机制:学过JAVA的人不一定懂 ...

  10. flex和box-shadow一些兼容性问题

    html代码 <div class="creative-list"> <a class="creative-list-item"> &l ...