不知道你有沒有這么想過,在微信個人公眾號越來越普遍,自媒體越來越流行的時候,是否想過申請一個自己的微信公眾號折騰一下呢?在朋友圈里看到越來越多的小伙伴都在轉發自己微信公眾號里的文章,你會想我要搞個微信公眾號該折騰點什么呢?寫文章太沒新意,做內容你沒素材。好了,那么本文就教你如何正確的折騰微信個人公眾號。
準備工作首先,得有一個帶有后端動態語言的個人博客
其次,得有一個微信個人公眾號
最后,得會編程(比如,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樣式
體驗效果不妨現在就掃描下面二維碼,關注我的公眾號后,隨便發一點文字或圖片,然后到我的個人博客看看
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/23058.html
不知道你有沒有這么想過,在微信個人公眾號越來越普遍,自媒體越來越流行的時候,是否想過申請一個自己的微信公眾號折騰一下呢?在朋友圈里看到越來越多的小伙伴都在轉發自己微信公眾號里的文章,你會想我要搞個微信公眾號該折騰點什么呢?寫文章太沒新意,做內容你沒素材。好了,那么本文就教你如何正確的折騰微信個人公眾號。 準備工作 首先,得有一個帶有后端動態語言的個人博客 其次,得有一個微信個人公眾號 最后,得會...
摘要:想要快速實現這些功能,需要進行怎樣的操作呢其實,實現直播彈幕功能只需四個步驟和幾行代碼現在,我們使用云巴,手把手教你實現直播彈幕功能吧步驟一注冊云巴賬號打開網址,或直接搜索云巴,進行注冊并登錄。 在視頻直播中,互動是不可缺少、不容小覷的內容,主要包括發送彈幕、打賞、點贊等。想要快速實現這些功能,需要進行怎樣的操作呢? 其實,實現直播彈幕功能只需四個步驟和幾行代碼! 現在,我們使用云巴 ...
摘要:站的彈幕服務器也有類似的機制,隨便打開一個未開播的直播間,抓包將看到每隔左右會給服務端發送一個心跳包,協議頭第四部分的值從修改為即可。 原文:B 站直播間數據爬蟲, 歡迎轉載項目地址:bilibili-live-crawler 前言 起因 去年在 B 站發現一個后期超強的 UP 主:修仙不倒大小眼,專出 PDD 這樣知名主播的吃雞精彩集錦,漲粉超快。于是想怎么做這樣的 UP,遇到的第一...
摘要:實時彈幕使用云巴,直播平臺可快速實現視頻直播中發送彈幕打賞點贊等實時互動功能。云巴聊天室支持圖片上傳文件發送文檔評論系統正式上線新增搜索功能,我們會做得更好。 SDK 篇 Android SDK 更新 Release 1.6.3后臺進程相互拉起的特殊版本 Release 1.6.4增加 so 文件 Release 1.8.0支持小米、華為推送,無需注冊第三方賬號 Release 1....
閱讀 3952·2021-11-18 13:21
閱讀 4759·2021-09-27 14:01
閱讀 3110·2019-08-30 15:53
閱讀 2388·2019-08-30 15:43
閱讀 1730·2019-08-30 13:10
閱讀 1508·2019-08-29 18:39
閱讀 887·2019-08-29 15:05
閱讀 3340·2019-08-29 14:14