教你接入公众号发博客弹幕

不知道你有没有这么想过,在微信公众号越来越普遍,自媒体越来越流行的时候,是否想过申请一个自己的微信公众号折腾一下呢?在朋友圈里看到越来越多的小伙伴都在转发自己微信公众号的文章,你会想我要搞个微信公众号该折腾点什么呢?写文章太没新意,做内容你没素材。好了,那么本文就教你如何正确的折腾微信个人公众号。

准备工作

  • 首页,得有一个带有后端动态语言的个人博客
  • 其次,得有一个微信个人公众号
  • 最后,得会点编程(比如,php,javascript等)

配置微信公众号

登录微信公众平台,进入开发->基本配置页面,启用服务器配置功能,如下图:

IMG_20170603_220258

微信服务器配置

具体接入并验证你的服务器地址请参考公众号开发文档,搞定这一步后,我们就可以开始写服务端代码(以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();
}

// 将接受到的消息序列化后写入文件,用来触发前端的comet
public 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长连接的“服务器推”技术,此处主要用来即时在博客页面上显示弹幕消息,它的核心代码分服务端和客户端主要如下:

<?php
// 服务端代码
ini_set("display_errors", "On");
error_reporting(E_ALL | E_STRICT);

$cometfile  = 'wechat.comet';

set_time_limit(0);
$lastmtime = isset($_GET['timestamp']) ? $_GET['timestamp'] : 0;
$msgid = isset($_GET['msgid']) ? $_GET['msgid'] : 0;
$callback = isset($_GET['callback']) ? $_GET['callback'] : 0;

//取得文件最后修改时间
$filemtime = filemtime($cometfile);
while ($filemtime <= $lastmtime)  {
//有释放CPU占用率的作用
    usleep(10000);
    //清除文件缓存信息
    clearstatcache();
    $filemtime = filemtime($cometfile); 
} 
$files = array_reverse(file($cometfile)); 
$result = array(); 
foreach ($files  as $key => $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);

完了?

是的就写这么多,写的比较粗暴~ 只show了code,具体操作步骤可能需要自己去参考书写~

体验效果

或者你也可以在我这里体验一些弹幕效果:
不妨现在就扫描下面二维码,关注我的公众号后,随便发一点文字或图片看看~~
qrcode_for_gh_dbb9c22f60fa_258

后续还会支持 微信语音发弹幕、发送地理位置弹幕等…

这篇文章目前有2条评论

Leave a Reply

(必填项)

(必填项)

(可选)