解决微信内置浏览器屏蔽下载链接问题
今天遇到了一个这样的问题,通过微信扫描二维码进入下载页面,由于微信对下载链接进行了屏蔽处理,点击下载时按钮无效。
后来通过度娘,自己总结和分析之后,大概思路为:浏览器打开应用宝,分享应用宝链接到微信(因为应用宝为腾讯自家产品没有屏蔽),那么就o了!
其实还有一种普遍常见的解决方案,这里就不描述了,大致就是做一个样式,提示右上角(浏览器打开)。
我们直入主题吧,首写第一步,判断是否是微信浏览器,具体代码如下:
js:
$(document).ready(function() { downloaded(); }); function downloaded(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") {//如果是微信浏览器 $(\'#a\').find(\'a\').attr(\'href\',\'http://app.qq.com/?isappinstalled=1#id=detail&appid=1104762859\');//将第一个链接转换成应用宝里链接,并获取appId $(\'#b\').find(\'a\').attr(\'href\',\'http://fusion.qq.com/app_download?appid=1104762859&platform=qzone&via=QZ.MOBILEDETAIL.QRCODE\'); //一种判断手机装的应用商店方式,可直接替换appId. } }
<div class="btnList"> <ul> <li id="a"><a href="http://image.peikua.com//static/apk/peikuahaitao-2.0.1.apk">应用下载</a></li> <!--默认apk下载地址,除微信外浏览器都支持--> <li id="b"><a href="market://search?q=pname:com.zq.qk">应用平台下载</a></li> <!--调用安卓下载地址,会判断手机内已装应用商店下载弹框--> <li><span>下载APP即可使用优惠券大礼包</span></li> <ul> </div>
最终微信打开的第一个链接效果如下:
第二个链接效果如下:(因不同手机下系统不同,展现方式也不同。)
因为不喜欢多打字,多废话,就直接上图了,如有不懂的地方可以问我。
小弟为一个四年工作经验的小前端,喜欢研究新技术,攻克难点,请(bu)多(xi)多(huan)交(da)流(zi)!