【微信跳转接口】微信引导用户右上角打开浏览器，访问APP下载链接

共8个文件

png：6个

html：1个

jpg：1个

html5

jQuery

需积分: 46 71 浏览量 2019-11-25 14:11:49 上传评论 3 收藏 59KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

微信引导用户右上角打开浏览器，访问APP下载链接.rar （8个子文件）

images

title-back.png 269B

android-btn.png 2KB

close.png 2KB

live_weixin.png 21KB

title-home.png 15KB

ios-btn.png 2KB

效果图.jpg 40KB

down.html 5KB

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title>APP下载页面</title> </head> <style type="text/css"> *{padding: 0;margin: 0;} /*顶部标题栏*/ .title_box { width: 100%; height: 50px; line-height: 50px; background: #48d484; font-size:20px; display:flex; } .back_page,.back_home { flex:1; } .back_page img,.back_home img{ width: 32px; height: 32px; margin-top:8px; } .back_page{ text-align: left; } .back_home{ text-align: right; margin-right:10px; } .title_box p { flex:3; text-align: center; color: #ffffff; } #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; } #weixin-tip p { text-align: center; margin-top: 10%; padding: 0 5%; position: relative; } #weixin-tip p img{ width:100%; } #weixin-tip .close { position: absolute; width:50px; top: 0; left: 5%; } .app-box{ width:100%; height:100px; padding:20px 0; text-align:center; } .app-box .app-left{ width:48%; float:left; } .app-box .app-right{ margin-left:2%; width:48%; float:left; } .app-box img{width:80%;} .desc{ padding-top:50px; padding-bottom:20px; text-align:center; } .desc h1{ height:5rem; line-height:5rem; font-size:2.2rem; color:#333; } .desc p{ height:3rem; line-height:3rem; font-size:1.5rem; color:#8E8F90; } </style> <body>  <div class="title_box"> <a href="javascript:;" onClick="javascript:history.back(-1);" class="back_page"><img src="images/title-back.png"></a> <p>APP下载</p> <a href="/" class="back_home"><img src="images/title-home.png" alt="返回首页"/></a> </div> <div class="desc"> <h1>立即下载手机客户端</h1> <p>随时随地，想玩就玩。</p> </div> <div class="app-box"> <div class="app-left" id="download_android"> <img src="images/android-btn.png"/> </div> <div class="app-right" id="download_ios"> <img src="images/ios-btn.png"/> </div> </div> <div id="weixin-tip"> <p><img src="images/live_weixin.png"/> <img id="close" title="关闭" class="close" src="images/close.png"/> </p> </div> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript"> //判断是不是微信端 var is_weixin = (function() { return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1 })(); var tip = document.getElementById('weixin-tip'); var close = document.getElementById('close'); var tip = document.getElementById('weixin-tip'); var android = document.getElementById('download_android'); var ios = document.getElementById('download_ios'); var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS，不需要的可以去掉 window.onload = function() { if(is_weixin) { tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏 tip.style.display = 'block'; }else{ //判断Android if (/(Android)/i.test(navigator.userAgent)) { //直接下载 var android_url="";//这里填写android版本的下载地址 window.location.href = android_url; } } } close.onclick = function() { tip.style.display = 'none'; } $("#download_android").click(function(){ if(is_weixin) { tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏 tip.style.display = 'block'; }else{ tip.style.display = 'none'; //判断iPhone|iPad|iPod|iOS if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { alert("苹果系统不支持安卓软件！"); } else if (/(Android)/i.test(navigator.userAgent)) { var android_url="";//这里填写android版本的下载地址 if(android_url!=""){ window.location.href = android_url; }else{ alert("安卓版本正在开发中，敬请期待！"); } } } }); $("#download_ios").click(function(){ if(is_weixin) { tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏 tip.style.display = 'block'; }else{ tip.style.display = 'none'; var ios_url="";//这里填写ios版本的下载地址 if(ios_url!=""){ window.location.href = ios_url; }else{ alert("ios版本正在开发中，敬请期待！"); } } }); </script> </body> </html>

评论收藏

内容反馈