云开发山楂岛留言小程序带审核实现教程及源码

山楂岛留言小程序之前也是火了一段时间，经常在抖音上出现，吸引流量无数，但是人红是非多，小程序也是很快被举报用户攻陷，惨遭下架。

博主对这款小程序也是慕名已久，虽然本身在运营着一款树洞留言小程序，但是热度和体量都是比不过山楂岛的，于是博主根据其功能开发了一款二次进阶带审核的山楂岛留言小程序，打算将其加入到树洞留言小程序矩阵当中。

下面博主就给大家介绍一下小程序功能上的代码实现以及我制作的页面，代码和界面有些简陋，各路大神多多担待。

先来看首页哈，首页是包含了三个功能，查看留言，审核页面和写留言页面跳转功能，很好理解，页面跳转不必介绍，下面主要介绍查看留言的实现。

wxml代码如下

<view class="bg-white" style="margin: 40rpx 30rpx; box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;padding: 20rpx 30rpx;"><view class="cu-form-group" style="border-bottom: 1rpx solid orange;"><label for="" class="title text-orange">你的名字</label><input type="text" class="ml40 flex1" placeholder="请输入你的名字或暗号" bindinput="GetSearchInput"></input></view><view class="cu-btn A  bg-orange light text-xl  "  style="margin: 20rpx 0rpx;" bindtap="ToSearch">查留言</view><view class="cu-btn A  bg-orange light text-xl  "  style="margin: 20rpx 0rpx;" bindtap="xie">写留言</view>
</view>
<view class="cu-btn A  bg-orange light text-xl  "  style="margin: 20rpx 30rpx;" bindtap="guanli" wx:if="{{admin}}">审核</view><view wx:if="{{xinxi!=''}}" class="bg-white" style="margin: 40rpx 30rpx; box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;padding: 20rpx 30rpx;"><view class="text-orange" style="padding: 15rpx 0rpx;border-bottom: 1rpx solid orange;">给你的留言</view><view wx:for="{{xinxi}}" class="text-lg" style="padding: 20rpx 2rpx;border-bottom: 1rpx solid orange;" data-id="{{item._id}}" bindtap="xiangqing"><view style="display: flex;align-items: center;justify-content: space-between;"><view class="text-purple">署名：{{item.shuming}}</view><view class="text-gray">{{tools.getDateTime(item.time)}}</view>    </view>  <view class="text-black duohang" style="margin: 20rpx 0rpx;">{{item.neirong}}</view></view>
</view>

js代码如下

Page({data: {xinxi:[],search: '',},guanli(){wx.navigateTo({url: '../shen/shen',})},xie(){wx.navigateTo({url: '../xie/xie',})},onLoad() {},GetSearchInput: function(e) {this.setData({search: e.detail.value})},ToSearch: function(e) {if(this.data.search == '') {wx.showToast({title: '请输入你的名字或暗号',icon: 'none'})return}db.collection('liuyan').where({shenhe:true,anhao: this.data.search}).get().then(res => {if(res.data.length != 0) {this.setData({xinxi: res.data})}else {wx.showToast({title: '留言飘走了',icon: 'none'})}})},

很简单的通过where精确条件查找，实现小程序姓名和暗号查找的功能，wxml页面通过判断数组xinxi是否为空，来控制最底下留言版的显示消失。

然后就是下面上传留言功能的实现，这个相对来说很简单，就是一些上传云开发数据库数据，简单的看看官方文档就可以实现

wxml代码如下


<view style="margin: 40rpx 30rpx; box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;padding: 20rpx 30rpx;"><view class="cu-form-group"><label for="" class="title text-orange">好友名字</label><input type="text" class="ml40 flex1" placeholder="请填写好友名字或暗号" bindinput="xuhao"></input></view><view class="cu-form-group"><label for="" class="title text-orange">您的署名</label><input type="text" class="ml40 flex1" placeholder="请填写您的署名" bindinput="dizhi"></input></view><view class="cu-form-group align-start" ><label for="" class="title text-orange">留言内容</label><textarea type="text" class="ml4000 flex1" style="height: 220rpx;" placeholder="请填写留言内容" bindinput="biaoti"></textarea></view><view class="cu-btn A  bg-orange light text-xl  "  style="margin: 20rpx 20rpx;" bindtap="tijiao"> 提交留言</view>
</view>

js代码如下

var db=wx.cloud.database()
var app=getApp()
Page({data: {xuhao: '',biaoti: '',dizhi:'',},onLoad(){this.setData({ID:app.userInfo._id,})},xuhao: function (e) {this.setData({ xuhao: e.detail.value });},biaoti: function (e) {this.setData({ biaoti: e.detail.value });},dizhi: function (e) {this.setData({ dizhi: e.detail.value });},tijiao(){let self = this;if (self.data.xuhao == "" || self.data.xuhao == 'None') {wx.showToast({title: '请填写好友名字或暗号',icon: 'none',duration: 2000})return;}else if (self.data.dizhi == "" || self.data.dizhi == 'None') {wx.showToast({title: '请填写您的署名',icon: 'none',duration: 2000})return;}else if (self.data.biaoti == "" || self.data.biaoti1 == 'None') {wx.showToast({title: '请填写留言内容',icon: 'none',duration: 2000})return;}wx.showModal({title: '提示',content: '确认提交留言',showCancel:true,confirmText:'发布',confirmColor:'#1E90FF',cancelText:'取消',cancelColor:'#000000',success (res) {if (res.confirm) {self.post()
} else if (res.cancel) {console.log('用户点击取消')wx.showToast({title: '取消提交',icon:'none'})}}})},post () {const db = wx.cloud.database({});const cont = db.collection('liuyan');cont.add({data: {look: 0,anhao: this.data.xuhao,neirong: this.data.biaoti,shuming: this.data.dizhi,time:new Date().getTime(),//发布时间}});wx.navigateTo({url:'/pages/tuijian/kan/kan'});},
})

以上两个界面都没有贴wxss代码，可以根据自己的喜好设计一下页面，都很简单，并不复杂。

至于审核功能的实现，在上传的时候配置一个审核字段，通过where判断是否为true，是则可以在查看页面显示，不是则不可以查看。

更多详情代码可以去最下方下载，不是付费的，放心去就可以。

但愿这篇文章能对初学小程序的你有所帮助（大佬不必多说，随随便便就能写出来）

云开发山楂岛树洞留言小程序源码https://download.csdn.net/download/sdqmrj/86403744

云开发山楂岛留言小程序带审核实现教程及源码相关推荐

spring boot开发QQ音乐微信小程序（包含服务端源码）
spring boot+spring mvc+spring整合开发QQ音乐微信小程序(含简单服务端) 项目描述: spring boot+spring mvc+spring代理请求QQ音乐接口获取数据 ...
基于Android开发的音乐播放器小程序带后端（附带学习源码）
实现一个简单的播放器,要求功能有:播放.暂停.停止.退出功能,按停止键会重置封面转角,进度条和播放按钮:按退出键将停止播放并退出程序. 后台播放功能,按手机的返回键和home键都不会停止播放,而是转入 ...
使用Python制作个消灭病毒的小游戏吧（教程含源码）
近年来,电子游戏有了很大的发展.大约十年前,(那时我还不知道自己的名字怎么拼)我最喜欢的手机游戏是"space-impact":我曾经在诺基亚的手机上玩过. 这很容易,也很有趣! ...
基于云开发的答题活动小程序v1.0，开开开源啦
基于云开发的微信答题活动小程序v1.0,开开开源啦!!!这个答题小程序,技术栈是基于云开发的微信原生小程序. 搭建教程系列文章 11月是全国"119"消防宣传月,不少企事业单位会举 ...
PHP开发的仿山楂岛留言程序源码
简介: PHP仿山楂岛留言本源码,最近抖音比较火的山楂岛留言板,用PHP简单的仿了一个,代码比较简单,就一个留言功能,程序简单,小白也可以搭建. 下载方式: lanzou.com/ikhLD01 ...
php仿山楂岛留言本源码
简介: php仿山楂岛留言本源码最近抖音非常火的山楂岛,用php简单的仿了一个.代码简单,就一个留言功能,搭建简单小白也可以搭建,喜欢的朋友可以自行搭建测试云盘下载地址: http://zijie ...
云开发谁是卧底线下小游戏发牌助手微信小程序源码-亲测可用
云开发谁是卧底线下小游戏源码,发牌助手微信小程序源码. "谁是卧底OL"是一个非常有趣,风靡全国的比拼语言表述能力.知识面与想象力的游戏. 谁是卧底OL是一款由开发商北游科技倾力打 ...
微信小程序｜基于小程序+云开发制作一个菜谱小程序
今天吃什么?这是一个让强迫症左右为难的问题,跟随此文基于小程序+云开发制作一个菜谱小程序,根据现有食材一键生成菜谱,省心又省力. 一.小程序 1. 创建小程序
云开发表白墙微信小程序源码
这是一款云开发的表白墙微信小程序特点是云开发, 安装特别的简单首先呢小程序账号开通云开发权限然后把源码上传到微信开发者工具里面然后点击开发者工具软件上面的云开发,然后点击数据库在数据库里面创 ...

云开发山楂岛留言小程序带审核实现教程及源码

云开发山楂岛留言小程序带审核实现教程及源码相关推荐

最新文章

热门文章