前提條件：創建微信小程序云開發數據表集合，把對應的數據添加到數據庫里
1. 云開發獲取數據庫數據渲染到列表上的方法：
01. js代碼：
const db = wx.cloud.database({}) //連接數據庫
Page({
//生命周期函數--監聽頁面顯示
onShow: function() {
var that=this;
// case【渲染數據】 caselist是數據表，caseda是獲取的數據
db.collection('caselist').get({
success:function(res){
console.log(res.data);
that.setData({
caseda:res.data
})
}
})
}
})
02. wxml代碼：
<view class="case">
<view class="casebox" wx:for="{{caseda}}" >
<navigator url="/pages/content/content-case/content-case?id={{item._id}}">
<image src="{{item.img}}">image>
<text>{{item.title}}text>
navigator>
view>
view>
這樣數據就能渲染到前端列表上了
2. 在app.json中，創建詳情頁文件content-case
{
"pages": [
"pages/index/index",
"pages/content/content-case/content-case"
]
}
3. 云開發獲取數據庫數據渲染到詳情頁上的方法：
01. js代碼：
const db = wx.cloud.database({}) //連接數據庫
Page({
//生命周期函數--監聽頁面加載
////獲取某一指定ID數據，渲染到詳情頁上,caselist為數據表集合
onLoad: function (options) {
console.log(options)
db.collection('caselist').doc(options.id).get({
success: res => {
console.log(res.data)
this.setData({
caselist: res.data
})
}
})
}
})
02. wxml代碼：
<view class="contentca">
<view class="contentca-list" >
<view class="calist-tit"><text>{{caselist.title}}text>view>
<view class="calist-img"><image src="{{caselist.img}}" bindload="imageLoad" data-index="{{ index }}"
style="width:{{ images[index].width }}rpx; height:{{ images[index].height }}rpx;">image>view>
<navigator url="{{caselist.siteurl}}">
<view class="calist-tit"><text style="font-size:28rpx;">{{caselist.siteurl}}text>view>
navigator>
<view class="calist-text"><text>{{caselist.content}}text>view>
view>
view>
這樣數據就能渲染到指定ID前端詳情頁上了。
其他效果如wxss樣式可自行修飾。
掃一掃 加微信咨詢
