Ios/Android h5 唤起本地APP
纠结两天(浏览器中唤起本地APP),一直找不到解决方案,今天总算基本搞定。
ps:吐槽一下 魔窗那篇文章,为什么就不直接把js代码开源开源,混淆后的代码看得我好恼火
首先是判断浏览器
// 判断浏览器
var Navigator = navigator.userAgent;
var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;
var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;
var ifiPad = (Navigator.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;
var ifiPhone = (!ifiPad && Navigator.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;
var ifIos = Navigator.match(/iPhone|iPad|iPd/i) ? true : false;
var ifSafari = ifIos && Navigator.match(/Safari/);
// ios 设备的版本号
var iosVersion = Navigator.match(/OS\s*(\d+)/)
iosVersion = iosVersion ? (iosVersion[1] || 0) : 0;
// 安卓版本号
var androidVersion = Navigator.match(/Android\s*(\d+)/)
androidVersion = androidVersion ? (androidVersion[1] || 0) : 0;
android5 及以上的高版本
// 延后50毫秒
setTimeout(function() {
location.href = ‘自定义 URL’
}, 50)
ios9 及以上的版本
setTimeout(function() { // 必须要使用settimeout
var a = document.createElement("a"); //创建a元素
a.setAttribute("href", ‘自定义 URL’), a.style.display = "none", document.body.appendChild(a);
var t = document.createEvent("HTMLEvents"); // 返回新创建的 Event 对象,具有指定的类型。
t.initEvent("click", !1, !1) // 初始化新事件对象的属性
a.dispatchEvent(t) // 绑定事件
}, 0)
所有情况都用 iframe
document.querySelector("#" + iframe).src = ‘自定义 URL’ // 将iframe增加src
计算时差的方案打开APP
var checkOpen = function (cb){
var _clickTime = +(new Date());
function check(elsTime) {
if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
cb(1);
} else {
cb(0);
}
}
//启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
var _count = 0, intHandle;
intHandle = setInterval(function(){
_count++;
var elsTime = +(new Date()) - _clickTime;
if (_count>=100 || elsTime > 3000 ) {
clearInterval(intHandle);
check(elsTime);
}
}, 20);
}
checkOpen(function(opened){
// APP没有打开成功 并且开启自动跳转到下载页
if(opened === 0 && option.autoRedirectToDownloadUrl){
location.href = downloadUrl;
}
});
注意
ios9 以上的 Universal Link 设置自行百度下(这个需要问问ios开发人员) 这里还有个我自己发现的 bug
在Android里面的qq里面打开
如果打开APP的同时立马返回到QQ里面,应用宝的下载页立马又重新打开APP。ios里面也有个情况,打开APP的同时立马用左上角的返回再次点击打开APP按钮则
Universal Link 失效,跳转到配置好的 Universal Link 链接,大家有知道的解答哈,共同成长
如果ios9 里面没有安装APP 则直接就挑转到 Universal Link 链接 ,这应该是个bug,我想的是,如果没有安装APP 则跳转到应用宝,这个不知道怎么实现
测试的配置所有用的 得到 的APP链接,为了方便
GitHub上面有个示例:https://github.com/lmxdawn/te...
Ios/Android h5 唤起本地APP的更多相关文章
- 简话h5唤起本地app
在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...
- iOS/Android 浏览器(h5)及微信中唤起本地APP
在移动互联网,链接是比较重要的传播媒质,但很多时候我们又希望用户能够回到APP中,这就要求APP可以通过浏览器或在微信中被方便地唤起. 这是一个既直观又很好的用户体验,但在实现过程中会遇到各种问题: ...
- Android/IOS 微信及浏览器(h5)中唤起本地APP,唤起浮层,然后用外部浏览器打开唤起某本地APP
1 前言 微信点击链接,点击唤起某APP,在微信点开,默认是微信浏览器,点击button唤起,则会先提示浮层,然后用外部浏览器打开即可. 作为记录使用. 2 代码 相关源码如下: html: < ...
- H5页面中唤起native app
现在各类app,分享出去的H5页面中,一般都会带着一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和导流量的策略,最近产品经理就提 ...
- iOS H5页面打开APP技术总结
iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links.其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以 ...
- 浏览器中唤起native app || 跳转到应用商城下载
前段时间遇到一个小需求:要求在分享出来的h5页面中,有一个立即打开的按钮,如果本地安装了我们的app,那么点击就直接唤起本地app,如果没有安装,则跳转到下载. 因为从来没有做过这个需求,因此这注定是 ...
- React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...
- vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接
vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...
- 给你的移动网站加点料:推荐下载App,如果本地安装则直接打开本地App(Android/IOS)
纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移动客户端产品的一个很好地引流的手段.当然各家引流下载的交互和视觉各不相同,有的是 ...
随机推荐
- 吴裕雄--天生自然python Google深度学习框架:Tensorflow基础应用
import tensorflow as tf a = tf.constant([1.0, 2.0], name="a") b = tf.constant([2.0, 3.0], ...
- Vscode 下 PlantUML 插件的安装(windows and ubuntu)
目录 Windows 下安装 JAVA 安装环境配置: 测试 Ubuntu 16.04 下安装 Windows 下安装 Vscode graphviz PlantUML JAVA(推荐长期稳定版本,官 ...
- sockt-浅谈接口性能测试脚本编写
平时我们做的都是http请求的接口测试,初次接触socket接口还是有点不知如何下手,其实他如http接口请求区别并不是很大,也是接口的链接-发送数据-断开连接这三大步骤来实现: 以下文章转载自:ht ...
- Java调用net的webservice故障排除实战分享
转载地址:http://blog.sina.com.cn/s/blog_4c925dca01014y3r.html 前几天公司要接入国外公司的一个业务功能,对方是提供的net产生的webservice ...
- springboot yml 文件配置oracle,提示账号密码错误
最近使用Spring boot,本来一直连接的是mysql数据库,一直没问题.昨天在更换了oracle数据库后,一直提示账号密码不正确,登录被拒绝.检查多次,检查账号密码一切正常,但就是连接不上ora ...
- WebSecurityConfig
package me.zhengjie.core.config; import me.zhengjie.core.security.JwtAuthenticationEntryPoint; impor ...
- spring注入原型bean
<bean id="httpClient" class="org.apache.commons.httpclient.HttpClient" scope= ...
- spring boot原理分析启动依赖中parent帮我们干了什么
主要内容: 1:分析spring-boot-starter-parent 这个依赖 通过前面几篇文章的学习,我们感受到了spring boot的魅力.最明显的感觉就是pom.xml文件.代码少了很多. ...
- RHCE考试(Linux7)
博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 一.环境模拟 * server0.example.com :172.25.0.11 * desktop0.example ...
- revit安装未完成,某些产品无法安装的解决方法
revit提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装revit失败提示revit安装未完成,某些产品无法安装,也有时候想重新安装revit的时候会出现本 ...