利用雲開發優化博客小程序（一）——瀏覽量統計

最近小程序雲發開的開放讓我又有了更新個人微信小程序版博客的動力。

背景

因爲個人博客是基於開源博客框架ghost搭建的，雖然相較於wordpress輕量了不少，但在功能上遠沒有wordpress豐富，像基本的網站統計，文章統計，點評之類的統統沒有。

個人pc端博客是經過接入第三方組件來實現的，但小程序端一直沒法實現「須要本身再搭建個服務端」。但有了雲開發以後，這一切就變得有可能啦。

想了解個人博客搭建和小程序版博客能夠參考下面兩篇文章：

1. 搭建Ghost 博客詳細教程（總）
2. 微信小程序版博客——開發彙總總結（附源碼）

統計實現

最想實現的仍是統計功能啦，每篇文章的瀏覽量，點評數，點贊數之類的，這個應該是比較基本的。

因此利用小程序雲開發提供的數據庫功能來存儲這類數據，仍是很方即可以實現該功能的。

這裏先簡單說下瀏覽量的實現。

首先須要改變下文件夾結構，由於會用到雲函數的功能，因此我將雲函數的文件夾和項目文件夾平級，同時小程序配置文件中新增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
  });

到這裏，文章瀏覽量的統計接入基本就完成啦。

總結

目前還在開發評論功能，同時在開發的時候發現初版的代碼寫的仍是挺亂的，在開發新功能的同時也準備重構一下，有興趣的小夥伴能夠參考一下。