小程序模板網(wǎng)

利用云開發(fā)優(yōu)化博客小程序(一)——瀏覽量統(tǒng)計(jì)

發(fā)布時(shí)間:2018-09-28 09:00 所屬欄目:小程序開發(fā)教程

最近小程序云發(fā)開的開放讓我又有了更新我的微信小程序版博客的動(dòng)力。

背景

由于我的博客是基于開源博客框架ghost搭建的,雖然相較于wordpress輕量了很多,但在功能上遠(yuǎn)沒有wordpress豐富,像基本的網(wǎng)站統(tǒng)計(jì),文章統(tǒng)計(jì),點(diǎn)評(píng)之類的通通沒有。

我的pc端博客是通過接入第三方組件來實(shí)現(xiàn)的,但小程序端一直無法實(shí)現(xiàn)「需要自己再搭建個(gè)服務(wù)端」。但有了云開發(fā)之后,這一切就變得有可能啦。

想了解我的博客搭建和小程序版博客可以參考下面兩篇文章:

  1. 搭建Ghost 博客詳細(xì)教程(總)

  2. 微信小程序版博客——開發(fā)匯總總結(jié)(附源碼)

統(tǒng)計(jì)實(shí)現(xiàn)

最想實(shí)現(xiàn)的還是統(tǒng)計(jì)功能啦,每篇文章的 瀏覽量 , 點(diǎn)評(píng)數(shù) , 點(diǎn)贊數(shù) 之類的,這個(gè)應(yīng)該是比較基本的。

所以利用小程序云開發(fā)提供的數(shù)據(jù)庫功能來存儲(chǔ)這類數(shù)據(jù),還是很方便可以實(shí)現(xiàn)該功能的。

這里先簡單說下瀏覽量的實(shí)現(xiàn)。

首先需要改變下文件夾結(jié)構(gòu),因?yàn)闀?huì)用到云函數(shù)的功能,所以我將云函數(shù)的文件夾和項(xiàng)目文件夾平級(jí),同時(shí)小程序配置文件中新增 cloudfunctionRoot 節(jié)點(diǎn),用于指向云函數(shù)文件夾,指定完之后文件夾的圖標(biāo)也會(huì)默認(rèn)改變。

創(chuàng)建集合

接下來利用云開發(fā)的數(shù)據(jù)庫創(chuàng)建一個(gè)集合,用于保存文章的統(tǒng)計(jì)數(shù)據(jù),集合的字段如下:

{
    "_id": W5y6i7orBK9ufeyD //主鍵id
    "comment_count": 0 //評(píng)論數(shù)
    "like_count": 14 //點(diǎn)贊數(shù)
    "post_id": 5b3de6b464546644ae0b7eb4 //文章id
    "view_count": 113 //訪問數(shù)
}

同時(shí),最好加上索引,避免后續(xù)集合數(shù)據(jù)變多而影響查詢效率,通常都是根據(jù)文章id進(jìn)行查詢:

云函數(shù)編寫

集合創(chuàng)建完之后,需要編寫云函數(shù),用于操作數(shù)據(jù)庫,當(dāng)然你也可以直接在小程序端直接操作數(shù)據(jù)庫。

這里需要兩個(gè)接口,一個(gè)用于查詢文章數(shù)據(jù),代碼如下:

// 云函數(shù)入口文件

const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()
const _ = db.command

// 根據(jù)文章Id集合批量查詢統(tǒng)計(jì)數(shù)據(jù)
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 []
  }
}

另一個(gè)用于新增或者更新文章統(tǒng)計(jì)數(shù)據(jù),由于可能第一次訪問,集合中不存在該文章ID的數(shù)據(jù),所以加了一段默認(rèn)新增的動(dòng)作,代碼如下:

// 云函數(shù)入口文件

const cloud = require('wx-server-sdk')

cloud.init()

const db = cloud.database()

// 更新文章統(tǒng)計(jì)數(shù)據(jù),沒有則默認(rèn)初始化一筆
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,//評(píng)論數(shù)
          like_count: posts.data[0]['like_count'] + event.like_count//點(diǎn)贊數(shù)
        }
      })
    }
    else {
      //默認(rèn)初始化一筆數(shù)據(jù)
      await db.collection('posts_statistics').add({
        data: {
          post_id: event.post_id,//文章id
          view_count: 100 + Math.floor(Math.random() * 40),//瀏覽量
          comment_count: 0,//評(píng)論數(shù)
          like_count: 10 + Math.floor(Math.random() * 40)//點(diǎn)贊數(shù)
        }
      })
    }
    return true
  } catch (e) {
    console.error(e)
    return false
  }
}

小程序端接入

數(shù)據(jù)庫的操作編寫完成之后,小程序端就可以接入了,在列表頁增加對(duì)應(yīng)的UI及樣式:

 

對(duì)應(yīng)的代碼也比較簡單,在獲取到文章信息之后,再調(diào)用下查詢的云函數(shù),獲取到對(duì)應(yīng)文章的統(tǒng)計(jì)數(shù)據(jù)渲染到頁面,核心代碼如下:

//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時(shí)
//瀏覽數(shù)+1不需要知道調(diào)用結(jié)果,失敗了不影響
wx.cloud.callFunction({
  name: 'upsert_posts_statistics',
  data: {
    post_id:blogId,
    view_count:1,
    comment_count:0,
    like_count:0
  }
})

//js部分-展示統(tǒng)計(jì)數(shù)據(jù)時(shí)
wx.cloud.callFunction({
  name: 'get_posts_statistics',
  data: {
    post_ids: postIds
  }
}).then(res => {
  //訪問數(shù)
  post.view_count = res.result[0].view_count;
  //點(diǎn)評(píng)數(shù)
  post.comment_count = res.result[0].comment_count;
  //點(diǎn)贊數(shù)
  post.like_count = res.result[0].like_count;

  this.setData({
    post: post
  });

到這里,文章瀏覽量的統(tǒng)計(jì)接入基本就完成啦。

總結(jié)

目前還在開發(fā)評(píng)論功能,同時(shí)在開發(fā)的時(shí)候發(fā)現(xiàn)第一版的代碼寫的還是挺亂的,在開發(fā)新功能的同時(shí)也準(zhǔn)備重構(gòu)一下,有興趣的小伙伴可以參考一下。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24845.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢