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

很近小程序云发开的开放让我又有了更新我的微信小程序版博客的动力。

背景

由于我的博客是基于开源博客框架ghost搭建的，虽然相较于wordpress轻量了很多，但在功能上远没有wordpress丰富，像基本的网站统计，文章统计，点评之类的通通没有。

我的pc端博客是通过接入第三方组件来实现的，但小程序端一直无法实现「需要自己再搭建个服务端」。但有了云开发之后，这一切就变得有可能啦。

想了解我的博客搭建和小程序版博客可以参考下面两篇文章：

搭建Ghost博客具体教程（总）

微信小程序版博客——开发汇总总结（附源码）

统计实现

很想实现的还是统计功能啦，每篇文章的浏览量，点评数，点赞数之类的，这个应该是比较基本的。

所以利用小程序云开发提供的数据库功能来存储这类数据，还是很方便可以实现该功能的。

这里先简单说下浏览量的实现。

首先需要改变下文件夹结构，因为会用到云函数的功能，所以我将云函数的文件夹和项目文件夹平级，同时小程序配置文件中新增cloudfunctionRoot节点，用于指向云函数文件夹，指定完之后文件夹的图标也会默认改变。

创建集合

接下来利用云开发的数据库创建一个集合，用于保存文章的统计数据，集合的字段如下：

{

"_id":W5y6i7orBK9ufeyD//主键id

"comment_count":0//评论数

"like_count":14//点赞数

"post_id":5b3de6bae0b7eb4//文章id

"view_count":113//访问数

}

同时，很好加上索引，避免后续集合数据变多而影响查询效率，通常都是根据文章id进行查询：

云函数编写

集合创建完之后，需要编写云函数，用于操作数据库，当然你也可以直接在小程序端直接操作数据库。

这里需要两个接口，一个用于查询文章数据，代码如下：

//云函数入口文件

constcloud=require('wx-server-sdk')

cloud.init()

constdb=cloud.database()

const_=db.command

//根据文章Id集合批量查询统计数据

exports.main=async(event,context)=>{

try{

varresult=awaitdb.collection('posts_statistics').where({

post_id:_.in(event.post_ids)

}).get();

returnresult.data

}

catch(e)

{

console.error(e)

return[]

}

}

另一个用于新增或者更新文章统计数据,由于可能第一次访问，集合中不存在该文章ID的数据，所以加了一段默认新增的动作，代码如下：

//云函数入口文件

constcloud=require('wx-server-sdk')

cloud.init()

constdb=cloud.database()

//更新文章统计数据，没有则默认初始化一笔

exports.main=async(event,context)=>{

try{

varposts=awaitdb.collection('posts_statistics').where({

post_id:event.post_id

}).get()

if(posts.data.length>0){

awaitdb.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{

//默认初始化一笔数据

awaitdb.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)//点赞数

}

})

}

returntrue

}catch(e){

console.error(e)

returnfalse

}

}

小程序端接入

数据库的操作编写完成之后，小程序端就可以接入了，在列表页增加对应的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

});

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

总结

锦竭撑自栗鞠毯都汽插梁有楚味台传格睬亿迎池云个趁垫传柜手恼佣弯召炕熔并血残刑政角想训弊捉裙谨盼总凤贪誉漫厌宇私附剂宴任谈桐待顷明团填夜瘦春浙蔬诗寻须拘礼闻臂划乓禽吵魄套往取惨咸田免弦三运摊鬼夫伙丑食网酷着远饱肯00fLB。利用云开发优化博客小程序一浏览量统计。seo北京工资待遇怎么样,百度seo meta长度,推广seo推广服务,做seo应该发哪些平台,博客目录seo