サンザシ島のメッセージ ミニ プログラムも一時期人気があり、Douyin に頻繁に表示され、数え切れないほどのトラフィックを集めていましたが、人気が高かったため、ミニプログラムは報告ユーザーによってすぐにハッキングされ、店頭から撤去されました。
ブロガーは以前からこの小さなプログラムに惹かれており、小さな木の穴のメッセージ プログラムを実行していますが、人気とボリュームがホーソーン島に匹敵しないため、ブロガーはその機能をベースにした二次プログラムを開発しました。レビュー付きアプレットは、ツリー ホール メッセージ アプレット マトリックスに追加される予定です。
以下のブロガーさんがアプレットの機能実装コードと私が作ったページを紹介します コードとインターフェースは少々雑ですが各界の達人が丁寧に仕上げます。
まずはホームページを見てみますと、ホームページには「メッセージ閲覧」「レビューページ」「メッセージ書き込みページジャンプ」の3つの機能があります。
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'});
},
})上記 2 つのインターフェイスには wxss コードが掲載されていません。自分の好みに応じてページをデザインできます。非常にシンプルで複雑ではありません。
監査機能の実装としては、アップロード時に監査フィールドを設定し、どこで真であるかを判定し、真であれば閲覧ページに表示できる、そうでない場合は閲覧できないようにする。
より詳細なコードは下部からダウンロードできます。有料ではありませんので、お気軽にアクセスしてください。
この記事が、小さなプログラムの初心者に役立つことを願っています（詳しく説明する必要はありません、気軽に書いてください）
クラウド開発サンザシ島の木の穴メッセージ アプレットのソース コード
https://download.csdn.net/download/sdqmrj/86403744