APP通过微信分享的H5跳转到APP内指定页面
2020-02-06 本文已影响0人
如意如意呀
一,产品需求
产品需求是:app分享到微信一个h5页面,点击h5页面,如果用户有app就打开app,没有app就下载app。
二,具体实现
-
一,判断是不是在微信里打开
首先要知道在微信里点开链接,是调不起来app的。原因很简单,微信是目前超高活跃度的app稳稳第一名,但是在微信中点击app下载链接,都是无法下载app的。因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载。
判断是不是在微信里打开,这个方法网上是有很多的。
if (ua.match(/MicroMessenger/i) == 'micromessenger')
因为微信浏览器调不起来app,所以可以提示用户在浏览器里打开,我是给了个蒙板。如下图:
给个蒙板 -
二,判断是安卓还是ios系统
因为安卓和ios的下载链接不一样 所以要判断是ios还是安卓
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent))//判断苹果端
if (/(Android)/i.test(navigator.userAgent))//判断安卓端
#这里要注意一个东西
苹果要想在网页上下载 需要权限 所以简单的https是不行的 需要使用“itms-services”协议。
引申:
“itms-services 协议常用于 iOS 企业应用的无线部署,这可在不使用 iTunes 的情况下将内部软件发布或者分享给用户。”
直接上代码
itms-services://?action=download-manifest&url="https路径"
-
三,调起有APP
原理:不管是ios还是安卓,浏览器都不可能知道手机也没有装某个app,所以方法是首先通过URL scheme打开app,如果打不开,则跳转下载链接。
首先调app,直接上代码
setTimeout(function(){
openApp.onclick()
}, 200)
var openApp = document.querySelector('#open')
openApp.onclick = function() {
var ifr = document.createElement('iframe');
ifr.src = scheme
ifr.style.display = 'none'
document.body.appendChild(ifr)
window.setTimeout(function() {
document.body.removeChild(ifr)
}, 3000);
window.location.href = ifr.src
};
这样基本就可以吊起来app了,但是,产品需求是调起app后,跳转到分享的商品页面
-
四,调转到app分享的商品页面
我的方法是通过剪切板,剪切商品id,这样苹果和安卓就可以拿到剪切板数据跳到对应的商品,剪切板代码网上一大堆
三,会出现的问题
1.ios用户没有下载app,Safari浏览器就会弹出“Safari浏览器打不开网页,因为网址无效” 据说是浏览器内部出现从冲突 网上说可以用universal link 网上一搜 发现配置太麻烦,就放弃了 如下图:
说服产品就行了
2.安卓端里的小米浏览器和uc浏览器 会自动缓存文件
当代码尝试打开app时,会弹出系统弹框,提示是否打开“app”,如果用户不小心点了取消,用户的选择就会被浏览器缓存住,下次就不会提醒了 默认取消 就无法调起app了,必须用户清除缓存,才会在出现系统提示。暂时没有找到解决方法。