微信小程序——编写一个表白墙小程序

一、前期准备

注册微信小程序账号
- 在微信公众平台上注册小程序账号，获取小程序的 AppID。
安装开发工具
- 下载并安装微信开发者工具，用于小程序的开发、调试和预览。

二、界面设计

首页
- 展示最新的表白内容列表，每条表白可以包括发布者昵称、表白内容、发布时间等信息。
- 设计简洁美观的界面风格，使用温馨的色彩和图标。
发布表白页面
- 提供输入框让用户输入表白内容和选择匿名与否。
- 可以设置一些表情图标供用户选择，增加趣味性。
详情页面
- 点击某条表白可以进入详情页面，展示完整的表白内容、发布者信息（如果非匿名）以及评论列表。

三、功能实现

数据存储
- 可以使用小程序的云开发功能，建立数据库来存储表白内容、发布者信息、发布时间等数据。
- 设置数据的权限，确保只有合法用户可以进行操作。
表白发布功能
- 用户在发布表白页面输入内容后，点击发布按钮，将数据提交到数据库。
- 如果选择匿名，存储时不记录发布者的真实身份信息。
表白列表展示
- 在首页通过查询数据库获取表白内容列表，并按照发布时间进行排序展示。
- 可以实现分页加载功能，提高性能。
详情页面功能
- 展示特定表白的详细内容和评论列表。
- 用户可以在该页面发表评论，评论数据也存储到数据库中。
搜索功能（可选）
- 允许用户通过关键词搜索表白内容，提高查找特定表白的效率。

四、测试与优化

功能测试
- 全面测试表白发布、列表展示、详情页面、评论等功能，确保没有漏洞。
性能测试
- 检查小程序的加载速度、响应时间等性能指标，进行优化。
用户体验优化
- 根据用户反馈和实际使用情况，不断优化界面设计和功能操作，提高用户体验。

代码框架：

代码例样：

index.wxml

<!--index.wxml-->
<view class='all-container'><view class="container" bindtouchmove="hiddenComment" ><view class='nav-bar-container'style='background:#FFFFFF;z-index:9999'><view class='nav-bar'><view class='all {{select==1?"selected":""}}' bindtap="selected" data-type="1">最新</view><view class='follow {{select==2?"selected":""}}' bindtap="selected" data-type='2'>今日话题</view><view class='hot {{select==4?"selected":""}}' bindtap="selected" data-type='4'>最热</view></view></view><view class='message-tip' wx:if="{{newMessage}}" bindtap='openMessage'><view class='tip-content'><view>远方飘来{{newMessageNumber}}条新消息</view><view><image src='/image/qiqiu.png'></image></view> </view></view><view class="container-wall"><!-- 今日话题 --><view class='topic-container' wx:if="{{showTopic}}" bindtap='topicdetial' data-id='{{topic.id}}'><view class='topic'><view class='title'><view class='title-world'># 今日最热话题 #</view></view><view class='content'><text style='font-size:28rpx;color:#185abd;'>话题内容：</text></view><view class='content  text-grey'>{{topic.content}}</view><view class='attachments'><view class="attachments-single-image" wx:if='{{topic.attachments.length==1}}'><image mode="aspectFill" class="image-item" wx:for="{{topic.attachments}}" wx:key="{{topic.attachments}}" src="{{item}}" id="{{item}}"id=""></image></view><view class='attachments-more-image' wx:if='{{topic.attachments.length>1}}'><image mode="aspectFill" class="image-item" wx:for="{{topic.attachments}}" wx:key="{{topic.attachments}}" src="{{item}}" id="{{item}}"></image></view></view><view class='footer'><view class='footer-praise' data-id="{{topic.id}}" bindtap='praiseTopic'><image src='/image/topic_praise.png'></image><view> {{topic.praise_number}}</view></view><view class='footer-visit'><image src='/image/topic_view.png'></image><view> {{topic.view_number}}</view></view><view bindtap='openTopic' data-id="{{topic.id}}" class='footer-comment'><image src='/image/topic_comment.png'></image><view> {{topic.comment_number}}</view></view></view></view></view><!-- 话题墙 --><view class="wall-item" wx:for="{{posts}}" wx:key="{{posts}}"  wx:if="{{showTopic && !showposts}}"><view class="item-container"><!-- 头像 --><view class="item-image"><image bindtap='previewImage' id="{{item.poster.avatar}}" src="{{item.poster.avatar}}" wx:if="{{item.private == 0}}"></image><image bindtap='previewImage' src="/image/boy-icon.png" wx:elif="{{item.private == 1 && item.poster.gender == 1}}"></image><image bindtap='previewImage' src="/image/girl-icon.png" wx:else></image></view><view class="item-content"><!-- 昵称 --><view class="user-name"><view wx:if="{{item.private == 0}}"><view class='nickname'>{{item.poster.nickname}}</view></view><view wx:if="{{item.private == 1}}" class='nickname'>树洞</view></view><!-- 表白 --><view class='for-user' wx:if="{{item.topic != '无'}}"><view style='color:#007acc;'># {{item.topic}} #</view></view> <!-- 内容 --><view class="content" wx:if="{{item.content}}" style='color:#2c2c2c;'>{{item.content}}</view><view class="single-image" wx:if='{{item.attachments.length==1}}'><image mode="widthFix" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" src="{{item}}" bindtap='previewImage' id="{{item}}"></image></view><view class='more-image' wx:if='{{item.attachments.length>1}}'><image mode="aspectFill" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" wx:for-item="sitem" src="{{sitem}}" bindtap='previewMoreImage' data-obj="{{item.attachments}}" id="{{sitem}}"></image></view><view class='user-college' wx:if="{{item.show_college}}"><view>{{item.college}}</view></view><!-- 发布时间 --><view class="post-time"><!-- 时间 --><view class='time-and-delete'><view>{{item.created_at}}</view><view class='delete-post' id="{{item.id}}" wx:if="{{item.can_delete}}" bindtap='deletePost'>删除</view></view><view><view class='footer-comment'><!-- 未赞 --><image wx:if='{{!item.haszan}}'data-posteropenid="{{item.posteropenid}}" bindtap='zan' data-dbname='topics'data-index="{{index}}"data-obj_type='topic' data-id="{{item.id}}" data-iszan='false' style='margin-right:30rpx;padding:5rpx;' src='/image/topic_praise.png'></image><!-- 已赞,显示赞的图标，可取消赞 --><image wx:if='{{item.haszan}}'data-posteropenid="{{item.posteropenid}}" bindtap='zan'data-dbname='topics' data-index="{{index}}"data-obj_type='topic' data-id="{{item.id}}" data-iszan='true' style='margin-right:30rpx;padding:5rpx;' src='/image/color-love.png'></image><!-- 评论 --><image src='/image/topic_comment.png' data-target="Modal" data-type='normalcomment' data-refcommenter='' data-objid="{{item.id}}"data-obj_type='topic' data-index="{{index}}"data-dbname='topics'data-posteropenid="{{item.posteropenid}}" bindtap='showCommentInput'></image></view></view></view><view class="comment" wx:if="{{item.praises.length > 0 || item.comments.length > 0}}"><view class="qipao"></view><view class="comment-detail"><!-- 显示点赞信息 --><view class="praise-container" wx:if="{{item.praises.length > 0}}"><view class='praise-content'><image class='praise-user praise-item' src='/image/make_praise.png'></image><view class='praise-item' wx:for="{{item.praises}}" wx:key="{{item.praises}}"><view class='praise-item-sub'><!-- 点赞头像 --><view><image class='praise-user-avatar' src='{{item.avatar}}'></image></view><!-- 点赞名称 --><view class='praise-user-name'>{{item.nickname}}</view></view></view></view></view><!-- 评论列表 --><view class='line' wx:if="{{item.comments.length > 0 && item.praises.length > 0}}"></view><view class='comment-user-wall' wx:if='{{item.comments.length > 0}}'><view class='comment-user-container' wx:for="{{item.comments}}" wx:key="{{item.comments}}" wx:for-item="sub"><view class='comment-wall-item' catchtap="deleteComment" data-item="{{item}}" data-index='{{index}}'data-type='topics'><!-- 正常评论 --><view class='comment-user-container' wx:if="{{!sub.ref_comment.refCommenter}}"><view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='topics' data-objid='{{sub.objId}}' data-obj_type='topic' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">{{sub.commenter.nickname}}:</view><view class='inline-item'>{{sub.content}}</view></view><!-- 带有回复的评论 --><view class='comment-user-container' wx:if="{{sub.ref_comment.refCommenter}}"><view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='topics' data-objid='{{sub.objId}}'data-obj_type='topic' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">{{sub.commenter.nickname}}</view><view class="inline-item">回复</view><view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='topics' data-objid='{{sub.objId}}'data-obj_type='topic' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">{{sub.ref_comment.refCommenter}}:</view><view class='inline-item'>{{sub.content}}</view></view></view></view></view></view></view></view></view></view><!-- 表白墙列表 --><view class="wall-item" wx:for="{{posts}}" wx:key="{{posts}}" wx:if='{{!showTopic &&showposts}}'><view class="item-container" data-id='{{item.id}}'id='{{item.id}}' bindtap="postdetail"><!-- 头像 --><view class="item-image"><image bindtap='previewImage' id="{{item.poster.avatar}}" src="{{item.poster.avatar}}" wx:if="{{item.private == 0}}"></image><image bindtap='previewImage' src="/image/boy-icon.png" wx:elif="{{item.private == 1 && item.poster.gender == 1}}"></image><image bindtap='previewImage' src="/image/girl-icon.png" wx:else></image></view><view class="item-content"><!-- 昵称 --><view class="user-name"><view wx:if="{{item.private == 0}}"><view class='nickname'>{{item.poster.nickname}}</view></view><view wx:if="{{item.private == 1}}" class='nickname'>树洞</view></view><!-- 表白 --><view class='for-user' wx:if="{{item.topic != '无'}}"><view style='color:#007acc;'>表白@{{item.topic}}</view></view><!-- 内容 --><view class="content" wx:if="{{item.content}}" style='color:#2c2c2c;'>{{item.content}}</view><view class="single-image" wx:if='{{item.attachments.length==1}}'><image mode="widthFix" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" src="{{item}}" bindtap='previewImage' id="{{item}}"></image></view><view class='more-image' wx:if='{{item.attachments.length>1}}'><image mode="aspectFill" class="image-item" wx:for="{{item.attachments}}" wx:key="{{item.attachments}}" wx:for-item="sitem" src="{{sitem}}" bindtap='previewMoreImage' data-obj="{{item.attachments}}" id="{{sitem}}"></image></view><view class='user-college' wx:if="{{item.show_college}}"><view>{{item.college}}</view></view><!-- 发布时间 --><view class="post-time"><!-- 时间 --><view class='time-and-delete'><view>{{item.created_at}}</view><view class='delete-post' id="{{item.id}}" wx:if="{{item.can_delete}}" bindtap='deletePost'>删除</view></view><view><view class='footer-comment'><!-- 未赞 --><image wx:if='{{!item.haszan}}' bindtap='zan'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-index="{{index}}"data-obj_type='posts' data-id="{{item.id}}" data-iszan='false' style='margin-right:30rpx;padding:5rpx;' src='/image/topic_praise.png'></image><!-- 已赞,显示赞的图标，可取消赞 --><image wx:if='{{item.haszan}}' bindtap='zan'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-index="{{index}}" data-obj_type='posts' data-id="{{item.id}}" data-iszan='true' style='margin-right:30rpx;padding:5rpx;' src='/image/color-love.png'></image><!-- 评论 --><image src='/image/topic_comment.png' data-posteropenid="{{item.posteropenid}}"data-target="Modal" data-type='normalcomment'data-obj_type='posts' data-refcommenter='' data-objid="{{item.id}}" data-index="{{index}}" data-dbname='posts' bindtap='showCommentInput'></image></view></view></view><view class="comment" wx:if="{{item.praises.length > 0 || item.comments.length > 0}}"><view class="qipao"></view><view class="comment-detail"><!-- 显示点赞信息 --><view class="praise-container" wx:if="{{item.praises.length > 0}}"><view class='praise-content'><image class='praise-user praise-item' src='/image/make_praise.png'></image><view class='praise-item' wx:for="{{item.praises}}" wx:key="{{item.praises}}"><view class='praise-item-sub'><!-- 点赞头像 --><view><image class='praise-user-avatar' src='{{item.avatar}}'></image></view><!-- 点赞名称 --><view class='praise-user-name'>{{item.nickname}}</view></view></view></view></view><!-- 评论 --><view class='line' wx:if="{{item.comments.length > 0 && item.praises.length > 0}}"></view><view class='comment-user-wall' wx:if='{{item.comments.length > 0}}'><view class='comment-user-container' wx:for="{{item.comments}}" wx:key="{{item.comments}}" wx:for-item="sub"><view class='comment-wall-item'catchtap="deleteComment"data-item="{{item}}" data-index='{{index}}'data-type='posts'><!-- 正常评论 --><view class='comment-user-container' wx:if="{{!sub.ref_comment.refCommenter}}"><view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-objid='{{sub.objId}}'data-obj_type='posts' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">{{sub.commenter.nickname}}:</view><view class='inline-item'>{{sub.content}}</view></view><!-- 带有回复的评论 --><view class='comment-user-container' wx:if="{{sub.ref_comment.refCommenter}}"><view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-objid='{{sub.objId}}'data-obj_type='posts' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">{{sub.commenter.nickname}}</view><view class="inline-item">回复</view><view catchtap='showCommentInput'data-posteropenid="{{item.posteropenid}}" data-dbname='posts' data-objid='{{sub.objId}}'data-obj_type='posts' data-target="Modal" data-refcommenter='{{sub.commenter.nickname}}' data-index='' data-type='refcomment' class="comment-user inline-item">{{sub.ref_comment.refCommenter}}:</view><view class='inline-item'>{{sub.content}}</view></view></view></view></view></view></view></view></view></view></view><get-more-loading wx:if="{{showGeMoreLoadin}}"></get-more-loading><not-more wx:if="{{notDataTips && posts.length != 0}}"></not-more></view><!-- 发布表白墙的按钮 --><view class='post-container' wx:if='{{showpostbtn}}'><view class='wall'></view><view class='post'><image src='/image/post.png' data-page='/pages/home/post/post' bindtap='post'></image></view></view><!-- 发布话题的按钮 --><view class='post-container' wx:if='{{!showpostbtn}}'><view class='wall'></view><view class='post'><image src='/image/new-post.png' data-page='/pages/home/postTopic/postTopic' bindtap='post'></image></view></view></view><!-- 评论框 -->
<view class="cu-modal {{modalName=='Modal'?'show':''}}" wx:if="{{showCommentInput}}"><view class="cu-dialog"><view class="cu-bar bg-white justify-end"><view class="content">{{commentInfo.title}}</view><view class="action" bindtap="hideModal"><text class="cuIcon-close text-red"></text></view></view><view class="padding-xl"><textarea wx:if="{{showCommentInput}}" class='bg-red0 shadow-warp text-left padding-sm' bindinput='getCommentContent' placeholder='{{commentInfo.placeholder}}' value='{{content}}'></textarea></view><view class="cu-bar bg-gradual-green"><view class="action margin-0 flex-sub  solid-left text-Abc" bindtap="postComment">{{commentInfo.btn}}</view></view></view>
</view>

index.js

// pages/home/index/index.js
const app = getApp()
const config = require("../../../config.js");
Page({/*** 页面的初始数据*/data: {showselect: false,show_auth: false,userInfo: {},hasUserInfo: false,school: '',praiseBorder: '',notPraiseBorder: '',posts: [],postType: 1,baseImageUrl: app.globalData.imageUrl,show: 0,hidden: false,showCommentInput: false,commentContent: '',commentObjId: '',commentType: '',refcommentId: '',posteropenid: '',filter: '',pageSize: 10,pageNumber: 1,initPageNumber: 1,showGeMoreLoadin: false,currentTime: '',notDataTips: false,newMessage: false,newMessageNumber: 0,select: 1,animationData: {},commentValue: '',showNormal: false,showAudit: false,topic: {content: '',attachments: '',praise_number: '',id: ''},commentInfo: {title: '',placeholder: '',btn: ''},showpostbtn: true,showposts: true,showTopic: false,showSelect: false,showBegin: true,showCancel: false,showReport: false,bindReport: false,showSubmit: false,showSearch: false,tryAgant: false,imageLeft: '',imageRight: '',postImageLeft: '',PostImageRight: '',rate: 0,face: '',conclusion: '',canComment: true,sharecomeIn: false,shareId: '',shareType: '',param: app.globalData.param,messagefunc: Object,zanstatu: []},// showselectshowselect: function() {this.setData({showselect: true})},// 创建新的消息盒子message: function(data) {// 评论、点赞人昵称var nickname = data.nickname// 评论、点赞人头像var avatar = data.avatar// 更新时间var updatetime = app.getnowtime()// 评论、点赞内容var content = data.content// 接收的用户openidvar messageuser = data.messageuser// 当前帖子idvar objId = data.objId// 帖子类型var obj_type = data.obj_type// 更新消息const db = wx.cloud.database()db.collection('message').add({data: {"from_user": {"avatar": avatar,"nickname": nickname},"created_at": updatetime,"content": content,"isread": false,"messageuser": messageuser,"objId": objId,"obj_type": obj_type},success(res) {// console.log('messageres',res)},fail: console.log})},// 获取新的消息盒子提醒newmessage: function() {var that = thisconst db = wx.cloud.database()db.collection('message').orderBy('created_at', 'desc').where({messageuser: app.globalData.userId}).get({success(res) {console.log('newmessage', res)var data = res.data// 未读新消息数,初始化为0var newMessageNumber = 0var list = []for (var i = 0; i < data.length; i++) {// 未读消息if (!data[i].isread) {newMessageNumber = newMessageNumber + 1}// 未读消息id// list.push(data[i]._id)}// 判断是否有新消息if (newMessageNumber > 0) {that.setData({newMessageNumber: newMessageNumber,newMessage: true})}}})},// 进入消息页面openMessage: function() {console.log(app.globalData.userId)var that = thiswx.cloud.callFunction({name: 'Message',data: {id: app.globalData.userId},success: res => {console.log,wx.navigateTo({url: '../../personal/message/message'})that.setData({newMessageNumber: 0,newMessage: false})},fail: console.error})},/*** 生命周期函数--监听页面加载*/onLoad: function(e) {// 判断是否为发表话题跳转回来的if (app.globalData.isposttopic) {this.topics()this.setData({select: 2,showTopic: true,showposts: false})} else {// this.getPost()this.setData({select: 1, showTopic:false,showposts:true})}wx.showLoading({title: '加载中...',});// this.getPost();// 获取新消息提醒,每20秒刷新一次// 刷新消息this.setData({messagefunc: setInterval(function() {that.newmessage()console.log('flash')}, config.FLASHTIME)})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {console.log('onready')app.getParam(res => {let resData = res.data;if (resData.error_code == 0) {this.setData({param: resData.data == 2 ? true : false})app.globalData.param = this.data.param;}})},/*** 生命周期函数--监听页面显示*/onShow: function(option) {console.log('onshow')// 刷新消息var that = this// // 判断是否为发表话题跳转回来的// 判断是否为发表话题跳转回来的if (app.globalData.isposttopic) {this.topics()this.setData({select: 2,showTopic: true,showposts: false})} else{this.getPost()this.setData({select: 1,showTopic: false,showposts: true})}// 清除定时任务clearInterval(this.data.messagefunc)// 刷新消息this.setData({messagefunc: setInterval(function() {that.newmessage()console.log('flash')}, config.FLASHTIME)})},/*** 显示评论输入框*/showCommentInput: function(e) {// console.log('curdataset', e)var objid = e.currentTarget.dataset.objid;var index = e.currentTarget.dataset.indexvar refCommenter = e.currentTarget.dataset.refcommentervar commentType = e.currentTarget.dataset.typevar commentInfo// 帖子类型var obj_type = e.currentTarget.dataset.obj_type// 根据不同的评论，显示不同评论框的提示if (commentType == 'normalcomment') {// 正常的评论commentInfo = this.data.commentInfocommentInfo.title = '请输入评论内容'commentInfo.placeholder = '你对这个帖子有啥看法呢？'commentInfo.btn = '发布评论'} else if (commentType == 'refcomment') {commentInfo = this.data.commentInfolet title = '回复 @' + refCommenterlet placeholder = '你想回复 @' + refCommenter + ' 什么呢？'let btn = '回复 @' + refCommentercommentInfo.title = titlecommentInfo.placeholder = placeholdercommentInfo.btn = btn} else {this.hideModal()}// 显示输入评论// this.showModal()this.setData({commentInfo: commentInfo,refCommenter: e.currentTarget.dataset.refcommenter,modalName: e.currentTarget.dataset.target,dbname: e.currentTarget.dataset.dbname,showCommentInput: true,objId: objid,objIndex: index,// 帖子类型obj_type: obj_type,posteropenid: e.currentTarget.dataset.posteropenid});},// 隐藏评论输入框hideModal: function() {var commentInfo = {title: '',placeholder: '',btn: ''}this.setData({commentInfo: commentInfo,commentContent: '',dbname: '',posteropenid: '',modalName: null,showCommentInput: false})},/*** 获取评论框的输入内容*/getCommentContent: function(event) {let content = event.detail.value;this.setData({commentContent: ''})this.setData({commentContent: content})},/*** 提交评论*/postComment: function(e) {var that = thiswx.showLoading({title: '发送中...',});// 帖子IDlet objId = this.data.objId;let objIndex = this.data.objIndex// 评论人var nickname = app.globalData.userInfo.nickName// 评论内容let content = this.data.commentContent;// 回复评论人let refCommenter = this.data.refCommenter;if (!refCommenter) {refCommenter = ''}// 内容为空，中断评论if (content == '') {wx.showToast({title: '请输入内容！',})wx.hideLoading()return false}// 已有评论let posts = this.data.posts// 如果objIndex为空，则计算出objIndexif (!objIndex) {// console.log('objIndex', objIndex)for (let i = 0; i < posts.length; i++) {// 找到onjIndex,返回indexif (objId === posts[i].id) {objIndex = icontinue;}}}// console.log('objIndex', objIndex)let comments = posts[objIndex].comments// 将当前评论加入到已有评论var newcomment = {"objId": objId,"can_delete": false,"ref_comment": {"refCommenter": refCommenter},"commenter": {"nickname": nickname},"content": content}comments.push(newcomment)// 当前评论数var newcomment_number = comments.length// messagedatavar mesdata = {nickname: nickname,avatar: that.data.userInfo.avatarUrl,content: '@' + nickname + ' 评论你：' + content,messageuser: that.data.posteropenid,objId: objId,obj_type: that.data.obj_type}// 调用云函数，提交评论const db = wx.cloud.database()wx.cloud.callFunction({name: 'FrofessComment',data: {id: objId,dbname: that.data.dbname,newcomment_number: newcomment_number,comments: comments},success: res => {// console.log('评论结果',res)// 发送messagethat.message(mesdata)// 更新页面信息that.setData({posts: posts,commentContent: '',objId: '',obj_type: '',refcommenter: '',modalName: null,showCommentInput: false})wx.hideLoading()},fail: err => {wx.showModal({title: '加载失败...',content: err,})}})},// 删除评论deleteComment: function(e) {var that = this// 帖子类型，话题、表白墙var type = e.currentTarget.dataset.type// 评论位置var index = e.currentTarget.dataset.index// 评论内容var item = e.currentTarget.dataset.item// 帖子IDvar id = item.idvar comments = item.comments// 删除确认wx.showModal({title: '提示',content: '确定删除这条评论吗？',success(res) {if (res.confirm) {// 确定删除comments.splice(index, 1)wx.cloud.callFunction({name: 'FrofessComment',data: {id: id,dbname: type,newcomment_number: comments.length,comments: comments},success: function() {if (type == 'posts'){that.getPost()that.setData({select: 1,showTopic: false,showposts: true})}else if(type == 'topics'){that.topics()that.setData({select: 2,showTopic: true,showposts: false})}},fail: console.log})} else if (res.cancel) {console.log('用户点击取消')}}})},// 赞、取消赞zan: function(e) {// iszan为true,代表已经点赞，可取消赞// iszan为false,代表没有点赞，可以点赞var iszan = e.currentTarget.dataset.iszan// 当前内容的idvar id = e.currentTarget.dataset.id// 当前赞信息var index = e.currentTarget.dataset.indexvar zan = this.data.posts[index].praisesvar dbname = e.currentTarget.dataset.dbname// 接收的用户openidvar posteropenid = e.currentTarget.dataset.posteropenid// 帖子类型var obj_type = e.currentTarget.dataset.obj_type// 修改赞状态this.changezan(id, zan, dbname, index, iszan, posteropenid, obj_type)},changezan: function(id, zan, dbname, index, iszan, posteropenid, obj_type) {var that = thisvar content// iszan == true 已赞，可以取消赞if (iszan === 'true') {// console.log('zan1', zan)var userInfo = wx.getStorageSync('userInfo')var ownernickname = userInfo.nickName// 删除已赞for (let i = 0; i < zan.length; i++) {if (ownernickname == zan[i].nickname) {zan.splice(i, 1);// console.log('zan1',zan)}}// 更新点赞数var newpraise_number = zan.length// console.log(newpraise_number)iszan = false//messagedatacontent = '@' + that.data.userInfo.nickName + ' 取消了赞!'// console.log('zan2',zan)} else {// iszan == false 未赞，可以赞var item = {"id": id,"nickname": that.data.userInfo.nickName,"avatar": that.data.userInfo.avatarUrl}// 添加赞zan.push(item)// console.log('zan', zan)// 更新点赞数var newpraise_number = zan.length// console.log(newpraise_number)//messagedatacontent = '@' + that.data.userInfo.nickName + ' 给你点赞了!'}// messagedatavar mesdata = {nickname: that.data.userInfo.nickName,avatar: that.data.userInfo.avatarUrl,content: content,messageuser: posteropenid,objId: id,obj_type: obj_type}// 调用云函数,点赞wx.cloud.callFunction({name: 'FrofessZan',data: {id: id,dbname: dbname,newpraise_number: newpraise_number,zan: zan},success: res => {// res 是一个对象，其中有 _id 字段标记刚创建的记录的 id// console.log('praise', res)// 发送messagethat.message(mesdata)// 修改本地显示var posts = that.data.postsposts[index].praises = zanposts[index].haszan = iszanthat.setData({posts: posts})},fail: err => {wx.showModal({title: '加载失败...',content: err,})}})},/*** 获取具体类型的贴子*/selected(e) {let objType = e.target.dataset.type;let thisTopic = this.data.topic;// 最新帖子if (objType == 1 && thisTopic != null) {// console.log('new')this.setData({showpostbtn: true,showTopic: false,showposts: true,posts: []});this.getPost();} else {this.setData({showTopic: false,showposts: true});}// 今日话题if (objType == 2 && thisTopic != null) {this.topics();// console.log('topic')this.setData({showpostbtn: false,showTopic: true,showposts: false,posts: []});this.setData({showTopic: true,showposts: true,posts: []});} else {this.setData({showTopic: false});}// 最热帖子if (objType == 4 && thisTopic != null) {this.gethotpost()// console.log('hot')this.setData({showpostbtn: true,showTopic: false,showposts: true,posts: []});} else {this.setData({showTopic: false});}if (objType == 5) {this.setData({showSearch: true,showTopic: false,showposts: true});} else {this.setData({showSearch: false,});}this.setData({select: objType,postType: objType,posts: [],filter: ''})this.setData({pageNumber: this.data.initPageNumber});if (objType != 5) {// this.getPost();}},/**** 获取今日话题*/topics: function() {var that = thisthis.setData({posts: []})wx.showLoading({title: '加载中...',});// 1. 获取数据库引用const db = wx.cloud.database()db.collection('topics').orderBy('praise_number', 'desc').orderBy('comment_number', 'desc').orderBy('updated_at', 'desc').get({success(res) {console.log('res', res)let topic = that.data.topic// 存在话题if (res.data.length > 0) {topic.content = res.data[0].contenttopic.attachments = res.data[0].attachmentstopic.praise_number = res.data[0].praise_numbertopic.view_number = res.data[0].view_numbertopic.comment_number = res.data[0].comment_numbertopic.id = res.data[0]._id} else {// 没有话题topic.content = '没有话题'}// 获取userInfovar userInfo = wx.getStorageSync('userInfo')// 获取自己的openid或昵称var ownernickname = userInfo.nickNamevar owneropenid = app.globalData.userIdlet posts = that.data.posts;if (res.errMsg == "collection.get:ok") {const datalength = res.data.lengthlet itemfor (var i = 0; i < datalength; i++) {// console.log(i, res.data[i])var data = res.data[i]// 获取点赞列表var pariselist = data.parisevar haszan = false// 判断自己是否已点赞if (pariselist.length > 0) {for (var k = 0; k < pariselist.length; k++) {let nickname = pariselist[k].nickname// console.log('nick', nickname)if (nickname === ownernickname) {haszan = true}}}item = {"posteropenid": data._openid,"poster": data.poster,"private": data.private,"id": data._id,"follow": "","topic": data.username,"content": data.content,"attachments": data.attachments,"created_at": data.created_at,"can_delete": "","praises": pariselist,"comments": data.comment,"haszan": haszan}posts.push(item)}that.setData({topic: topic,showTopic: true,showposts: false,userInfo: userInfo,newMessageNumber: 0,posts: posts,showGeMoreLoadin: false})wx.hideLoading();} else {wx.showToast({title: res.errMsg,icon: 'none'});setTimeout(function() {wx.hideLoading();}, 700)}}})},/*** 获取最新贴子*/getPost: function(objType = null) {this.setData({posts: []})wx.showLoading({title: '加载中...',});var that = this// 读取数据// 1. 获取数据库引用const db = wx.cloud.database()db.collection('posts').orderBy('created_at', 'desc').get({success(res) {// 获取userInfovar userInfo = wx.getStorageSync('userInfo')// console.log('nickanme', userInfo)// 获取自己的openid或昵称var ownernickname = userInfo.nickNamevar owneropenid = app.globalData.userIdlet posts = that.data.posts;if (res.errMsg == "collection.get:ok") {const datalength = res.data.lengthlet itemfor (var i = 0; i < datalength; i++) {var data = res.data[i]// 获取点赞列表var pariselist = data.parisevar haszan = false// 判断自己是否已点赞if (pariselist.length > 0) {for (var k = 0; k < pariselist.length; k++) {let nickname = pariselist[k].nickname// console.log('nick', nickname)if (nickname === ownernickname) {haszan = truecontinue;}}}// console.log('zan', haszan)item = {"posteropenid": data._openid,"poster": data.poster,"private": data.private,"id": data._id,"follow": "","topic": data.username,"content": data.content,"attachments": data.attachments,"created_at": data.created_at,"can_delete": "","praises": pariselist,"comments": data.comment,"haszan": haszan}posts.push(item)}that.setData({userInfo: userInfo,newMessageNumber: 0,posts: posts,showGeMoreLoadin: false})wx.hideLoading();} else {wx.showToast({title: res.errMsg,icon: 'none'});setTimeout(function() {wx.hideLoading();}, 700)}}})},// 获取最热帖子gethotpost: function() {this.setData({posts: []})wx.showLoading({title: '加载中...',});var that = this// 读取数据// 1. 获取数据库引用const db = wx.cloud.database()db.collection('posts').orderBy('praise_number', 'desc').orderBy('comment_number', 'desc').get({success(res) {// 获取userInfovar userInfo = wx.getStorageSync('userInfo')// 获取自己的openid或昵称var ownernickname = userInfo.nickNamevar owneropenid = app.globalData.userIdlet posts = that.data.posts;if (res.errMsg == "collection.get:ok") {const datalength = res.data.lengthlet itemfor (var i = 0; i < datalength; i++) {// console.log(i, res.data[i])var data = res.data[i]// 获取点赞列表var pariselist = data.parisevar haszan = false// 判断自己是否已点赞if (pariselist.length > 0) {for (var k = 0; k < pariselist.length; k++) {let nickname = pariselist[k].nickname// console.log('nick', nickname)if (nickname === ownernickname) {haszan = true}}}item = {"posteropenid": data._openid,"poster": data.poster,"private": data.private,"id": data._id,"follow": "","topic": data.username,"content": data.content,"attachments": data.attachments,"created_at": data.created_at,"can_delete": "","praises": pariselist,"comments": data.comment,"haszan": haszan}posts.push(item)}that.setData({userInfo: userInfo,newMessageNumber: 0,posts: posts,showGeMoreLoadin: false})wx.hideLoading();} else {wx.showToast({title: res.errMsg,icon: 'none'});setTimeout(function() {wx.hideLoading();}, 700)}}})},/*** 分享*/onShareAppMessage: function(res) {return {title: 'hi，同学，有人跟你表白了',path: '/pages/home/index/index',imageUrl: 'http://image.kucaroom.com/share1.jpg',success: function(res) {// 转发成功},fail: function(res) {// 转发失败}}},/*** 上拉加载更多*/onReachBottom: function() {this.setData({showGeMoreLoadin: true});this.getPost();},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function() {this.setData({pageNumber: this.data.initPageNumber,posts: []});this.getPost();},/** * 进入发表页面*/post: function(e) {let page = e.currentTarget.dataset.pageconsole.log(e)wx.navigateTo({url: page})},// 查看帖子详情postdetail: function(e) {// console.log(e)// 文章Id// var id = e.currentTarget.dataset.id// wx.navigateTo({//     url: '../../home/post_detail/post_detail?id=' + id,// })},/*** 预览图片*/previewImage: function(event) {let url = event.target.id;wx.previewImage({current: '',urls: [url]})},/*** 预览图片*/previewMoreImage: function(event) {let images = event.currentTarget.dataset.obj.map(item => {return this.data.baseImageUrl + item;});let url = event.target.id;wx.previewImage({current: url,urls: images})},// 话题详情topicdetial: function(e) {var id = e.currentTarget.dataset.idvar view_number = this.data.topic.view_number + 1// 更改view_numberwx.cloud.callFunction({name:'ViewNumber',data:{id:id,dbname:'topics',view_number: view_number},success:res=>{wx.navigateTo({url: '../topic_detail/topic_detail?id=' + id,})},fail:console.log})},/*** 生命周期函数--监听页面隐藏*/onHide: function() {console.log('onhidden')clearInterval(this.data.messagefunc)},/*** 生命周期函数--监听页面卸载*/onUnload: function() {console.log('onunload')},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {},/*** 用户点击右上角分享*/onShareAppMessage: function() {}
})

index.json

{"enablePullDownRefresh": true,"backgroundTextStyle": "dark","usingComponents": {"get-more-loading": "/components/get-more-loading/get-more-loading","not-more": "/components/not-more-tip/not-more-tip"}
}

index.wxss

page{background-color: #F5F5F5;display: flex;flex-direction: column;
}/**FF7256**/.container{width: 100%;display: flex;flex-direction: column;
}.container .container-wall{width: 100%;display: flex;flex-direction: column;justify-content:space-around;background: white;margin-top: 75rpx;
}.container-wall .wall-item{width: 100%;display: flex;flex-direction: row;justify-content: space-around;margin-top: 15rpx;border-bottom-style:solid;border-width:1rpx;border-color: #F0F8FF;
}.wall-item .item-container{width: 95%;display: flex;flex-direction: row;margin-bottom: 5rpx;
}.item-container .item-image{width: 13%;
}.item-container .item-content{width: 84%;display: flex;flex-direction: column;
}.item-image image{width:80rpx;height:80rpx;border-radius: 40rpx;
}.item-content .user-name{display: flex;flex-direction: row;justify-content: space-between;font-size: 35rpx;margin-bottom: 8rpx;margin-top: -5rpx;
}.user-name .follow-icon{display: flex;flex-direction: row;align-items: center;justify-content: center;
}.follow-icon .follow-world{font-size: 25rpx;color: darkgray;
}.user-name .had-follow{display: flex;flex-direction: row;align-items: center;justify-content: center;
}.had-follow .had-follow-world{font-size: 25rpx;color: #FF7F00;
}.for-user{color: darkgray;font-size: 35rpx;
}.item-content .content{font-size: 35rpx;margin-bottom: 10rpx;margin-top: 1rpx;
}.item-content .post-time{font-weight: 100;font-size: 25rpx;color: darkgray;display: flex;flex-direction: row;align-items: center;justify-content: space-between;height: 80rpx;margin-bottom: 25rpx;
}.post-time .time-and-delete{display: flex;flex-direction: row;
}.time-and-delete .delete-post{margin-left: 20rpx;
}.user-college{font-weight: 100;font-size: 25rpx;margin-bottom: -20rpx;color: darkgray;display: flex;flex-direction: row;
}.single-image image{width: 400rpx;
}.more-image{display: flex;flex-direction: row;flex-wrap:wrap;
}.more-image image{width: 180rpx;height: 180rpx;margin-right: 10rpx;margin-bottom: 10rpx;
}.post-time .comment-image{width: 40prx;
}.post-time .comment-container{display: flex;flex-direction: row;align-items: center;margin-bottom: 20rpx;height: 65rpx;
}.comment-icon-container{display: flex;flex-direction: column;justify-content: space-around;align-items: center;
}.comment-container .comment-icon{height: 75rpx;background: #424242;display: flex;flex-direction: row;justify-content: space-around;align-items: center;margin-right: 13rpx;border-radius:7rpx;position: absolute;z-index: 10;right: 85rpx;
}.comment-icon image{width: 50rpx;height: 50rpx;padding: 15rpx 23rpx;
}.item-content .comment{background: WhiteSmoke;margin-bottom: 20rpx;margin-top: -20rpx;
}.comment .qipao{width: 0;height: 0;border-right: 20rpx solid white;border-bottom: 20rpx solid WhiteSmoke;border-left: 20rpx solid white;margin-top: -18rpx;margin-left: 20rpx;
}.comment .comment-detail{margin: 15rpx 15rpx;font-size: 30rpx;display: flex;flex-direction: column;
}.praise-container{display: flex;flex-direction: row;
}.praise-container .praise-content{display: flex;flex-direction: row;flex-wrap:wrap;
}.praise-container .praise-item{display: flex;flex-direction: row;
}.praise-item .praise-item-sub{width: 100%;display: flex;flex-direction: row;
}.praise-container-with-border{display: flex;flex-direction: row;flex-wrap:wrap;
}.line{margin-top: 5rpx;margin-bottom: 10rpx;border-top-style:solid;border-width:1rpx;border-color: #E8E8E8;
}.praise-container-border{display: flex;flex-direction: row;flex-wrap:wrap;margin-bottom: 10rpx;padding-bottom: 10rpx;
}.praise-container .praise-item{display: flex;flex-direction: row;margin-right: 10rpx;margin-top: 5rpx;
}.praise-item .praise-user-avatar{width: 40rpx;height: 40rpx;margin-right: 5rpx;border-radius:20rpx;
}.praise-container .praise-user{width: 42rpx;height: 42rpx;margin-right: 10rpx;
}.comment-detail .comment-user{color: #66CDAA;
}.comment-wall-item{width: 100%;display: flex;flex-direction: column;
}.inline-item{display: inline;
}.comment-user-wall{width: 100%;display: flex;flex-direction: column;
}.comment-wall-item .comment-user-container{display: inline;
}.comment-user-container image{width: 40rpx;height: 40rpx;margin-right: 5rpx;border-radius:20rpx;
}.comment-wall-item .comment-ref-user-container{display: inline;
}.comment-ref-user-container image{width: 40rpx;height: 40rpx;margin-right: 5rpx;border-radius:20rpx;
}/**post css**/.post-container{position:fixed;right:18rpx;bottom:20rpx;z-index:100;width: 120prx;height: 120prx;
}.post-container .wall{position: absolute;z-index: 105;width: 90rpx;height: 90rpx;border-radius: 45rpx;background: white;right: 10rpx;bottom: 30rpx;
}.post image{width: 120rpx;height: 120rpx;position: relative;z-index: 110;
}/** nav-bar **/.nav-bar-container{width: 100%;height: 70rpx;align-items: center;display: flex;flex-direction: row;justify-content: space-around;border-bottom-style:solid;border-width:5rpx;border-color: white;background: white;position: fixed;
}.nav-bar-container .nav-bar{display: flex;flex-direction: row;justify-content: space-between;width: 95%;font-weight: 200;font-size: 35rpx;margin-top: 5rpx;margin-bottom: 5rpx;
}.nav-bar .selected{color: #FF4500;
}.comment-input-container{position:fixed;bottom: 0rpx;z-index:100;width: 100%;height: 200prx;background: WhiteSmoke;display: flex;flex-direction: row;align-items: center;padding-top: 10rpx;
}.comment-input-container textarea{width: 100%;margin-left: 20rpx;border-bottom-style:solid;border-width:1rpx;border-color: #0aecc3;margin-right: 20rpx;padding-bottom: 15rpx;font: 30rpx;font-weight: 200;margin-bottom: 20rpx;padding-top: 17rpx;
}.comment-input-container .send-button{width: 130rpx;height: 70rpx;font-size: 30rpx;background: #0aecc3;color: white;margin-right: 20rpx;display: flex;flex-direction: row;justify-content: space-around;align-items: center;border-radius: 10rpx;
}/** 授权按钮 **/
.auth-container{position: fixed;z-index: 300;width: 100%;height: 100%;background: gray;display: flex;flex-direction: column;justify-content: center;align-items: center;background:rgba(2,2,2,0.6);
}.auth-container .auth-wall{background: white;width: 70%;display: flex;flex-direction: column;align-items: center;border-radius: 15rpx;
}.auth-wall .auth-tips{padding-top: 40rpx;padding-bottom: 40rpx;width: 100%;display: flex;flex-direction: column;align-items: center;color: gray;font-size: 30rpx;
}.auth-tips image{width: 120rpx;height: 120rpx;margin-bottom: 10rpx;
}.auth-button{display: flex;flex-direction: row;justify-content: center;align-items: center;background: #43CD80;width: 100%;color: white;font-size: 35rpx;border-radius: 0rpx;border-bottom-left-radius: 15rpx;border-bottom-right-radius: 15rpx;
}.auth-button .auth-image-container{display: flex;flex-direction: column;
}.auth-button image{width: 50rpx;height: 50rpx;margin-right: 10rpx;
}.power_by{color: #D3D3D3;
}/** 话题样式 **/.topic-container{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;border-top-style:solid;border-bottom-style:solid;border-width:20rpx;border-color: #F5F5F5;
}.topic-single-image image{width: 180rpx;height: 180rpx;
}.topic{width: 95%;display: flex;flex-direction: column;
}.topic .title{width: 100%;display: flex;flex-direction: row;justify-content: center;
}.title .title-world{padding-top: 10rpx;padding-bottom: 10rpx;padding-left: 35rpx;padding-right: 35rpx;margin-top: 20rpx;font-size: 35rpx;background-color: #F5F5F5;color: #7A7A7A;border-radius: 10rpx;
}.attachments-single-image image{width: 300rpx;height: 200rpx;
}.attachments .attachments-more-image{display: flex;flex-direction: row;flex-wrap:wrap;
}.attachments-more-image image{width: 180rpx;height: 180rpx;margin-right: 10rpx;margin-bottom: 10rpx;
}.topic .content{margin-bottom: 15rpx;margin-top: 15rpx;
}.topic .footer{width: 100%;display: flex;flex-direction: row;justify-content:space-between;padding-top: 10rpx;font-size: 30rpx;padding-bottom: 10rpx;
}.footer .footer-praise{display: flex;flex-direction: row;align-items: center;
}.footer .footer-visit{display: flex;flex-direction: row;justify-content: center;align-items: center;
}.footer .footer-comment{display: flex;flex-direction: row;justify-content: center;align-items: center;
}.footer-praise image{width: 40rpx;height: 40rpx;padding-right: 5rpx;
}.footer-visit image{width: 50rpx;height: 50rpx;padding-right: 5rpx;
}.footer-comment image{width: 50rpx;height: 50rpx;padding-right: 5rpx;
}/** 搜索样式 **/
.search-container{width: 100%;display: flex;flex-direction: row;justify-content: space-around;align-items: center;border-top-style:solid;border-bottom-style:solid;border-width:20rpx;border-color: #F5F5F5;
}.search-container .search{width: 95%;display: flex;flex-direction: row;margin-top: 15rpx;margin-bottom: 15rpx;}.search .search-input{background: #E6E6E6;width:85%;height: 75rpx;font-weight: 200;font-size: 30rpx;text-align: center;border-radius:15rpx 0 0 15rpx;
}.search-image{width: 15%;background: #F5F5F5;display: flex;flex-direction: row;justify-content: space-around;align-items: center;border-radius: 0 15rpx 15rpx 0;
}.search-image image{width: 40rpx;height: 40rpx;
}/** 消息盒子样式 **/
.message-tip{width: 100%;display: flex;flex-direction: row;justify-content: center;height: 100rpx;align-items: center;background: white;margin-top: 72rpx;margin-bottom: -67rpx;
}.message-tip .tip-content{padding: 20rpx;background: #575757;color: white;border-radius: 10rpx;font-size: 30rpx;display: flex;flex-direction: row;align-content: center;justify-content: center;
}.tip-content image{width: 35rpx;height: 35rpx;
}.nickname{color: #66CDAA;font-weight: bold;
}

截图展示：