小程序开发

利用云开发博客小程序浏览量统计功能实例教程

编辑时间:2019-08-24 15:13  浏览次数:浏览次数
摘要:由于博客是基于开源博客框架ghost搭建的,虽然相较于wordpress轻量了很多,但在功能上远没有wordpress丰富,像基本的网站统计,文章统计,点评之类的都没有。

云开发博客小程序浏览量统计功能由于网页端博客是基于开源博客框架ghost搭建的,虽然相较于wordpress轻量了很多,但在功能上远没有wordpress丰富,像基本的网站统计,文章统计,点评之类的都没有。 pc端博客是通过接入第三方组件来实现的,但小程序端一直无法实现「需要自己再搭建个服务端」。但有了云开发之后,这一切就变得有可能啦。

统计实现
最想实现的还是统计功能啦,每篇文章的 浏览量 , 点评数 , 点赞数 之类的,这个应该是比较基本的。 所以利用小程序云开发提供的数据库功能来存储这类数据,还是很方便可以实现该功能的。 这里先简单说下浏览量的实现。 首先需要改变下文件夹结构,因为会用到云函数的功能,所以我将云函数的文件夹和项目文件夹平级,同时小程序配置文件中新增 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及样式。对应的代码也比较简单,在获取到文章信息之后,再调用下查询的云函数,获取到对应文章的统计数据渲染到页面。到这里,文章浏览量的统计接入基本就完成啦。

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

本文地址:https://www.webbj.cn/operation/xcx1883.html

免责声明:我司网站转载此文,不代表本网的观点和立场。不以盈利为目的,如有侵犯公司或个人权益,请联系QQ:451521464沟通,我司会第一时间删除文章。 思捷智联是北京小程序开发公司,欢迎咨询免费获取思维导图!
推荐阅读
思捷智联

思捷智联是一家2009年成立于北京的IT外包公司,我们致力于为企业提供app软件开发和微信小程序开发服务。公司成立10年来,我们为民政部、方正电子、神州数码、联想控股、壹基金、首钢集团、北京大学、北京师范大学、今麦郎、丰汇租赁、万通控股等上百家企业提供了IT外包服务。我们努力实现每一位客户的托付,为客户创造实在的效益,让您与梦想走得更近。

微信咨询

扫描微信二维码
同市场经理沟通需求

感受专业服务,从来电咨询开始
136-6130-7020