The Hawthorn Island Message Mini Program was also popular for a while before, and it often appeared on Douyin, attracting countless traffic, but it was very popular, and the Mini Program was quickly hacked by reporting users and was taken off the shelves.
The blogger has been attracted to this small program for a long time. Although he is operating a small tree hole message program, the popularity and volume are not comparable to Hawthorn Island, so the blogger developed a secondary program based on its functions. The advanced Hawthorn Island message applet with review is planned to be added to the tree hole message applet matrix.
The following blogger will introduce to you the code implementation of the function of the applet and the page I made. The code and interface are a bit crude, and the masters from all walks of life will take care of them.
Let’s take a look at the homepage first. The homepage includes three functions, the functions of viewing messages, reviewing pages, and writing message page jump functions. It is easy to understand. The page jumping does not need to be introduced.
The wxml code is as follows
<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>The js code is as follows
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'
})
}
})
},
It is very simple to search by precise conditions of where to realize the function of searching for the name and password of the applet. The wxml page controls the display and disappearance of the bottom message board by judging whether the array xinxi is empty.
Then there is the implementation of the function of uploading messages below, which is relatively simple, that is, uploading some cloud development database data, simply looking at the official documents can be realized
The wxml code is as follows
<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>
The js code is as follows
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'});
},
})The above two interfaces do not have wxss code posted, you can design the page according to your own preferences, it is very simple and not complicated.
As for the implementation of the audit function, configure an audit field when uploading, and judge whether it is true by where. If it is true, it can be displayed on the viewing page, and if it is not, it cannot be viewed.
More detailed codes can be downloaded at the bottom, it is not paid, so feel free to go.
I hope this article can help you who are beginners in small programs (you don’t need to say more, you can write it casually)
https://download.csdn.net/download/sdqmrj/86403744