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

xiaolinbang 发布于2019-06-27 16:40 / 1027人阅读

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

准备工作

首先，得有一个带有后端动态语言的个人博客

其次，得有一个微信个人公众号

最后，得会编程(比如，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();
}

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

 $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样式

体验效果

不妨现在就扫描下面二维码，关注我的公众号后，随便发一点文字或图片，然后到我的个人博客看看

私有云服务器托管如何进行虚拟号发短信教你用教你选择教你Ruby快速入门

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/23058.html

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

不知道你有没有这么想过，在微信个人公众号越来越普遍，自媒体越来越流行的时候，是否想过申请一个自己的微信公众号折腾一下呢？在朋友圈里看到越来越多的小伙伴都在转发自己微信公众号里的文章，你会想我要搞个微信公众号该折腾点什么呢？写文章太没新意，做内容你没素材。好了，那么本文就教你如何正确的折腾微信个人公众号。准备工作首先，得有一个带有后端动态语言的个人博客其次，得有一个微信个人公众号最后，得会...

sean 2019-08-20 17:00 评论0 收藏0
只需四个步骤几行代码，即可快速实现直播弹幕功能

摘要：想要快速实现这些功能，需要进行怎样的操作呢其实，实现直播弹幕功能只需四个步骤和几行代码现在，我们使用云巴，手把手教你实现直播弹幕功能吧步骤一注册云巴账号打开网址，或直接搜索云巴，进行注册并登录。在视频直播中，互动是不可缺少、不容小觑的内容，主要包括发送弹幕、打赏、点赞等。想要快速实现这些功能，需要进行怎样的操作呢？其实，实现直播弹幕功能只需四个步骤和几行代码！现在，我们使用云巴 ...

guyan0319 2019-08-21 14:37 评论0 收藏0
B 站直播间数据爬虫

摘要：站的弹幕服务器也有类似的机制，随便打开一个未开播的直播间，抓包将看到每隔左右会给服务端发送一个心跳包，协议头第四部分的值从修改为即可。原文：B 站直播间数据爬虫，欢迎转载项目地址：bilibili-live-crawler 前言起因去年在 B 站发现一个后期超强的 UP 主：修仙不倒大小眼，专出 PDD 这样知名主播的吃鸡精彩集锦，涨粉超快。于是想怎么做这样的 UP，遇到的第一...

xuweijian 2019-06-28 18:40 评论0 收藏0
Android view - 收藏集 - 掘金

摘要：掘金一个可实现长按扫描上的二维码的工具库。说到刷新加载，我们第一个想到啥，对了从头开始学四类添加和多种的支持掘金来张图前言敲酷炫的切换效果和弹性指示器。掘金效果图使用方法依赖注意使用时需要在父布局中加入仿讨论组头像掘金仿讨论组头像基仿美团详情滑动界面，并兼容 NestedScroll 嵌套 - Android - 掘金不论什么APP应该都会有个app产品的详情界面, 详情界面往往也比...

IntMain 2019-06-25 11:31 评论0 收藏0
2016年云巴产品更新合集

摘要：实时弹幕使用云巴，直播平台可快速实现视频直播中发送弹幕打赏点赞等实时互动功能。云巴聊天室支持图片上传文件发送文档评论系统正式上线新增搜索功能，我们会做得更好。 SDK 篇 Android SDK 更新 Release 1.6.3后台进程相互拉起的特殊版本 Release 1.6.4增加 so 文件 Release 1.8.0支持小米、华为推送，无需注册第三方账号 Release 1....

CoffeX 2019-08-21 11:27 评论0 收藏0