假裝是商品列表
效果展示
index.wxml
<block wx:for="{{dataList}}" wx:key="index">
<view class="itemRoot" bindtap="goDetail" data-item="{{item}}">
<text>{{item.title}}</text>
<text>{{item.desc}}</text>
</view>
</block>
index.js
Page({
data: {
dataList:[]
},
onLoad: function (options) {
wx.cloud.database().collection("homelist")
.get()
.then(res=>{
console.log("獲取成功",res);
this.setData({
dataList:res.data
})
})
.catch(err=>{
console.log("獲取失敗",err);
})
},
//跳轉到詳情頁
goDetail(event){
console.log("點擊獲取的數據",event.currentTarget.dataset.item._id);
wx.navigateTo({
url: '/pages/detail/detail?id='+event.currentTarget.dataset.item._id,
})
}
})
假裝是商品詳情
效果展示
detail.wxml
點贊和收藏主要是綁定點贊和收藏的事件，評論區域獲取pinglun數組里的內容，綁定輸入框的內容，然后綁定發表事件
<view>
<view>{{detail.title}}</view>
<view>{{detail.desc}}</view>
</view>
<!-- 點贊和收藏 -->
<image class="image" src="{{shoucangUrl}}" bindtap="clickShouc"></image>
<image class="image" src="{{dianzanUrl}}" bindtap="clickDianzan"></image>
<!-- 評論 -->
<view class="tip">評論區域</view>
<block wx:for="{{pinglun}}" wx:key="index">
<view class="pinglunItem">
<text>{{item.name}}發表評論：</text>
<text>{{item.content}}</text>
</view>
</block>
<!-- 發表評論 -->
<input class="input" bindinput="getContent" placeholder="請輸入評論的內容" value="{{content}}"></input>
<button type="primary" bindtap="fabiao">發表評論</button>
detail.wxss
.image{
width: 120rpx;
height: 120rpx;
}
.tip{
margin-top: 30rpx;
font-size: 50rpx;
color: goldenrod;
}
.pinglunItem{
border-bottom: 2px solid gainsboro;
margin-left: 50rpx;
margin-top: 30rpx;
}
.input{
border:2px solid gainsboro;
margin-top: 150rpx;
margin-bottom: 60rpx;
}
數據庫展示圖片
detail.js
開頭onload將dianzan與shoucang添加到樣式中，顯示定義變量，然后刷入數據到小程序，收藏切換和點贊切換，在按鈕點擊之后就設置圖片的顯示，然后執行雲函數，雲函數改變雲數據庫里的收藏設置值。設置發表，將內容添加到原有的上。
//傳送給數據庫的
let ID = ''
let shoucang = false
let dianzan = false
Page({
data: {
detail: '',
shoucangUrl: "../../images/shoucang.png",
dianzanUrl: "../../images/dianzan.png",
pinglun:[], //評論數組
content:''
},
//收藏切換
clickShouc() {
//三元運算符方式
this.setData({
shoucangUrl: shoucang ? "../../images/shoucang.png" : "../../images/shoucanghave.png"
})
shoucang = !shoucang
wx.cloud.callFunction({
//調用的雲函數名
name: "detailcaozuo",
data: {
action: "shoucang",
//要上傳的數據，在雲函數的event里
id: ID,
shoucang: shoucang
}
})
.then(res => {
console.log("改變收藏狀態成功", res);
})
.catch(err => {
console.log("改變收藏狀態失敗", err);
})
},
//點贊切換
clickDianzan() {
this.setData({
dianzanUrl: dianzan ? "../../images/dianzan.png" : "../../images/dianzanhave.png"
})
dianzan = !dianzan
//雲函數方式操作
wx.cloud.callFunction({
//調用的雲函數名
name: "detailcaozuo",
data: {
action: "dianzan",
//要上傳的數據，在雲函數的event里
id: ID,
dianzan: dianzan
}
})
.then(res => {
console.log("改變點贊狀態成功", res);
})
.catch(err => {
console.log("改變點贊狀態失敗", err);
})
},
onLoad(options) {
ID = options.id;
console.log("詳情頁接收的id", options.id);
//doc匹配，where匹配
wx.cloud.database().collection("homelist")
.doc(options.id)
.get()
.then(res => {
console.log("詳情頁成功", res);
//將收藏添加到數據庫
shoucang = res.data.shoucang
dianzan = res.data.dianzan
console.log(shoucang, dianzan);
//再次顯示數據
this.setData({
detail: res.data,
shoucangUrl: shoucang ? "../../images/shoucanghave.png" : "../../images/shoucang.png",
dianzanUrl: dianzan ? "../../images/dianzanhave.png" : "../../images/dianzan.png",
pinglun:res.data.pinglun
})
})
.catch(err => {
console.log("詳情頁失敗", err);
})
},
//獲取輸入的值
getContent(event){
this.setData({
content:event.detail.value
})
},
//發表評論
fabiao(){
let content=this.data.content
if(content.length<4){
wx.showToast({
icon:"none",
title: '評論太短了',
})
return
}
let pinglunItem={}
pinglunItem.name="ddd"
pinglunItem.content=content
let pinglunArr=this.data.pinglun
pinglunArr.push(pinglunItem)
console.log("添加后的評論數組",pinglunArr)
wx.showLoading({
title: '發表中',
})
wx.cloud.callFunction({
name:"detailcaozuo",
data:{
action:"fabiao",
id: ID,
pinglun:pinglunArr
}
}).then(res=>{
console.log("發表成功",res);
this.setData({
pinglun:pinglunArr,
content:''
})
wx.hideLoading()
}).catch(err=>{
console.log("發表失敗",err);
wx.hideLoading()
})
}
})
雲函數detailcaozuo.js
data里：前面為數據庫字段，后面為修改之后的值
// 雲函數入口文件
const cloud = require('wx-server-sdk')
//小技巧可以動態改變環境
cloud.init({
env: cloud.DYNAMIC_CURRENT_ENV
})
// 雲函數入口函數
exports.main = async (event, context) => {
if (event.action == 'shoucang') {
//異步操作
return await cloud.database().collection("homelist").doc(event.id)
.update({
data: {
shoucang: event.shoucang
}
})
.then(res => {
console.log("改變收藏狀態", res);
return res
})
.catch(err => {
console.log("改變收藏狀態失敗", err);
return err
})
} else if(event.action=='dianzan'){
//異步操作
return await cloud.database().collection("homelist").doc(event.id)
.update({
data: {
dianzan: event.dianzan
}
})
.then(res => {
console.log("改變點贊狀態成功", res);
return res
})
.catch(err => {
console.log("改變點贊狀態失敗", err);
return err
})
}else if(event.action=='fabiao'){
//異步操作
return await cloud.database().collection("homelist").doc(event.id)
.update({
data: {
// 前面為數據庫字段，后面為修改之后的值
pinglun: event.pinglun
}
})
.then(res => {
console.log("添加評論成功", res);
return res
})
.catch(err => {
console.log("添加評論失敗", err);
return err
})
}
}
