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

2024-02-19 01:59

本文主要是介绍教你接入公众号发博客弹幕,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

准备工作

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

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

  • 最后,得会编程(比如,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长连接的“服务器推”技术,此处主要用来即时在博客页面上显示弹幕消息,它的核心代码分服务端和客户端主要如下:

<?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      = truevar 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.MsgTypeswitch (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, //延迟,单位秒,默认8bottom:70, //距离底部高度,单位px,默认随机color:'#fff', //颜色,默认白色old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色
}
$('body').barrager(item);

基于jQuery的弹幕效果,代码简短,调整好合适的CSS样式

体验效果

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

图片描述

这篇关于教你接入公众号发博客弹幕的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/723151

相关文章

搜狗浏览器打开CSDN博客排版错乱问题解决

之前发生过几次,不知道什么原因。 今天一直用着好好的,打开一个csdn连接,显示404,博文被删除了,于是就用百度快照打开试试,百度快照打开显示的排版很乱也没找到有用信息。 后面再浏览CSDN博客就排版错乱,显示一个大大二维码图片。 尝试删除IE缓存无效,使用谷歌浏览是好的。 基本锁定就是搜狗缓存导致的,于是找如何删除搜狗缓存   清除后恢复正常

828华为云征文|基于华为云Flexus云服务器X实例部搭建Halo博客平台

华为云征文|基于华为云Flexus云服务器X实例部搭建Halo博客平台 前言一、Flexus云服务器X实例介绍1.1 Flexus云服务器X实例简介1.2 Flexus云服务器X实例特点1.3 Flexus云服务器X实例使用场景 二、Halo介绍2.1 Halo 简介2.2 Halo 特点 三、本次实践介绍3.1 本次实践简介3.2 本次环境规划 四、购买华为云Flexus云服务器X实例4.

缓存的常见问题 以及解决博客文章

1.jedispool 连 redis 高并发卡死  (子非鱼yy) https://blog.csdn.net/ztx114/article/details/78291734 2. Redis安装及主从配置 https://blog.csdn.net/ztx114/article/details/78320193 3.Spring中使用RedisTemplate操作Redis(sprin

Java应用对接pinpoint监控工具的时候,应用名称长度超出限制而导致接入失败

一、背景 java应用需要接入pinpoint,同一个虚拟机上的其他应用接入成功,唯独本应用不行。 首先排除是pinpoint agent的问题,因为其他应用都正常。 然后,我就对比二者的启动脚本。 -javaagent:/opt/pinpoint/pinpoint-bootstrap.jar -Dpinpoint.agentId=DA301004_17 -Dpinpoint.applic

[置顶] IT牛人博客

团队技术博客 淘宝UED淘宝用户体验团队淘宝核心系统淘宝核心系统团队博客阿里巴巴数据库团队专注数据库管理开发运维淘宝通用产品专注JAVA技术淘宝QA致力于做测试的行业标准淘宝搜索技术关注技术 关注搜索量子恒道专注大数据统计百度搜索研发关注搜索相关技术EMC中国研究院关注于云计算和大数据贰号楼肆层阿里巴巴平台技术部阿里数据平台阿里巴巴数据平台百度技术分享交流百度的互联网技术编码者说腾讯滴技术团队腾

为什么你应该从现在开始就写博客---刘未鹏

(一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处。(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极大损伤一样) 让我说得更明确一点:用博客的形式来记录下你有价值的思考,会带来很多好处,却没有任何明显的坏处。Note:碎碎念不算思考、心情琐记不算思考、唠唠叨叨也不算思考、没话找话也不算思考

游戏开发者有必要写博客的6大原因

为什么你要写博客?在本文中我将分析为何写博客在游戏产业中如此有效的 6 大原因。 假设你是资深的游戏开发者、制作、发行商、二年级学生、测试者、设计师、程序员、美术师或者编曲者。你的爱好伴随着许多的技艺。每个人完成一款游戏的过程,方法都不同,这里也充满许多值得我们学习的有趣瞬间。当然你可以继续坚守自己的看法。但我还是看到了许多低调的开发者们在挣扎着。 1. 贡献 我的观点中最重要的一方面便是你

为什么csdn博客不能推荐首页了?

哎,好久没来写文章, 结果就不能推荐首页了. 开始以为,是因为很久不发表文章了,但是,后来发表了几篇,还是不行。 换了个账号,写文章还是不能推荐首页, 估计是csdn不提供这个功能了。 但是吧,推荐首页无非就是增加浏览量,现在,大家写文章都没有推荐首页了,对所以用户都是公平的。

一步步教你接入个推 推送

一: manifast中的配置 权限: <!-- 个推SDK权限配置开始 --> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permissi

一步步教你如何为你的app接入支付宝

官方接口文档步骤链接: https://doc.open.alipay.com/doc2/detail?treeId=59&articleId=103563&docType=1 1首先,你的要有一个企业的账户,并且已经和支付宝平台签约了, (具体操作查看https://doc.open.alipay.com/doc2/detail.htm?treeId=58&articleId=1035