微信扫码下载apk快速解决方案，中间页引导法

扫完效果：

浏览器打开后：

源码：

<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>XXXXApp</title>
</head><body>
<style type="text/css">* {margin: 0;padding: 0;}img {max-width: 100%;height: auto;}.drawDownAppText {height: 80vh;max-width: 100vw;font-size: 32px;text-align: center;padding-top: 35vh;}.drawDownAppText a {text-decoration: none;}/*button样式start*/body{background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/wild_oliva.png);}.centered {margin:50px auto;text-align:center;}.button::-moz-focus-inner{border: 0;padding: 0;}.button{display: inline-block;*display: inline;zoom: 1;padding: 6px 20px;margin: 0;cursor: pointer;border: 1px solid #bbb;overflow: visible;font: bold 13px arial, helvetica, sans-serif;text-decoration: none;white-space: nowrap;color: #555;background-color: #ddd;background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));-webkit-transition: background-color .2s ease-out;-moz-transition: background-color .2s ease-out;-ms-transition: background-color .2s ease-out;-o-transition: background-color .2s ease-out;transition: background-color .2s ease-out;background-clip: padding-box; /* Fix bleeding */-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;text-shadow: 0 1px 0 rgba(255,255,255, .9);-webkit-touch-callout: none;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.button:hover{background-color: #eee;color: #555;}.button:active{background: #e9e9e9;position: relative;top: 1px;text-shadow: none;-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;}.button[disabled], .button[disabled]:hover, .button[disabled]:active{border-color: #eaeaea;background: #fafafa;cursor: default;position: static;color: #999;/* Usually, !important should be avoided but here it's really needed :) */-moz-box-shadow: none !important;-webkit-box-shadow: none !important;box-shadow: none !important;text-shadow: none !important;}/* Smaller buttons styles */.button.small{padding: 4px 12px;}/* Larger buttons styles */.button.large{padding: 12px 30px;text-transform: uppercase;}.button.large:active{top: 2px;}/* Colored buttons styles */.button.green, .button.red, .button.blue {color: #fff;text-shadow: 0 1px 0 rgba(0,0,0,.2);background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0));}/* */.button.green{background-color: #57a957;border-color: #57a957;}.button.green:hover{background-color: #62c462;}.button.green:active{background: #57a957;}/* */.button.red{background-color: #ca3535;border-color: #c43c35;}.button.red:hover{background-color: #ee5f5b;}.button.red:active{background: #c43c35;}/* */.button.blue{background-color: #269CE9;border-color: #269CE9;}.button.blue:hover{background-color: #70B9E8;}.button.blue:active{background: #269CE9;}/* */.green[disabled], .green[disabled]:hover, .green[disabled]:active{border-color: #57A957;background: #57A957;color: #D2FFD2;}.red[disabled], .red[disabled]:hover, .red[disabled]:active{border-color: #C43C35;background: #C43C35;color: #FFD3D3;}.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{border-color: #269CE9;background: #269CE9;color: #93D5FF;}/* Group buttons */.button-group,.button-group li{display: inline-block;*display: inline;zoom: 1;}.button-group{font-size: 0; /* Inline block elements gap - fix */margin: 0;padding: 0;background: rgba(0, 0, 0, .1);border-bottom: 1px solid rgba(0, 0, 0, .1);padding: 7px;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;}.button-group li{margin-right: -1px; /* Overlap each right button border */}.button-group .button{font-size: 13px; /* Set the font size, different from inherited 0 */-moz-border-radius: 0;-webkit-border-radius: 0;border-radius: 0;}.button-group .button:active{-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;}.button-group li:first-child .button{-moz-border-radius: 3px 0 0 3px;-webkit-border-radius: 3px 0 0 3px;border-radius: 3px 0 0 3px;}.button-group li:first-child .button:active{-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset;}.button-group li:last-child .button{-moz-border-radius: 0 3px 3px 0;-webkit-border-radius: 0 3px 3px 0;border-radius: 0 3px 3px 0;}.button-group li:last-child .button:active{-moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset;}/*button样式end*/</style>
<div class="drawDownAppText"><a style="width: 80vw;height: 10vh;line-height: 10vh;font-size: 2.5vh" class="small blue button" href="xxx.apk
">点击下载xxxApp</span></a>
</div>
<div></div>
<script type="text/javascript">
function is_weixin() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
return true;
} else {
return false;
}
}
var isWeixin = is_weixin();
var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;function loadHtml() {
var div = document.createElement('div');
div.id = 'weixin-tip';
div.innerHTML = '<p><img src="live_weixin.png" alt="微信打开"/></p>';
document.body.appendChild(div);
}function loadStyleText(cssText) {
var style = document.createElement('style');
style.rel = 'stylesheet';
style.type = 'text/css';
try {
style.appendChild(document.createTextNode(cssText));
} catch (e) {
style.styleSheet.cssText = cssText; //ie9以下
}
var head = document.getElementsByTagName("head")[0]; //head标签之间加上style样式
head.appendChild(style);
}
var cssText = "#weixin-tip{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%;}";
if (isWeixin) {
loadHtml();
loadStyleText(cssText);
}
</script>
</body></html>

将APK路径改一下

还有一张图：live_weixin.png

最后就是将这个静态页面放入服务器中，然后将此地址用草料等工具转换成网址二维码即可

注意：这个静态页面需要通过带域名的网址进行访问。

转自：https://www.cnblogs.com/liglacier/p/11358828.html

微信扫码下载apk快速解决方案，中间页引导法相关推荐

微信扫码下载APK解决方案
方案一: 扫码进入一个普通的过渡页面,并且提示用户点击右上角"在浏览器中打开",进入下载页面. 方案二: 将APP申请加入腾讯的应用宝,申请通过后可直接用应用宝管理后台提供给你的的 ...
微信扫码下载app的前端界面代码
下载app二维码扫码下载,当用户微信扫码下载时微信不能直接下载应用,所以做了一个过渡界面给用户来交互响应.效果图如下图: html的源代码如下. <!DOCTYPE html> < ...
微信扫码下载APP（带有蒙层）
微信扫码下载APP APP下载 <div class="photo" id="photo"><div class="buttonTo ...
解决微信扫码下载的两个方法
解决微信扫码下载有两个方法:一是去腾讯开发平台http://open.qq.com/上传自己的应用,二是弄一个提示页,提示用户用其他浏览器打开链接. 上传应用到腾讯开发平台把应用上传到腾讯开发平台, ...
苹果手机微信扫码下载pdf文件，出现空白页。
问题描述要实现微信扫二维码下载pdf文件的功能,苹果手机微信扫码后,第一次扫码,提示下载:后续扫码有时pdf文件被空白页遮挡,有时正常:,用安卓手机微信扫码.或者用苹果手机支付宝扫码都是正常,怀疑是 ...
微信里的APK链接接打不开怎么办？微信扫描二维码下载APK的解决方案
不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器分享都会被拦截.这是腾讯对第三方下载域名实施的打压政策.被屏蔽了也就意味着链接在微信中是无法正常打开的,那么此时用户在微信内打 ...
微信扫码下载iosAPP
1.首先在应用宝上传你的安卓APP应用,AppStore已经有了APP 2.进入应用宝app应用管理中心,点击"微下载",然后里面的微下载链接地址就可以用了,可以看到ios可以通过 ...
项目总结1：微信扫码自动识别设备类型并跳转到相应的应用下载页面（apk或App Store）之解决方案
问题分析:普通页面一般无法调用微信的扫一扫接口,从而否定通过微信扫一扫功能给我们判断当前扫码的设备类型. 解决方案:通过应用下载页面自身来获取当前访问的客户端设备类型(iPhone.Android.i ...
APP二维码微信扫描后无法下载微信中无法下载APP的解决方案
微信扫一扫屏蔽了APP下载连接无非是想让大家将资源转移到自家平台,国人微信中毒过深,看到二维码首先想到的一定是微信(好强大的用户引导).为了更好的用户体验,只能向腾讯屈服将应用转移到腾讯平台.当然如果 ...
APP二维码微信扫描后无法下载的问题微信扫码(扫一扫二维码)下载不了app怎么解决
最近公司开发了一款app,在做推广的时候遇到了微信扫码无法直接下载的问题. 最终在参考了众多资料后,发现微信内置浏览器不支持直接下载功能,可能这就是公司足够大了,有些功能不给开放也不会怎样.但是问题还 ...

微信扫码下载apk快速解决方案，中间页引导法

微信扫码下载apk快速解决方案，中间页引导法相关推荐

最新文章

热门文章