|
最近小程序云發開的開放讓我又有了更新我的微信小程序版博客的動力。
背景
由于我的博客是基于開源博客框架ghost搭建的，雖然相較于wordpress輕量了很多，但在功能上遠沒有wordpress豐富，像基本的網站統計，文章統計，點評之類的通通沒有。
我的pc端博客是通過接入第三方組件來實現的，但小程序端一直無法實現「需要自己再搭建個服務端」。但有了云開發之后，這一切就變得有可能啦。
想了解我的博客搭建和小程序版博客可以參考下面兩篇文章：
-
搭建Ghost 博客詳細教程（總）
-
微信小程序版博客——開發匯總總結（附源碼）
統計實現
最想實現的還是統計功能啦，每篇文章的 瀏覽量 ， 點評數 ， 點贊數 之類的，這個應該是比較基本的。
所以利用小程序云開發提供的數據庫功能來存儲這類數據，還是很方便可以實現該功能的。
這里先簡單說下瀏覽量的實現。
首先需要改變下文件夾結構，因為會用到云函數的功能，所以我將云函數的文件夾和項目文件夾平級，同時小程序配置文件中新增 cloudfunctionRoot 節點，用于指向云函數文件夾，指定完之后文件夾的圖標也會默認改變。
創建集合
接下來利用云開發的數據庫創建一個集合，用于保存文章的統計數據，集合的字段如下：
{
"_id": W5y6i7orBK9ufeyD //主鍵id
"comment_count": 0 //評論數
"like_count": 14 //點贊數
"post_id": 5b3de6b464546644ae0b7eb4 //文章id
"view_count": 113 //訪問數
}
|
同時，最好加上索引，避免后續集合數據變多而影響查詢效率，通常都是根據文章id進行查詢：
云函數編寫
集合創建完之后，需要編寫云函數，用于操作數據庫，當然你也可以直接在小程序端直接操作數據庫。
這里需要兩個接口，一個用于查詢文章數據，代碼如下：
// 云函數入口文件
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 []
}
}
|
另一個用于新增或者更新文章統計數據,由于可能第一次訪問，集合中不存在該文章ID的數據，所以加了一段默認新增的動作，代碼如下：
// 云函數入口文件
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
}
}
|
小程序端接入
數據庫的操作編寫完成之后，小程序端就可以接入了，在列表頁增加對應的UI及樣式：
對應的代碼也比較簡單，在獲取到文章信息之后，再調用下查詢的云函數，獲取到對應文章的統計數據渲染到頁面，核心代碼如下：
//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
});
|
到這里，文章瀏覽量的統計接入基本就完成啦。
總結
目前還在開發評論功能，同時在開發的時候發現第一版的代碼寫的還是挺亂的，在開發新功能的同時也準備重構一下，有興趣的小伙伴可以參考一下。
|
