使用微信打开网址时,无法在微信内打开常用下载软件,手机APP等。网上流传的各种微信打开下载链接,微信一更新基本失效。大家常用的方法是,弹出一个遮罩提示用户在新的浏览器窗口打开,再也不用管微信如何的更新。
直接判断微信的ua,如果是在微信内置浏览器中打开,弹出一个遮罩提示用户在浏览器中打开下载,并且不加关闭的按钮。这样子用户就只能在浏览器中打开,并且可以直接下载应用了。
css代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<style type= "text/css" > *{ margin : 0 ; padding : 0 ; } a{ text-decoration : none ; } img{ max-width : 100% ; height : auto ; } .weixin-tip{ display : none ; position : fixed ; left : 0 ; top : 0 ; bottom : 0 ; background : rgba( 0 , 0 , 0 , 0.8 ); filter:alpha(opacity= 80 ); height : 100% ; width : 100% ; z-index : 100 ; } .weixin-tip p{ text-align : center ; margin-top : 10% ; padding : 0 5% ; } </style> |
HTML 代码
1
2
3
4
5
|
< div class = "weixin-tip" > < p > < img src = "weixin.png" alt = "微信打开" /> </ p > </ div > |
js 代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script type= "text/javascript" > $(window).on( "load" , function (){ var winHeight = $(window).height(); function is_weixin() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger" ) { return true ;
return true; }
return false ; } } var isWeixin = is_weixin(); if (isWeixin){ $( ".weixin-tip" ).css( "height" ,winHeight); $( ".weixin-tip" ).show(); } }) </script> |
背景图素材提供: