H5唤起app

1.判断是否在微信中打开

无论是在哪个平台的客户端Android/IOS,在微信的平台上访问都有一个问题,那就是无法启动客户端,这是微信为了安全性考虑的限制,android这边屏蔽schema协议,除非公司是微信的伙伴加入了白名单才能使用,IOS系统可以去访问app对应appstore的下载页,但是微信经常屏蔽appstore的这个网址,进而访问不到。比较方便的做法就是在微信浏览器中,无论是IOS还是android都去应用宝的下载(IOS 这边最后会到appstore中)页面打开。

var agent = navigator.userAgent || ''
var isWx = /micromessenger/i.test(agent)
if(isWx){
//微信,提示用户用浏览器打开
}else{
//非微信
}

js的test() 方法用于检测一个字符串是否匹配某个模式.

RegExpObject.test(string)
//string为要检测的字符串。
//如果字符串 string 中含有与 RegExpObject 匹配的文本,则返回 true,否则返回 false。

2.判断是否为iOS

var isIOS = /iPhone|iPad|iPod/i.test(agent)   //返回true/false

3.唤起app

H5启动APP本质上是通过URL scheme打开APP,一个APP可以设置一个或多个打开自己的URL scheme,浏览器去访问某一个APP的URL scheme,然后若系统安装有这个APP,则会请求权限去打开这个APP。

其实也算是浏览器app打开另一个app,iOS就可以使用 UIApplication 的 canOpenUrl 方法来检测URL scheme 是否能打开对应的APP,而android也是类似的方式。

当然如果JS跳转URL scheme没有反应,也意味着这个手机没有装这个app。

<a class='btn'>打开app</a>

如果需要跳转到app指定页面,在URL scheme后面再加一个url即可(URL scheme及url由app开发人员提供。)

if (isIOS) {
$('.btn').attr('href','BonDayApp://' + url);
} else {
$('.btn').attr('href','bondayapp://bonday.com/scheme?' + url);
}

H5唤起app的更多相关文章

  1. H5 唤起 APP的解决方案

    H5 页面唤起APP或跳转到下载APP的某个链接地址.总结如下: 在 IOS 中, 系统版本在 8 以下时,可以监听页面的 pagehide / visibilitychange 事件. 系统版本大于 ...

  2. h5唤起APP并检查是否成功

    // 检查app是否打开 function checkOpen(cb) { const clickTime = +(new Date()); function check(elsTime) { if ...

  3. h5 唤起app或跳转appStore

    //唤起app通过唤端媒介(URL Scheme)   //微信浏览器自6.3.x版本起禁用了大多数Scheme跳转功能,扫一扫目前可用   // URL 的组成:   // [scheme:][// ...

  4. H5唤起APP一些坑

    $(function () { function _openAppUrl(appUrl){ var ua = navigator.userAgent.toLocaleLowerCase(), open ...

  5. 简话h5唤起本地app

    在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...

  6. H5如何实现唤起APP

    前言 写过hybrid的同学,想必都会遇到这样的需求,如果用户安装了自己的APP,就打开APP或跳转到APP内某个页面,如果没安装则引导用户到对应页面或应用商店下载.这里就涉及到了H5与Native之 ...

  7. 如何应用前端技术唤起app及判断用户来源及与原生交互的原理

    做唤起时需要native端进行配合, h5唤起app这种需求是常见的.在移动为王的时代,h5在app导流上发挥着重要的作用. 目前我们采用的唤起方式是url scheme(iOS,Android平台都 ...

  8. h5页面唤起app(iOS和Android),没有安装则跳转下载页面

    浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5, ...

  9. h5移动网页唤起App

    最近这个困惑了很久,不断的有一些坑,目前还有疑问关于iOS唤起无效时会出现弹框的问题,这个最后再说 1.首先可能需要判断当前浏览器的来源(目前开发的App还没有上架,所以针对腾讯出品的大家广为人知的微 ...

随机推荐

  1. python pip命令技巧

    确保本地开发环境,和线上一致性 1.导出当前解释器的模块pip3 freeze > requirements.txt 2.将这个文件requirements.txt,上传至服务器,在新的虚拟环境 ...

  2. ansible(2)

    一.ansible模块(yum.pip.service.conr.user.group) 上篇中我们已经学了ansible的几个模块,接下来再来学习几个,那么你是否知道ansible一共有多少模块呢? ...

  3. 从原型链看DOM--Document类型

    JavaScript通过Document类型表示文档,原型链的继承关系为:document.__proto__->HTMLDocument.prototype->Document.prot ...

  4. POJ3254:Corn Fields(状压dp第一发)

    题目:http://poj.org/problem?id=3254 直接上代码吧,刚开始做时主要的问题就是看不懂二进制,有个博客写的太好了,就直接把题解复制在下面了. #include <ios ...

  5. 我的第一次NGS分析操作

    部分参考自:生物信息学100个基础问题 —— 番外2: 用Anaconda快速搭建生物信息学分析平台 - 孟浩巍的文章 - 知乎 https://zhuanlan.zhihu.com/p/357114 ...

  6. PAT 1091 Acute Stroke [难][bfs]

    1091 Acute Stroke (30 分) One important factor to identify acute stroke (急性脑卒中) is the volume of the ...

  7. Flask之初体验

    Flask是一个基于Python开发并且依赖jinja2模板和Werkzeug WSGI服务的一个微型框架,对于Werkzeug本质是Socket服务端,其用于接收http请求并对请求进行预处理,然后 ...

  8. Linux系统——磁盘管理

    磁盘结构 (1)硬盘的物理结构 磁头:每面一个磁盘 盘片:硬盘有多个盘片,每个盘片2面 (2)硬盘的数据结构 扇区:盘片被分为多个扇形区域,每个扇形区存放512字节的数据 磁道:统一盘片不同半径的同心 ...

  9. kubernetes上安装MongoDB-3.6.5集群副本集方式

    一.安装部署: 想直接一步创建集群的小伙伴直接按以下步骤安装(再往后是记录自己出过的错): 1.生成docker镜像: docker build -t 144.202.127.156/library/ ...

  10. Maven详解(转)

    原文出自: http://www.cnblogs.com/hongwz/p/5456578.html http://ifeve.com/maven-1/ Maven介绍: Maven是一个强大的Jav ...