前提条件：创建微信小程序云开发数据表集合，把对应的数据添加到数据库里
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样式可自行修饰。
