在我们做营销活动或推广宣传的时候,容易遇到链接被微信拦截,导致在微信内打开提示“已停止访问该网页”,故无法下载app等情况。这时就需要微信内直接下载app的功能,很多用户并不知道这样的实现,下面就给大家讲解一下功能的实现方式和效果。
实现教程:在线制作体验
我们知道js 可以通过 window.navigator.userAgent 来获取浏览器的相关信息,比如:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko)
方法来获取微信内置浏览器的相关信息: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 来判断是否是微信内置的浏览器。
功能实现后ios系统可在微信内直接下载app,安卓则自动跳转浏览器下载。
App Store应用实现效果
企业版app实现效果
安卓用户则自动打开手机浏览器下载app。
代码编程
HTML代码
1.var ua = navigator.userAgent;
2.var isWeixin = !!/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:0 5%;position:relative;}
3 .#weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}
JS封装代码
1. var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf(‘micromessenger’) !== -1})();
2. window.onload = function() {
3. var winHeight = typeof window.innerHeight != ‘undefined’ ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉
4. var btn = document.getElementById(‘J_weixin’);
5 .var tip = document.getElementById(‘weixin-tip’);
6 .var close = document.getElementById(‘close’);
7 .if (is_weixin) {
8 .btn.onclick = function(e) {
9 .tip.style.height = winHeight + ‘px’; //兼容IOS弹窗整屏
10. tip.style.display = ‘block’;
11 .return false;
12. }
13. close.onclick = function() {
14. tip.style.display = ‘none’;
15. }
16 .}
17 .}
至此,我们就解决了微信拦截分享链接的难题了,这个功能还能极大程度上杜绝同行恶意举报。这样我们就可以直接在微信内分享下载链接和二维码进行宣传引流了。如此也能够极大的提高自己的APP在微信中的推广转化率,充分利用微信的用户群体来宣传引流。