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. Centos配置nginx反向代理8090端口到80端口

    下面,我就来说说怎么反向代理自己的项目到默认80端口. 1)安装nginx:yum install nginx -y 2)启动nginx:service nginx start或者systemctl ...

  2. Java CodeFormatter

    设置Formatter模板的入口: Window->Preference->Java->Code Style->Code Formatter <?xml version= ...

  3. MongoDB的安全校验

    一.MongoDB安全校验的重要性 每个MongoDB实例中的数据库都可以有许多用户.如果没有开启安全校验,限制用户权限,则每个进到数据库的用户都能任意的对数据库数据进行读,写甚至是读写操作.这样的场 ...

  4. Mac Angular打包报错xcode-select: error: tool 'xcodebuild' requires Xcode

    Mac Angular打包报错: Error: xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer ...

  5. python16_day26【crm 增、改、查】

    一.增加 二.修改 三.保存

  6. inline-block布局错位问题

    如图, 两个display为 inline-block的元素,会出现情况 针对第三种情况: 需要添加 vertical-align: top; 参考代码 <!DOCTYPE html> & ...

  7. 5-es6的模块化开发与其它的不同

    1.加载机制不同es是静态加载,其它是动态加载.Es6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量.CommonJS 和 AMD.CMD 模块,都只能在运行 ...

  8. 46. Permutations (全排列)

    Given a collection of distinct numbers, return all possible permutations. For example,[1,2,3] have t ...

  9. 关于http响应状态码

    http状态返回代码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. http状态返回代码 代码   说明 100   (继续) 请求者应当继续提出请求. 服务器返回此代码表示已 ...

  10. 转载:逻辑回归的python实现

    转载自:http://blog.csdn.net/zouxy09/article/details/20319673 一.逻辑回归(LogisticRegression) Logistic regres ...