admin管理员组文章数量:1530044
相信做前端的朋友一定都遇到这种情况的,当你的网页中有直接链接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/test.apk" id = "JdownApp" >点击下载 APP < / a > < a href = "http://caibaojian/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/demo/weixin-downapp/
运行效果:
版权声明:本文标题:微信中下载APP,页面跳转提示信息的实现 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1726628926a1079017.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论