微信扫描打开APP下载链接提示代码优化
2015-03-18 11:56
519 查看
转自:http://caibaojian.com/weixin-tip2.html#t5
上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”,里面我发出来了三个代码,分别是纯JS、js+html、jQuery+HTML代码。今天来一个简化版带可以关闭的按钮操作。使用的是纯JS+HTML+CSS结合的方式,但不要一进入微信就弹出提示它在新浏览器中打开,在这个页面里面还可以提交表单查看信息等,只有它点击应用的链接后,才弹出提示它跳转后下载。
上一次我发了一篇文章叫“微信打开网址添加在浏览器中打开提示”,里面我发出来了三个代码,分别是纯JS、js+html、jQuery+HTML代码。今天来一个简化版带可以关闭的按钮操作。使用的是纯JS+HTML+CSS结合的方式,但不要一进入微信就弹出提示它在新浏览器中打开,在这个页面里面还可以提交表单查看信息等,只有它点击应用的链接后,才弹出提示它跳转后下载。
效果如下:
HTML代码:
<a id="J_weixin" class="android-btn" href="#"><img src="img/android-btn.png" alt="微信扫描打开APP下载链接提示代码优化" alt="安卓版下载" /></a> <div id="weixin-tip"><p><img src="img/live_weixin.png" alt="微信扫描打开APP下载链接提示代码优化" alt="微信打开"/><span id="close" title="关闭" class="close">×</span></p></div>
CSS代码:
#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 .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}
JS封装代码:
// var is_weixin = (function() { //判断微信UA // var ua = navigator.userAgent.toLowerCase(); // if (ua.match(/MicroMessenger/i) == "micromessenger") { // return true; // } else { // return false; // } // })(); var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf('MicroMessenger') !== -1})(); window.onload = function() { var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉 var btn = document.getElementById('J_weixin'); var tip = document.getElementById('weixin-tip'); var close = document.getElementById('close'); if (is_weixin) { btn.onclick = function(e) { tip.style.height = winHeight + 'px'; //兼容IOS弹窗整屏 tip.style.display = 'block'; return false; } close.onclick = function() { tip.style.display = 'none'; } } }
相关文章推荐
- 微信扫描打开APP下载链接提示代码优化
- 微信扫描打开APP下载链接提示代码优化(转)
- 微信扫描打开APP下载链接提示代码优化
- 微信扫描打开APP下载链接提示代码案例源码
- 【HTML】- 微信扫描打开app下载提示用户打开浏览器进行下载
- 人脉通分享工能,点击分享到微信或者qq的分享链接打开H5,提示用户用浏览器打开,点击下载,有有app
- 微信扫描打开app下载提示用户打开浏览器进行下载
- 微信浏览器打开 点击下载app 无需提示使用浏览器打开--代码分享
- 在微信里面打开APP下载链接
- 微信打开链接下载APP
- APP二维码微信扫描后无法下载的问题
- 微信扫描下载提示以及js判断用户手机系统
- 基于JavaScript代码实现微信扫一扫下载APP
- 通过扫描二维码打开app的实现代码
- 通过一个链接打开本地app,或者去下载app
- HTML5打开本地app应用的方法,如果你的手机上安装App,就会自动打app,否则在页面上会提示你进行下载app
- 在UC浏览器打开链接唤醒app,如果没有安装该app,则跳转到appstore下载该应用
- APP二维码微信扫描后无法下载的问题
- Android基础--下载安装app,会提示完成和打开,点击打开运行所产生的问题
- APP二维码微信扫描后无法下载的问题