利用云开发优化博客小程序之浏览量统计

背景

由于我的博客是基于开源博客框架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部分
   
     
     
       {{item.view_count}}
     
   
   
     
     
       {{item.comment_count}}
     
   
   
     
     
       {{item.like_count}}
     
   
   
   //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
     });

   到这里，文章浏览量的统计接入基本就完成啦。

   总结

   目前还在开发评论功能，同时在开发的时候发现第一版的代码写的还是挺乱的，在开发新功能的同时也准备重构一下，有兴趣的小伙伴可以参考一下。