|
最近小程(cheng)序云發開的(de)開放讓我又(you)有了更新(xin)我的(de)微信小程(cheng)序版博客的(de)動力(li)。
背景
由于我(wo)的(de)(de)博客是基于開(kai)源博客框架ghost搭建(jian)的(de)(de)，雖然相(xiang)較于wordpress輕量了很多(duo)，但在(zai)功能上遠(yuan)沒有wordpress豐富，像(xiang)基本的(de)(de)網站統計，文章統計，點評之類的(de)(de)通通沒有。
我的(de)pc端(duan)(duan)博客是通過接入第三(san)方組(zu)件來實(shi)現(xian)的(de)，但小程序(xu)端(duan)(duan)一直無(wu)法實(shi)現(xian)「需要自己(ji)再搭建(jian)個服務端(duan)(duan)」。但有了云開發(fa)之后(hou)，這一切就(jiu)變得有可能啦。
想了解我(wo)的博客搭建和(he)小(xiao)程序版博客可以參考下面兩篇文章(zhang)：
-
搭建(jian)Ghost 博(bo)客詳(xiang)細教程（總）
-
微信小程序版(ban)博客——開(kai)發匯總(zong)總(zong)結（附源碼）
統計實現
最想實(shi)現的(de)還是(shi)統計功(gong)能啦，每篇文章的(de) 瀏覽量 ， 點評(ping)數 ， 點贊數 之類的(de)，這個應(ying)該是(shi)比較(jiao)基本的(de)。
所以利用小程序(xu)云開發(fa)提供的(de)數據(ju)庫功能來存儲這類數據(ju)，還是很方(fang)便可以實(shi)現(xian)該功能的(de)。
這里先簡單說下瀏覽量的(de)實現(xian)。
首先需要改變下文(wen)(wen)件夾(jia)(jia)結(jie)構，因為會(hui)用到(dao)云函數(shu)的功(gong)能，所以我(wo)將云函數(shu)的文(wen)(wen)件夾(jia)(jia)和項目文(wen)(wen)件夾(jia)(jia)平級，同時小程序配(pei)置文(wen)(wen)件中新(xin)增 cloudfunctionRoot 節點，用于指向云函數(shu)文(wen)(wen)件夾(jia)(jia)，指定(ding)完之(zhi)后文(wen)(wen)件夾(jia)(jia)的圖(tu)標也會(hui)默認改變。
創建集合
接下(xia)來(lai)利用(yong)云開發的(de)(de)數據庫創建(jian)一個集合，用(yong)于保存(cun)文章的(de)(de)統計數據，集合的(de)(de)字段如下(xia)：
{
"_id": W5y6i7orBK9ufeyD //主鍵id
"comment_count": 0 //評論數
"like_count": 14 //點贊數
"post_id": 5b3de6b464546644ae0b7eb4 //文章id
"view_count": 113 //訪問數
}
|
同時(shi)，最好加(jia)上(shang)索引，避免后續(xu)集合數據(ju)變多(duo)而影(ying)響(xiang)查詢效率，通常都是根據(ju)文(wen)章id進行(xing)查詢：
云函數編寫
集合(he)創(chuang)建完之后，需要編寫(xie)云函數，用于操作(zuo)數據庫，當然你也(ye)可以直接在小程序端直接操作(zuo)數據庫。
這里需要兩個(ge)接(jie)口，一個(ge)用于(yu)查詢文章數據，代碼如下：
// 云函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
const _ = db.command
// 根據文章Id集合批量查詢統計數據
exports.main = async (event, context) => {
try {
var result= await db.collection('posts_statistics').where({
post_id: _.in(event.post_ids)
}).get();
return result.data
}
catch(e)
{
console.error(e)
return []
}
}
|
另一(yi)個用于新增或者(zhe)更新文(wen)章統計數(shu)據,由于可(ke)能第一(yi)次(ci)訪問，集合中(zhong)不(bu)存在該文(wen)章ID的數(shu)據，所以加了一(yi)段默認新增的動(dong)作(zuo)，代(dai)碼如下：
// 云函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database()
// 更新文章統計數據，沒有則默認初始化一筆
exports.main = async (event, context) => {
try {
var posts = await db.collection('posts_statistics').where({
post_id:event.post_id
}).get()
if (posts.data.length>0) {
await db.collection('posts_statistics').doc(posts.data[0]['_id']).update({
data: {
view_count: posts.data[0]['view_count'] + event.view_count ,//瀏覽量
comment_count: posts.data[0]['comment_count']+event.comment_count,//評論數
like_count: posts.data[0]['like_count'] + event.like_count//點贊數
}
})
}
else {
//默認初始化一筆數據
await db.collection('posts_statistics').add({
data: {
post_id: event.post_id,//文章id
view_count: 100 + Math.floor(Math.random() * 40),//瀏覽量
comment_count: 0,//評論數
like_count: 10 + Math.floor(Math.random() * 40)//點贊數
}
})
}
return true
} catch (e) {
console.error(e)
return false
}
}
|
小程序端接入
數據庫的(de)操作(zuo)編寫完成之后(hou)，小程(cheng)序端(duan)就可以接入了，在列表頁(ye)增(zeng)加對(dui)應的(de)UI及樣式：
對應的(de)代碼(ma)也比(bi)較簡單，在(zai)獲(huo)取(qu)到(dao)文(wen)章信息之后，再調用(yong)下查詢的(de)云函數，獲(huo)取(qu)到(dao)對應文(wen)章的(de)統計數據渲染到(dao)頁面，核心代碼(ma)如下：
//wxml部分
<view class="icon-review">
<view class="zan-icon zan-icon-browsing-history zan-pull-left zan-font-12 "></view>
<view class="zan-pull-left zan-font-12">
<text>{{item.view_count}}</text>
</view>
</view>
<view class="icon-comment">
<view class="zan-icon zan-icon-records zan-pull-left zan-font-12 "></view>
<view class="zan-pull-left zan-font-12">
<text>{{item.comment_count}}</text>
</view>
</view>
<view class="icon-like">
<view class="zan-icon zan-icon-like zan-pull-left zan-font-12 "></view>
<view class="zan-pull-left zan-font-12">
<text>{{item.like_count}}</text>
</view>
</view>
//js部分-詳情頁onLoad時
//瀏覽數+1不需要知道調用結果，失敗了不影響
wx.cloud.callFunction({
name: 'upsert_posts_statistics',
data: {
post_id:blogId,
view_count:1,
comment_count:0,
like_count:0
}
})
//js部分-展示統計數據時
wx.cloud.callFunction({
name: 'get_posts_statistics',
data: {
post_ids: postIds
}
}).then(res => {
//訪問數
post.view_count = res.result[0].view_count;
//點評數
post.comment_count = res.result[0].comment_count;
//點贊數
post.like_count = res.result[0].like_count;
this.setData({
post: post
});
|
到這里，文章瀏(liu)覽量的統計(ji)接入基本就完(wan)成啦。
總結
目前(qian)還(huan)在(zai)開(kai)發(fa)評(ping)論功能，同時(shi)在(zai)開(kai)發(fa)的時(shi)候發(fa)現第(di)一版(ban)的代(dai)碼寫的還(huan)是挺亂的，在(zai)開(kai)發(fa)新功能的同時(shi)也準備(bei)重(zhong)構一下，有(you)興趣的小伙伴可以參考一下。
|
