不知道你有无这么想过,在微信个人民众号愈来愈广泛,自媒体愈来愈盛行的时刻,是不是想过请求一个本身的微信民众号折腾一下呢?在朋侪圈里看到愈来愈多的小伙伴都在转发本身微信民众号里的文章,你会想我要搞个微信民众号该折腾点什么呢?写文章太没新意,做内容你没素材。好了,那末本文就教你怎样准确的折腾微信个人民众号。
准备工作
起首,得有一个带有后端动态言语的个人博客
其次,得有一个微信个人民众号
末了,得会编程(比方,php、Javascript等)
设置微信民众号
登录微信民众平台,进入开辟->基础设置页面,启用服务器设置功用,以下图:
详细接入并考证你的服务器地点请参考民众号开辟文档,搞定这一步后,我们就能够最先写服务端代码(以php为例)服务端重要用来吸收微信post过来的数据并剖析处置惩罚,以下是民众号音讯吸收服务端代码片断:
// 微信音讯吸收进口function onHttpPostRequest($mock){ $wxMsgBody = $mock; if(empty($wxMsgBody)){ $wxMsgBody = file_get_contents("php://input"); } $this->wxMsgBody = simplexml_load_string($wxMsgBody, 'SimpleXMLElement', LIBXML_NOCDATA); $this->wxMsgType = strtoupper($this->wxMsgBody->MsgType); $this->comet();}// 将吸收到的音讯序列化后写入文件,用来触发前端的cometpublic function comet() { $cometfile = WWW_PATH . 'wechat.comet'; if(!file_exists($cometfile)) { file_put_contents($cometfile, ''); } $filemtime = filemtime($cometfile); $timing = time() - $filemtime; $wxMsgBody = (array)$this->wxMsgBody; if($timing > 1) { file_put_contents($cometfile, serialize($wxMsgBody)); } else { file_put_contents($cometfile, serialize($wxMsgBody) . PHP_EOL, FILE_APPEND); }}
以上完全代码地点:indexAction.class.php
comet?
comet手艺是N年前出来的一种基于HTTP长衔接的“服务器推”手艺,此处重要用来立即在博客页面上显现弹幕音讯,它的中心代码分服务端和客户端重要以下:
$value) { $msg = unserialize($value); if($msg['MsgId'] == $msgid) { break; } array_push($result, $msg);}$respOnse= array();$response['data'] = $result;$response['timestamp'] = $filemtime;echo $callback . '(' . json_encode($response) . ')';ob_flush();flush();
以下代码重如果在客户端与服务端竖立http长衔接
// 客户端代码 (Javascript)function Comet(url,cbk){ var url = url; var cbk = cbk; var timestamp = 0; var msgid = 0; var noerror = true var main = function(){ $.ajax({ type:'GET', url: url, dataType : 'jsonp', timeout: 5000, data: { timestamp: timestamp, msgid: msgid } }).success(function(res){ var isFrist = timestamp; timestamp = res.timestamp; if(res.data[0]) { msgid = res.data[0]['MsgId']; } noerror = true; if(isFrist == 0)return false; if(cbk)cbk(res); }).complete(function() { if (!noerror){ setTimeout(main, 10); }else{ setTimeout(main, 10); } noerror = false; }); }; return main();}Comet('http://dev.sobird.me/_wechat.php', function(res) { var data = res.data; var danm={ info: '', //笔墨 href: '', //链接 close: false, //显现封闭按钮 speed: 6, //耽误,单元秒,默许6 color: randRgb(), //色彩,默许白色 old_ie_color: randRgb(), //ie低版兼容色,不能与网页背景雷同,默许黑色 } if(data.length > 0) { $.each(data, function(index, item) { var msgType = item.MsgType switch (msgType) { case 'text' : var text = item.Content; danm.info = text; $('body').barrager(danm); break; case 'image' : var img = 'http://dev.sobird.me/wechat/pic?src=' + item.PicUrl; danm.img = img; disImage(img, function() { $('body').barrager(danm); }); break; default: } }); }});
完全代码:Jaring.js 文件最底部
弹幕?
在博客上完成弹幕结果相对来说就简朴了,在Github上有许多的开源库(基于jQuery),我运用的是这个库: jquery.barrager.js,在博客中引入这个库你就能够像下面如许运用了
// 把官方示例挪过来~~var item={ img:'static/heisenberg.png', //图片 info:'弹幕笔墨信息', //笔墨 href:'http://www.yaseng.org', //链接 close:true, //显现封闭按钮 speed:8, //耽误,单元秒,默许8 bottom:70, //间隔底部高度,单元px,默许随机 color:'#fff', //色彩,默许白色 old_ie_color:'#000000', //ie低版兼容色,不能与网页背景雷同,默许黑色}$('body').barrager(item);
基于jQuery的弹幕结果,代码简短,调整好适宜的CSS款式
体验结果
无妨如今就扫描下面二维码,关注我的民众号后,随意发一点笔墨或图片,然后到我的个人博客看看