背景
由于我的博客 https://www.bug2048.com/ 是基于开源博客框架 ghost 搭建的, 虽然相较于 wordpress 轻量了很多, 但在功能上远没有 wordpress 丰富, 像基本的网站统计, 文章统计, 点评之类的通通没有.
我的 pc 端博客是通过接入第三方组件来实现的, 但小程序端一直无法实现「需要自己再搭建个服务端」. 但有了云开发之后, 这一切就变得有可能啦.
想了解我的博客搭建和小程序版博客可以参考下面两篇文章:
搭建 Ghost 博客详细教程 (总) https://www.bug2048.com/ghost20180104/
微信小程序版博客 -- 开发汇总总结 (附源码) https://www.bug2048.com/wechat20180503/
统计实现
最想实现的还是统计功能啦, 每篇文章的浏览量, 点评数, 点赞数之类的, 这个应该是比较基本的.
所以利用小程序云开发提供的数据库功能来存储这类数据, 还是很方便可以实现该功能的.
这里先简单说下浏览量的实现.
首先需要改变下文件夹结构, 因为会用到云函数的功能, 所以我将云函数的文件夹和项目文件夹平级, 同时小程序配置文件中新增 cloudfunctionRoot 节点, 用于指向云函数文件夹, 指定完之后文件夹的图标也会默认改变.
截图 1
创建集合
接下来利用云开发的数据库创建一个集合, 用于保存文章的统计数据, 集合的字段如下:
- {
- "_id": W5y6i7orBK9ufeyD // 主键 id
- "comment_count": 0 // 评论数
- "like_count": 14 // 点赞数
- "post_id": 5b3de6b464546644ae0b7eb4 // 文章 id
- "view_count": 113 // 访问数
- }
同时, 最好加上索引, 避免后续集合数据变多而影响查询效率, 通常都是根据文章 id 进行查询:
截图 2
云函数编写
集合创建完之后, 需要编写云函数, 用于操作数据库, 当然你也可以直接在小程序端直接操作数据库.
这里需要两个接口, 一个用于查询文章数据, 代码如下:
- // 云函数入口文件
- 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 及样式:
截图 3
对应的代码也比较简单, 在获取到文章信息之后, 再调用下查询的云函数, 获取到对应文章的统计数据渲染到页面, 核心代码如下:
- //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
- });
到这里, 文章浏览量的统计接入基本就完成啦.
总结
目前还在开发评论功能, 同时在开发的时候发现第一版的代码写的还是挺乱的, 在开发新功能的同时也准备重构一下, 有兴趣的小伙伴可以参考一下.
来源: http://www.jianshu.com/p/efdd888afc31