微信大屏幕技术会分几次写,包括微信上墙,微信投票,微信抽奖,微信摇一摇等。 这篇先扯微信上墙(PHP版)。 4 N+ m, |4 K! h0 \% J! E
大概的思路其实也不难,流程如下:微信后台接收消息事件,关键词判断(如“我要上墙”),观众当前状态判断(是否处于上墙模式),存储用户的上墙内容,后台审核,通过审核并上墙。 下面分步详解微信上墙开发: 6 b- {# C- V6 d6 h8 ?: h
首先你要有自己的公众号,订阅号或服务号均可。不管你是使用开发框架还是没有,作为开发者的你应该已经知道腾讯会将用户消息和事件发送到你配置的服务器,你在该url指向的php文件中即可接收消息或事件。 在实现时,我是直接在该文件,这边我管它叫接口文件吧,进行关键词和状态判断并进行存表操作。参考代码如下: - $mem=M('member');$ i1 h- \/ O' |% u
-
8 ?7 G3 ?3 t5 l8 I1 @5 d - $oMap['openid']=$data['FromUserName'];
5 d$ O; L( y8 b5 a8 S7 E - //获取用户的当前的状态
: T3 [5 b0 P& t- ~8 s - $w_status=$mem->where($oMap)->getField('status');
: W& T* v4 g$ s( X2 Y; S - # I/ L. ]9 Q7 E1 W! J* C
- //三个判断进行用户的上墙信息表的建立
; y8 n5 N2 ]" l7 p* m/ z$ T - //判断当前的用户状态,看是否处于上墙模式,如果满足则存储该消息
% D- l' o' A/ B: z# c5 X( T - if(!$w_status&&$data['Content']!="退出"){( @" l$ e% ?; a6 i1 M
- $follows=M('follows');
+ e: k! H8 E8 n( H% ^ - $data['contents']=$data['Content'];
! i* ^+ `/ m" \- a) K0 u: ? - $data['openid']=$data['FromUserName'];
. F; `: o$ g4 }- i' q - $ctime=date('Y-m-d H:i:s',$data['CreateTime']);& F$ T) ?& ~3 U1 Q% }3 J7 S5 X9 P0 x
- $data['ctime']=$ctime;- \) e' V4 K! I* `7 ]& [
- //获取用户信息,相关函数属于自己写的封装函数,可根据自己的情况获取* ^ B$ w' S# B7 \% f+ E
- $token = get_token();1 J. z. O2 \5 \4 Z
- $openid = get_openid(); 6 ^5 o1 n- O- g4 J6 @
- $userinfo = getWeixinUserInfo($openid, $token);
9 n" u$ s4 B5 e& {/ c0 I) ?4 i - $headPic = $userinfo['headimgurl'];) J: y, e, x3 M% V6 g/ ]
- $data['headimge']=$headPic;
6 d0 E, P6 y( p6 R - $data['nickname']=$userinfo['nickname'];7 G5 ^: Y* f- O0 B" i
- $follows->add($data);
2 a- f% x) T- T1 O! V, l6 R9 N - $weixin->replyText("您的信息我们已经收到,待审核后即可上墙,回复【退出】离开上墙模式"); d. X6 D) f- k
-
& P6 _) X- ^& {! I3 ^ - }* d: i9 U- m( m$ W7 J
-
- q/ y% y- x! x; t7 e9 \ - if(preg_match('/我要上墙/i',$data['Content'])){
2 M4 e7 ]1 \( A5 T - // preg_match('/\#微唱\#(.+)/i',$data['Content'], $matchs);
$ U3 R( G! U1 T# X4 w/ p) y, @9 a - // $oMap['openid']=$data['FromUserName'];$ a0 G! `7 y _; k; e# }8 {4 h
- ! ^& }9 J9 L S6 n4 A5 {
- $data['status']=0;' V) F5 A0 e/ X2 }
- $mem->where($oMap)->save($data);
$ a- h+ Z. \1 F: h& o; H* n7 z0 G - $articles[0] = array(: C3 \0 y3 }4 e/ C8 i6 y
- "Title" => "进入上墙模式,回复【退出】,离开上墙模式",3 W; _+ G/ a& Y, K
- "Description" => "小伙伴们嗨起来,让全场听到你的声音,更有神秘大奖哦~~",$ U% V: a" J7 X2 x/ m+ h; I H
- "PicUrl" => "",. W4 R$ H5 p1 n9 W! B
- "Url" => "",. z, R! V7 ]7 z2 `+ t5 n Z* B7 s
- ); Z/ b1 c# u/ K/ |$ [& [8 l
- / f' k# ~6 Z3 {8 f- N
- $weixin->replyNews($articles);
3 H# L# e# [0 q* l. c+ }: ~ - }
/ r# G' g" J% @ -
Y& C( _( O/ r9 | l3 S8 }9 m - if(preg_match('/退出/i',$data['Content'])){* t. {% \$ v1 i8 M
- $data['status']=1;6 w* Z+ U% `* d5 [/ j9 q+ V
- $mem->where($oMap)->save($data);
' d3 j0 z& X2 H+ \+ \( p$ L5 B - $articles[0] = array(+ B: X S+ X; F. Z2 `* D
- "Title" => "已成功退出上墙模式,www.zzarea.com 回复【我要上墙】,进入上墙模式",
$ o1 t6 Y6 X% h ?# J - "Description" => "欢迎再次加入我们的讨论哦!!~~",
/ l* D) I. V$ Z/ ` w/ i# V - "PicUrl" => "",
0 I1 h5 a g; @0 C( o' `/ X - "Url" => "",
2 w! A3 W0 \) b' k- e) v - );
- V u' y% r/ c0 C2 i- E7 t6 \ - $weixin->replyNews($articles);2 p' x3 t3 h+ Z
- }
复制代码现在我们已经有自己 的上墙信息表,并只要有新的用户发送上墙信息,都会记录下来,接下来要做的就是从表中读取相关信息,并进行上墙。在这里为了能实现上墙的动态效果,即没隔一段时间自动刷出一条审核通过的信息。 在我们审核通过一条信息时,我们将存上墙信息表的exam字段做标记,在ajax向后台请求上墙信息时,将相应的审核通过的信息传到前台即可。 相关的后台php响应参考代码如下: - $wall=M('follows');$ l ^" K; }* U- v8 L
- $start=I('get.lastid');
3 b b, A& g: M9 j( n - $lastid=$start+1;
6 u: `* m6 p, l+ O% D) k - " j4 h/ ?# R5 |" ~! f' E
- $info=$wall->where('exam=1')->order('id Asc')->limit($start.',1')->select();
* w2 N6 L% s9 E+ f7 o -
* G: w( ?7 U9 B9 s6 u - $data[$lastid]['id'] = $info[0]['id'];
2 B- u3 @& T9 S' ~0 R- L$ g: k* C - // $data[$lastid]['fakeid'] = $info[0]['fake_id'];4 F8 {$ g5 n% d+ Q
- $data[$lastid]['num'] = $lastid;
e7 T) g: m" @. ~9 K0 z7 M' G; L6 [ - $data[$lastid]['content'] = $info[0]['contents'];' P8 C8 ~ `/ d2 r) W
- $data[$lastid]['nickname'] = $info[0]['nickname'];
9 C. r( j7 p( j" H - $data[$lastid]['id'] = $info[0]['id'];' O$ ?2 q' |6 w0 a
- if(count($info)==0){ & l/ j9 l* U p4 J* a1 c( P0 F
- $data2=array('data'=>$data,'ret'=>0); h7 t0 |8 S" R- D5 l
- $this->ajaxReturn($data2,'JSON');# r y4 y* {! P- w8 w$ u- u: C
- }
T @6 b+ ?/ n& V - else{% m. @* s( v4 l! ^
- $data2=array('data'=>$data,'ret'=>1);
. Z( t7 Y$ ]( E1 g4 l2 N( [ - $this->ajaxReturn($data2,'JSON');! i" Q: O; x$ ]9 Z0 [
- }
3 m! O+ R" b3 S% ` - }
复制代码这样我们有了要上墙的数据,离实现上墙就不远啦~~最后要做的就如如何利用js等将上墙内容动态的表现出来。在这里,我是将后台传过来的上墙信息嵌入到html代码中,在利用定时器函数,每隔一段时间自动检测是否有新的审核通过的上墙信息,如果有,就利用slidedown函数将新信息下拉刷新到大屏幕,参考代码如下: - function messageAdd()
4 i6 u5 Y1 _/ L7 j* G0 U - {
# n* g9 V0 c" }, V$ r - . a2 Q1 A& S# C5 S |
- if(cur==len)
, k" F/ J$ Q- _ P - {
& Y. a: g+ T( ?/ \2 K! F - messageData();
9 @% G$ ^7 J) Q - return false;3 s4 w/ ^: y1 o9 J: J
- }
8 j8 r F" Y, J2 q& t) p - if(data.length != 0){+ S! T; L! [/ u$ O; p9 c
- if(data[cur][1]==""){
' }9 ~; @; k& x! R1 E - data[cur][1]="";
* H# X0 ~8 ^: t `7 Y4 t - }; K9 C+ {/ G1 m! Z& k1 r s
-
+ j$ u2 q& a$ | - var str='<li id=li'+cur+' onclick="viewOne('+cur+',this);"><div class=m1><div class=m2><div class="pic"><img src="" width="100" height="100" /></div><div class="c f2"><span>'+data[cur][2]+':</span>'+data[cur][3]+'</div></div></div></li>';
: S$ C& B7 G. ]5 x B - $("#list").prepend(str);
' C8 {9 b1 ~5 y& q - $("#li"+cur).slideDown(800);
, W. x. T0 h( [- u# C - cur++;
4 w; ^( H* ]- E, q! [1 }. U5 `) G - }- |8 j: y7 K W% e/ M, K
- % o( S' B( _4 ^6 K# W& D
- messageData();
) M8 T2 H. S5 }5 ~ -
; [! a6 z1 t: u" k' L - }: l' F% q1 U" ^( W
- function messageData()
$ Y+ a, T# b4 E; X7 S' ~+ P - {0 D% v( {9 ?( N3 w0 q: u" M8 H
- //ajax实现从后台获取上墙信息% R3 s7 H0 n) @* G
- var url='__URL__/wallmessage';
, G8 E$ ^9 A6 c; J9 X0 n - $.getJSON(url,{lastid:lastid},function(d) {
3 ^, v3 l8 S8 N Y: O/ b - // alert(d);return;1 Y# B; b/ N4 b8 v
- if(d['ret']==1)# ~- m. s5 R, C/ l% \5 k/ B
- {' L3 \/ z6 G, l0 K' ?
- $.each(d['data'], function(i,v){* }+ ?" ~. O1 H* }3 n
- data.push(new Array(v['num'],v['id'],v['nickname'],v['content']));
3 A- M8 F* n/ X8 E" s( p- {6 [ - lastid=v['num'];& Z: `: P6 b6 H: d+ M1 c- E
- len++;8 `: o- g/ G E8 A% L
- });
- |1 N0 u' l7 r - }else{- Z/ _# P6 r" N& e
- // alert('没消息,每隔5秒ajax一次');
4 h: Y s" N7 t/ ~; ^; D$ o# T - window.setTimeout('messageData();', 2000);$ S) B' T3 s8 C- {# e5 g, \! j
- } 4 W" _: @( r8 X. V9 Z1 ~- {6 z
- });+ f# C2 w& i; k4 `( @. O: v) J7 K
- }
/ g6 n/ p$ W3 S& J0 Y' ?) e - window.onload=function()* @( f8 p8 }2 Y5 I6 X
- {
; K$ E" P6 t) U, j - messageAdd();% s2 _$ U. m% k" B! C2 K- t7 v/ M$ C
- mtime=setInterval(messageAdd,3000);
- g9 H; s% i4 R( c3 {4 d - }
复制代码至此微信上墙功能已实现,怎样,是不是很简单。 关键步骤就是建表,读表,效果实现~~~
& h' w; g9 A2 l# v |