个人网站很多，微信又很流行，不适配微信提示分享的网站不是好网站。
由于喜欢去简书，对于简书在微信中打开文章最后用javascript弹出的分享到朋友圈效果觉得很赞。这不、就把创意剽窃了过来。技术上自己用css重写了一样的。
由于本人不是很熟悉javascript，明知道用jquery可以实现的情况下，还是准备偷懒用bootstrap组件，果然懒惰的人上天是不会给好运的，引入bootstrap时，它的css覆盖了我现有网页的css样式，结果可想而知。
不过懒人总有懒办法，找了弹曾组件layer，layer是一款口碑极佳的web弹层组件，她具备全方位的解决方案，您的页面会轻松地拥有丰富而友好的操作体验。layer已运用在15万家web平台，其中包括中国联通、蚂蚁短租、phpyun、中国网等知名网站云云……
可是上天总是公平的，我将layer引入后，css加载过慢，网页始终有两三秒延迟。将layer放在七牛中、bae、sae都试了。我怀疑是我昨天网速的问题。所以最终就没做弹窗，只将css的效果放在文章最后。太懒了我，我经常郁闷还有比我更懒的嘛？
不扯淡唠叨了，上图：
而在浏览器中打开则没有分享代码
实现方式非常简单：
使用PHP中的$_SERVER['HTTP_USER_AGENT']函数对浏览器user_Agent进行判断，如果是微信则显示css代码至文章最后。
微信的user_agent我对iOS和Android进行了判断，
在iPhone下，返回
Mozilla/5.0 (iPhone; CPU iPhone OS 5_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9B176 MicroMessenger/4.3.2
在Android下，返回
Mozilla/5.0 (Linux; U; Android 2.3.6; zh-cn; GT-S5660 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1 MicroMessenger/4.5.255
发现微信浏览器为 MicroMessenger ，并且也可以判断手机类型为iPhone还是Android
如果是微信则调用下列代码，非微信则不调用。
具体的PHP代码和css样式实现如下（英语恐惧症者、字母书写代码，代码乱）：
<?php
$user_agent = $_SERVER['HTTP_USER_AGENT']; $user_agent_jieguo=stristr($user_agent, "MicroMessenger");
if (!$user_agent_jieguo) {
}else{
?>
<link rel="stylesheet" type="text/css" href="wechat.css"> <div class="biankuang"><div class="dingbuwenzi">点击右上角的「···」按钮<img src="http://codelies.qiniudn.com/jiantou.png" class="jiantou" width=40 height=42 /></div> <div class="dibu"><img src="http://codelies.qiniudn.com/fenxiang.png" width="35px" height="35px" /><div class="dibuwenzi">发送给朋友</div> <img src="http://codelies.qiniudn.com/pengyouquan.png" width="35px" height="35px" /> <div class="dibuwenzi">分享到朋友圈</div><div class="hong"> <img src="http://codelies.qiniudn.com/hong.png" class="hong1" width="93" height="11" /><img src="http://codelies.qiniudn.com/hong.png" class="hong2" width="93" height="11" /> </div> </div> </div>
<?php
}?
>
其中wechat.css我放在下面链接，务必引用。
http://img.codelies.com/style.css
最终效果如首图。
Blog:www.codelies.com
原文地址：http://www.codelies.com/?p=103
伪程序员
网友评论