時間：2023-04-21 12:09:01 | 來源：網站運營
時間：2023-04-21 12:09:01 來源：網站運營
云開發(fā)山楂島樹洞留言小程序進階版帶審核機制編寫教程及源碼：山楂島留言小程序之前也是火了一段時間，經常在抖音上出現，吸引流量無數，但是人紅是非多，小程序也是很快被舉報用戶攻陷，慘遭下架。
在線咨詢
<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是否為空，來控制最底下留言版的顯示消失。<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="請?zhí)顚懞糜衙只虬堤?#34; bindinput="xuhao"></input> </view> <view class="cu-form-group"> <label for="" class="title text-orange">您的署名</label> <input type="text" class="ml40 flex1" placeholder="請?zhí)顚懩氖鹈?#34; 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="請?zhí)顚懥粞詢热?#34; 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: '請?zhí)顚懞糜衙只虬堤?#39;, icon: 'none', duration: 2000 }) return; }else if (self.data.dizhi == "" || self.data.dizhi == 'None') { wx.showToast({ title: '請?zhí)顚懩氖鹈?#39;, icon: 'none', duration: 2000 }) return; }else if (self.data.biaoti == "" || self.data.biaoti1 == 'None') { wx.showToast({ title: '請?zhí)顚懥粞詢热?#39;, icon: 'none', duration: 2000 }) return; } wx.showModal({ title: '提示', content: '確認提交留言', showCancel:true, confirmText:'發(fā)布', 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(),//發(fā)布時間 } }); wx.navigateTo({ url:'/pages/tuijian/kan/kan'}); },})以上兩個界面都沒有貼wxss代碼，可以根據自己的喜好設計一下頁面，都很簡單，并不復雜。關鍵詞：機制,審核,編寫,教程,程序,留言
