产生背景:

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. WPF简单的分页控件实现

    XAML代码(使用ItemsControl控件实现): <UserControl x:Class="SunCreate.Vipf.Client.UI.CityDoor.PageCont ...

  2. Shell-16--函数

    函数的定义和调用放在一起(同一个shell)的好处是不会存在路径的问题:如果功能复杂,则应分开

  3. Servlet-session简介及使用场景

  4. python多进程没有锁队列范例

    假设有一些任务要完成.为了完成这项任务,将使用几个过程.所以,将保持两个队列.一个包含任务,另一个包含已完成任务的日志. 然后实例化流程来完成任务.请注意,python队列类已经同步. 这意味着,我们 ...

  5. scrapy爬虫--苏宁图书

    实现业务逻辑如下: 1. 创建scrapy项目,并生成 爬虫2. 在suning.py中实现Schedul 和 Spider业务逻辑3. 修改start_urls为正确的初始请求地址4. 构造pars ...

  6. openshift pod对外访问网络解析

    openshift封装了k8s,在网络上结合ovs实现了多租户隔离,对外提供服务时报文需要经过ovs的tun0接口.下面就如何通过tun0访问pod(172.30.0.0/16)进行解析(下图来自理解 ...

  7. SQL Case when 的使用

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  8. Rails项目防止时序攻击

    时序攻击属于侧信道攻击/旁路攻击(Side Channel Attack),侧信道攻击是指利用信道外的信息,比如加解密的速度/加解密时芯片引脚的电压/密文传输的流量和途径等进行攻击的方式,一个词形容就 ...

  9. .Net实现微信公众平台开发接口(二) 之 “获取access_token”

    access_token是公众号的全局唯一票据,公众号调用各接口时都需使用access_token. 接口调用请求说明 http请求方式: GET https://api.weixin.qq.com/ ...

  10. IOS中input键盘事件支持的解决方法

    欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...