我的博客小程序

导语

一直对小程序很感兴趣，之前就准备做一款自己的小程序，无奈还需要购买云服务器和部署后台，有点麻烦，自从知道有了云开发这个东东，就一鼓作气花了几个周末的时间做了一款自己的博客小程序，如果你也想打造一款自己的博客，那你阅读这篇文章就够啦

本文章节

• 介绍

• 数据库设计

• 评论功能设计

• 项目运行

• 发布注意事项

  一，介绍

  主要功能:文章的发布及浏览，评论，点赞，浏览历史，分类，排行榜，分享，生成海报图

 

效果展示

首页

专题

排行榜

我的页面

文章详情页面

二，数据库设计

数据库主要就7张表，分别为：用户表，分类表，文章表，文章内容表，评论表，点赞表，历史浏览表

三，评论功能设计

以文章评论功能为例，我们来看看代码以及小程序云开发的整个流程

1.实现思路

一开始的实现思路是准备搞两张表，一张评论主表，一张回复评论的子表，后来想着不用这么复杂，其实就用一张表也能实现评论及回复的功能。

2.代码实现

发表评论有三种情况，第一种是评论文章，为一级评论，第二种是评论别人的评论，为二级评论，第三种是回复别人的评论，为三级评论

2.1 如何新增一条评论

结合上面图片，我们再来看看代码，就很清晰了

1. /**
2. * 发布评论
3. */
4. submit() {
5. var comment = this.data.inputData
6. if (comment == '') {
7. wx.showToast({
8. title: '请填写评论',
9. icon: 'none'
10. })
11. } else {
12. console.log("我的评论：" + this.data.inputData)
13. var type = this.data.type;
14. if (type == 1) { // 1是评论别人的评论》二级评论
15. this.replyComment(1)
16. } else if (type == 2) {
17. this.replyComment(2) // 2是回复别人的评论》三级评论
18. } else if (type == 3) { // 3是评论文章》一级评论
19. this.addComment();
20. }
21. }
22. },
23. /**
24. * 新增评论
25. */
26. addComment() {
27. var _this = this;
28. var openid = wx.getStorageSync("openid")
29. wx.showLoading({
30. title: '正在加载...',
31. })
32. var create_date = util.formatTime(new Date());
33. console.log("当前时间为：" + create_date);
34. var timestamp = Date.parse(new Date());
35. timestamp = timestamp / 1000;
36. console.log("当前时间戳为：" + timestamp);
37. // 调用云函数
38. wx.cloud.callFunction({
39. name: 'addComment',
40. data: {
41. //_id: timestamp + _this.data.otherUserInfo._id,
42. id: _this.data.articleDetail._id,
43. _openid: openid,
44. avatarUrl: _this.data.userInfo.avatarUrl,
45. nickName: _this.data.userInfo.nickName,
46. comment: _this.data.inputData,
47. create_date: create_date,
48. flag: 0,
49. article_id: _this.data.articleDetail.article_id,
50. timestamp: timestamp,
51. childComment: [],
52. },
53. success: res => {
54. // res.data 包含该记录的数据
55. console.log("新增评论成功---")
56. wx.showToast({
57. title: '评论提交成功',
59. })
60. wx.navigateBack({
61. delta: 1
62. })
63. },
64. fail: err => {
65. console.error('[云函数]调用失败', err)
66. },
67. complete: res => {
68. wx.hideLoading()
69. }
70. })
71. },
72. /**
73. * 回复评论
74. */
75. replyComment(commentType) {
76. var _this = this;
77. wx.showLoading({
78. title: '正在加载...',
79. })
80. var create_date = util.formatTime(new Date());
81. console.log("当前时间为：" + create_date);
82. var timestamp = Date.parse(new Date());
83. timestamp = timestamp / 1000;
84. wx.cloud.callFunction({
85. name: 'replyComment',
86. data: {
87. id: _this.data.articleDetail._id,
88. _id: _this.data.otherUserInfo._id,
89. avatarUrl: _this.data.userInfo.avatarUrl,
90. nickName: _this.data.userInfo.nickName,
91. openId: _this.data.openid,
92. comment: _this.data.inputData,
93. createDate: create_date,
94. flag: commentType,
95. opposite_avatarUrl: _this.data.otherUserInfo.avatarUrl,
96. opposite_nickName: _this.data.otherUserInfo.nickName,
97. opposite_openId: _this.data.otherUserInfo._openid,
98. timestamp: timestamp,
99. },
100. success: res => {
101. // res.data 包含该记录的数据
102. console.log("回复评论成功---")
103. wx.showToast({
104. title: '回复提交成功',
105. })
106. wx.navigateBack({
107. delta: 1
108. })
109. },
110. fail: err => {
111. console.error('[云函数]调用失败', err)
112. },
113. complete: res => {
114. wx.hideLoading()
115. }
116. })
117. },

下面是新增评论和回复评论的两个云函数，主要用到了async和await这两个函数,让新增和回复函数执行完后我们再更新一下article文章表的评论字段，让其加1，async和await的好处就是可以让函数有序的进行，这里就不多说了

1. // 新增评论云函数
2. const cloud = require('wx-server-sdk')
3. var env = 'hsf-blog-product-xxxxx'; // 正式环境
4. // var env = 'xxxxxxxxxxxxx'; // 测试环境
5. cloud.init({
6. env: env
7. })
8. const db = cloud.database()
9. const _ = db.command
10. exports.main = async(event, context) => {
11. try {
12. let res = await db.collection('comment').add({
13. data: {
14. _openid: event._openid,
15. avatarUrl: event.avatarUrl,
16. nickName: event.nickName,
17. comment: event.comment,
18. create_date: event.create_date,
19. flag: event.flag,
20. article_id: event.article_id,
21. timestamp: event.timestamp,
22. childComment: [],
23. }
24. }).then(res => {
25. return res;
26. })
27. await db.collection('article').doc(event.id).update({
28. data: {
29. comment_count: _.inc(1)
30. }
31. })
32. return res;
33. } catch (e) {
34. console.error(e)
35. }
36. }

1. // 回复评论云函数
2. const cloud = require('wx-server-sdk')
3. var env = 'hsf-blog-product-xxxxx'; // 正式环境
4. // var env = 'xxxxxxxxxxxxxx'; // 测试环境
5. cloud.init({
6. env: env
7. })
8. const db = cloud.database()
9. const _ = db.command
10. exports.main = async(event, context) => {
11. try {
12. let res = await db.collection('comment').doc(event._id).update({
13. data: {
14. childComment: _.push({
15. avatarUrl: event.avatarUrl,
16. nickName: event.nickName,
17. openId: event.openId,
18. comment: event.comment,
19. createDate: event.createDate,
20. flag: event.flag,
21. opposite_avatarUrl: event.opposite_avatarUrl,
22. opposite_nickName: event.opposite_nickName,
23. opposite_openId: event.opposite_openId,
24. timestamp: event.timestamp,
25. })
26. }
27. }).then(res => {
28. return res;
29. })
30. await db.collection('article').doc(event.id).update({
31. data: {
32. comment_count: _.inc(1)
33. }
34. })
35. return res;
36. } catch (e) {
37. console.error(e)
38. }
39. }

2.2 如何显示每一条评论

从数据库取出评论的数据，循环遍历每一条父评论，如果有子回复也一并循环。这里每一条评论的唯一标识是用户的openId,那么我们可以用这个做一些事情，如：可以判断如果是自己的评论是不能回复的。

1. <view class="comment" wx:if="{{commentList.length>0}}">
2. <view class="comment-line">
3. <text class="comment-text">评论交流</text>
4. <view class="bottom-line"></view>
5. </view>
6. <block wx:for='{{commentList}}' wx:key='*this' wx:for-item="itemfather">
7. <view class='commentList'>
8. <view class="top-info">
9. <view class='img-name'>
10. <image src="{{itemfather.avatarUrl}}"></image>
11. <label>{{itemfather.nickName}}</label>
12. </view>
13. </view>
14. <view class="father-content">
15. <text class="text">{{itemfather.comment}}</text>
16. <view class="father-reply-time">
17. <text class="create-time">{{itemfather.create_date}}</text>
18. <text class="reply" data-item="{{itemfather}}" bindtap='clickFatherConter' wx:if="{{openid != itemfather._openid}}">回复</text>
19. </view>
20. </view>
21. <view class="children-content">
22. <block wx:for='{{itemfather.childComment}}' wx:key='*this'>
23. <view class='childComment'>
24. <view class="child-img-name">
25. <view class="avatar-name">
26. <image src="{{item.avatarUrl}}"></image>
27. <text class='nickName'>{{item.nickName}}</text>
28. </view>
29. </view>
30. <view class="child-comment" wx:if="{{item.flag==2 }}">
31. <text class='huifu'>回复</text>
32. <text class='opposite-nickName'>{{item.opposite_nickName}}</text>
33. <text class='comment-text'>{{item.comment}}</text>
34. </view>
35. <view class="child-comment" wx:if="{{item.flag==1}}">
36. <text class='comment-text'>{{item.comment}}</text>
37. </view>
38. <view class="child-reply-time">
39. <text class="child-create-time">{{item.createDate}}</text>
40. <text class="reply" data-item="{{item}}" data-id="{{itemfather._id}}" bindtap='clickChildrenConter' wx:if="{{openid != item.openId}}">回复</text>
41. </view>
42. </view>
43. </block>
44. </view>
45. </view>
46. </block>
47. </view>

四，项目运行

1. 下载源码

在github上将代码下载到本地https://github.com/husanfeng/hsf_blog.git

2. 环境准备

1.下载小程序开发工具
2.注册appid
3.使用小程序开发工具导入下载的代码，填入自己注册的AppID

3. 云开发准备

1.开通云开发功能

2.创建测试环境和生产环境

4. 修改环境ID

1.修改app.js中的环境ID为自己的环境ID

2.修改所有云函数中的环境ID为自己的环境ID

5. 云函数部署

1.右键云函数目录，点击在终端中打开，执行npm install，
2.右键执行上传并部署：所有文件

6. 构建npm

1.勾选使用npm模块

2.点击顶部功能栏，执行构建npm

7. 执行编译

五，发布注意事项

小程序现在审核也是越来越严谨了，为了不让大家在审核道路上走弯路，我把我的一些经验分享给大家

1.在微信公众平台上为小程序选择正确恰当的服务类目，例如博客类的小程序就可以选择教育信息服务

2.如果你的小程序需要账号密码登录，提交审核时需要提交一个账号和密码，而且这个账号不能是测试账号，不能出现测试数据

3.提交审核的版本首页需要有数据展示，例如：博客小程序你需要发布一篇或者多篇文章

4.文章内容不能存在敏感内容

5.评论功能审核比较严格了，一旦评论中存在敏感词汇，肯定审核不通过，官方建议调用小程序内容安全API，或使用其他技术、人工审核手段，过滤色情、违法等有害信息，保障发布内容的安全。

来源：https://www.cnblogs.com/husfBK/p/11939733.html