1.前端數據渲染

<view class="list"><view>{{goodsitem.id}}</view><view>{{goodsitem.name}}</view><view>{{goodsitem.price}}</view><view>{{goodsitem.desc}}</view> </view><view><view><input type="text" bindinput="speak" placeholder="請輸入評論內容"/></view><button bindtap="formsubmit" data-pid="{{zero}}">發布評論</button> </view><view><text style="font-size: 26px;color: brown;">評論</text><view wx:for="{{ data }}" wx:key="index"><view>{{item.speak}}<view wx:for="{{ item.sub }}" wx:key="index" wx:for-item="itemName" style="margin: 20rpx;background-color: bisque;">{{itemName.speak}}</view></view><view><input type="text" bindinput="speak" placeholder="請輸入評論內容"/></view><button bindtap="formsubmit" data-pid="{{item.id}}">發布評論</button></view> </view>

2.js頁面

/*** 頁面的初始數據*/data: {zero:0},/*** 生命周期函數--監聽頁面加載*/onLoad(options) {let that = thislet id = options.idwx.request({url: 'http://www.five.com/index.php/api/goodsitem', //僅為示例，并非真實的接口地址data: {id},header: {'content-type': 'application/json' // 默認值 },success:function(res) {let data = res.data.datalet goodsitem = res.data.goodsitemthat.setData({data:data,goodsitem:goodsitem})}})},speak(c){let speak = c.detail.valuethis.setData({speak:speak})},formsubmit(c){let that = thislet speak = this.data.speaklet pid = c.currentTarget.dataset.pidwx.request({url: 'http://www.five.com/index.php/api/addSpeak', //僅為示例，并非真實的接口地址method:'post',data: {speak:speak,uid:1,wid:wid,pid:pid},header: {'content-type': 'application/json' // 默認值},success (res) {if(res.data.code == 200){let data = res.data.datalet goodsitem = res.data.goodsitemthat.setData({data:data,goodsitem:goodsitem})}}})},

3.API后臺接口

//詳情信息public function goodsitem(){$id = \request()->get('id');$data = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();//調用遞歸方法$data = $this->subTree($data);//查詢詳情數據$goodsitem = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();return json_encode(['code' => 200,'msg' => '查詢成功','data' => $data,'goodsitem' => $goodsitem]);}public function addSpeak(){$data = \request()->all()//評論添加入庫Speak::insert($data);//評論后重新調用詳情信息$id = $data['wid'];$data = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();//調用遞歸方法$data = $this->subTree($data);//查詢詳情數據$goodsitem = \App\Models\Goods::with(['Speak'])->where('id',$id)->first()->toArray();return json_encode(['code' => 200,'msg' => '評論成功','data' => $data,'goodsitem' => $goodsitem]);}public function subTree($data, $pid = 0) {// 返回的結果$arr = [];foreach ($data['speak'] as $val) {// 給定的PID是當前記錄的上級IDif ($pid == $val['pid']) {// 遞歸$val['sub'] = $this->subTree($data,$val['id']);$arr[] = $val;}}return $arr;}

4.沒有樣式

總結

以上是生活随笔為你收集整理的微信小程序——评论功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。