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

先给大家看效果图：

demo源代码下载：

https://download.csdn.net/download/qq15577969/11996508

直接上代码：

<!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="data:images/title-back.png"></a><p>APP下载</p><a href="/" class="back_home"><img src="data: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="data:images/android-btn.png"/></div><div class="app-right" id="download_ios"><img src="data:images/ios-btn.png"/></div></div><div id="weixin-tip"><p><img src="data:images/live_weixin.png"/><img id="close"  title="关闭" class="close" src="data: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{                      //判断Androidif (/(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|iOSif (/(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>

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

微信浏览器禁止app下载链接怎么办
通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载.本文提供两个迂回的解决方案:1. ...
微信浏览器禁止app下载链接的两种处理方法
通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载. 提供解决方案:1.使用腾讯应用 ...
微信浏览器禁止app下载链接怎么办怎么解决
做微信营销活动或者APK下载推广时候,域名经常被封,如何做到微信中正常使用呢?这就要借助一些工具来实现有效的操作. 之前公司有一个新的APP项目上线,让我们在项目首页做个二维码,然后用户用手机扫一扫就 ...
微信浏览器禁止app下载链接的两种处理方法-NiceTool
通过扫描二维码下载APP已成为一个非常方便的方式,微信也成为扫描二维码重要的工具,但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽,导致用户无法正常下载. 提供解决方案:1.使用腾讯应用 ...
CCjump解决：在微信中访问app下载链接提示“已停止访问该网页”
现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面临一个 ...
解决：在微信中访问app下载链接提示“已停止访问该网页”
前言现如今微信对第三方推广链接的审核是越来越严格了,域名在微信中分享转发经常会被拦截,一旦被拦截用户就只能复制链接手动打开浏览器粘贴才能访问,要不然就是换个域名再推,周而复始.无论是哪一种情况都会面 ...
springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证
转:springmvc开发微信公众号接口微信公众号测试账号配置接口Token验证开发前必读以及准备工作: 1.微信公众平台开发是指为微信公众号进行业务开发,为移动应用.PC端网站.公众号第三方平台 ...
微信域名防封防屏蔽微信APP下载链接如何做防封防屏蔽
先来认识一下微信屏蔽的原理.按原理逐个攻破,整理如下:微信屏蔽的原理一.微信系统的两个检测手段:第一是系统的自动检测:第二是微信工作人员的人工检测. 二. 人工的检测很好理解,有用户投诉举报,在多少 ...
微信内置浏览器无法打开APP下载链接的解决方案
最近遇到一个问题,app用户邀请好友,分享到微信好友,但是微信好友打不开对应的app下载链接.然后ui给我做了个图,引导用户点击浏览器右上角,在外部浏览器中打开app下载页,如下图: 但是我又遇到问题 ...

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

先给大家看效果图：

demo源代码下载：

直接上代码：

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

最新文章

热门文章