【源码】微信打开网址时提示浏览器中打开

今天波波分享一个前端的开发实例。我们知道微信内置的浏览器是一个很封闭的东西,对一些APP下载链接、淘宝链接、支付宝链接都会屏蔽,不过屏蔽就屏蔽吧,微信尼玛提示做的也太丑了点儿吧,今天波波教大家如何做一个图片提示,我们先看下演示效果哈。weixin-tip

当然了,如果你觉得这个样子太丑也可以自己设计一个呆萌的,图片而已,不必要关心,重点在下面。

源码分享:

<!DOCTYPE html>
 <html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>微信提示JS版</title>
    </head>
<body>
 	<style type="text/css">
    	*{margin:0; padding:0;}
     	img{max-width: 100%; height: auto;}
     	.test{height: 600px; max-width: 600px; font-size: 40px;}
     	</style>
 	<div class="test">
     		<a href="http://mp.weixin.qq.com/mp/redirect?url=您要跳转的链接">有效跳转</a>
     	</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>

除了下载APP微信会屏蔽之外,类似微商城、微信三级分销系统等在微信端需要跳转到淘宝、天猫、支付宝的链接都会被屏蔽,也都可以参考上面方式进行解决。如需开发微信三级分销系统或微商城的朋友也可以联系波波,微信号:horkooo666

未经允许不得转载:波波助手 » 【源码】微信打开网址时提示浏览器中打开

赞 (0)

牛人热评 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址