微信中下载APP，页面跳转提示信息的实现

相信做前端的朋友一定都遇到这种情况的，当你的网页中有直接链接apk下载的时候会没有反映的，是因为在微信内是无法下载软件、手机APP等，那么这个时候一般的解决方案就是：必须要点击右上角三个点，选择“在浏览器中打开”才可以。但是这时候问题就来了，怎么添加提示信息页面让用户去点击右上角三个点,选择“在浏览器中打开”呢？

其实原来很简单，就是判断当前是在微信内置浏览器中，然后将默认隐藏的提示层显示出来。

第一步：判断微信的UA。

1 2	var ua = navigator . userAgent ; var isWeixin =    ! ! / MicroMessenger / i . test ( ua ) ;

 

第二步：引入默认隐藏层。

1 2 3 4 5 6

< a href = "http://caibaojian.com/test.apk" id = "JdownApp" >点击下载 APP < / a > < a href = "http://caibaojian.com/test.apk" id = "JdownApp2" class = "btn-warn" >点击下载 APP2 < / a > < div class = "wxtip" id = "JweixinTip" > < span class = "wxtip-icon" > < / span > < p class = "wxtip-txt" >点击右上角 < br / >选择在浏览器中打开 < / p > < / div >

 

第三步：添加CSS样式

1 2 3

. wxtip { background : rgba ( 0 , 0 , 0 , 0.8 ) ; text - align : center ; position : fixed ; left : 0 ; top : 0 ; width : 100 % ; height : 100 % ; z - index : 998 ; display : none ; } . wxtip - icon { width : 52px ; height : 67px ; background : url ( weixin - tip . png ) no - repeat ; display : block ; position : absolute ; right : 20px ; top : 20px ; } . wxtip - txt { margin - top : 107px ; color : #fff; font-size: 16px; line-height: 1.5;}

 

 第四步：点击按钮显示隐藏层，点击隐藏层关闭，总的JS代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

function weixinTip ( ele ) { var ua = navigator . userAgent ; var isWeixin = ! ! / MicroMessenger / i . test ( ua ) ; if ( isWeixin ) { ele . onclick = function ( e ) { window . event ? window . event . returnValue = false : e . preventDefault ( ) ; document . getElementById ( 'JweixinTip' ) . style . display = 'block' ; } document . getElementById ( 'JweixinTip' ) . onclick = function ( ) { this . style . display = 'none' ; } } } var btn1 = document . getElementById ( 'JdownApp' ) ; //下载一 weixinTip ( btn1 ) ; var btn2 = document . getElementById ( 'JdownApp2' ) ; //下载二 weixinTip ( btn2 ) ;

代码演示：

 

 

 

 

演示URL链接：http://www.oicto.com/demo/weixin-downapp/

运行效果：