需求描述
目前的APP基本都支持二维码扫描下载。由于微信现在是主流的聊天软件,90%的用户都是通过微信分享APP的,再从分享的链接下载apk安卓包。但是微信自带的scheme接口会屏蔽掉分享链接不让下载apk包,只能通过浏览器来下载。由于没有任何提示,故用户并不知道是被屏蔽的,都以为是链接有问题。
下面我们来实现,用户通过微信点击下载链接自动跳转手机浏览器来下载apk或ios包!
我们知道 js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息,比如:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36,那么我们也可以通过该方法来获取微信内置浏览器的相关信息:Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11d201 MicroMessenger/5.3。根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。
实现教程:http://wzf.zjychina.cn/wt0445.html
实现效果
首先我们需要对分享域名加JS防封接口,然后我们再加入浏览器外跳接口,以达到我们的期望需求。
功能实现后,ios系统可在微信内直接下载app,安卓系统则自动打开手机浏览器下载app,如果不含下载文件,则直接打开网页。下面是含app下载的实现相关的实现效果:
目前ios系统可实现微信内直接跳转AppStore下载苹果商店的应用,对于企业版的苹果app则可以直接在微信内下载。
1. App Store应用实现效果
2. 企业版app下载
3. 3. 安卓用户则自动打开手机浏览器访问网页或者下载app。
代码编程
HTML代码
varua = navigator.userAgent;varisWeixin = !!/MicroMessenger/i.test(ua);
CSS代码
1#weixin-tip{display:none;position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);filter:alpha(opacity=80);width:100%;height:100%;z-index:100;}2#weixin-tip p{text-align:center;margin-top:10%;padding:05%;position:relative;}3#weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:01px0#ddd;position:absolute;top:0;left:5%;}
JS封装代码
1varis_weixin = (function(){returnnavigator.userAgent.toLowerCase().indexOf(‘micromessenger’) !== -1})();2window.onload = function() {3varwinHeight =typeofwindow.innerHeight != ‘undefined’ ? window.innerHeight : document.documentElement.clientHeight;//兼容IOS,不需要的可以去掉4varbtn = document.getElementById(‘J_weixin’);5vartip = document.getElementById(‘weixin-tip’);6varclose = document.getElementById(‘close’);7if (is_weixin) {8btn.onclick = function(e) {9tip.style.height = winHeight + ‘px’;//兼容IOS弹窗整屏10tip.style.display = ‘block’;11returnfalse;12 }13close.onclick = function() {14tip.style.display = ‘none’;15 }16 }17}
功能实现后就可以解决微信内打不开分享链接和无法下载app的阻碍了,完成以上步骤还可以最大程度防止链接被同行举报。这样我们就可以直接在微信内分享链接或二维码进行宣传引流了。如此我们也能够极大的提高自己的APP在微信中的推广转化率,充分利用微信的用户群体来宣传引流。