好久就想实现这个功能了,可是一直没心情,好在收到网易实习的offer,于是心情大好,实现了这个功能来和大家共享。大家可以先看效果吧:只要关注微信公众帐号say_magic,
然后打开网址http://www.saymagic.cn/weixin/wall.php,在公众号里回复:上墙+您要说的话,您就会发现您说的话会同步到上面的网址上。
整个流程大概是这样:
公众号的后台接收到消息并将消息存入数据库,而前台呢,则使用js的setTimeout函数进行循环的使用ajax向后台get数据来获取数据库的最新数据,当明白整个原理后,就显得很简单,接下来看一下主要的代码:
wall.php(微信墙页面 )
<?php include_once("sql.php");?><meta charset="utf-8" />微信墙 <style> #msgBox div { padding: 19px; margin-bottom: 20px; background: #aaaaaa; border: 2px solid #e3e3e3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); box-shadow: inset 0 1px 1px rgba(0,0,0,0.05); filter:alpha(opacity=60); /* CSS3 standard */ opacity:0.4; font-style:italic; font-size:15px; width:50%;} body{ background: url(bg_main.jpg);}</style><body><?php$wxQuery = "SELECT * FROM wx_note ORDER BY id DESC LIMIT 25";//把wx_msg更改掉$wxResult =$mysql->query($wxQuery);while ($wxRow=mysql_fetch_row($wxResult)) { $lastID or $lastID = $wxRow[0];//0代表数据库中的id,这个要和你自己数据库相对应 $content = $wxRow[4];//4也是一样的 echo "
",$content,"
\n";}$lastID = (int)$lastID;?> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js"></script><script>var lastID = <?php echo $lastID; ?>;function getMessages() { $.ajax({ url: "message.php?lastID=" + lastID + "&v=" + (new Date()/1), dataType: "json", error: function(){ alert("Error loading JSON document"); }, success: function(data){//如果调用php成功 $.each(data,function(i,n){ message = "" + n + "
"; $(message).prependTo("#msgBox").hide().slideDown("slow"); lastID = i; }); } }); window.setTimeout(getMessages, 5000);}getMessages();</script>