微信小程序跳转页面后获取传递值并以此从云数据库获取数据并渲染
时间: 2024-01-11 12:04:12 浏览: 174
1. 在跳转页面时,需要将传递的参数通过url进行传递。例如:wx.navigateTo({url: '/pages/detail/detail?id=' + id})
2. 在接收页面中,可以通过onLoad事件获取传递的参数。例如:
```javascript
onLoad: function (options) {
var id = options.id;
this.getData(id);
},
```
3. 在getData函数中,可以通过id从云数据库中获取对应的数据。例如:
```javascript
getData: function (id) {
const db = wx.cloud.database();
db.collection('data').doc(id).get({
success: res => {
console.log(res.data);
this.setData({
data: res.data
});
},
fail: err => {
console.error(err);
}
})
},
```
4. 最后,在页面中渲染获取到的数据即可。例如:
```html
<view>标题:{{data.title}}</view>
<view>内容:{{data.content}}</view>
```
完整代码示例:
```javascript
// list页面
onItemClick: function (event) {
var id = event.currentTarget.dataset.id;
wx.navigateTo({
url: '/pages/detail/detail?id=' + id,
})
}
// detail页面
onLoad: function (options) {
var id = options.id;
this.getData(id);
},
getData: function (id) {
const db = wx.cloud.database();
db.collection('data').doc(id).get({
success: res => {
console.log(res.data);
this.setData({
data: res.data
});
},
fail: err => {
console.error(err);
}
})
}
// detail页面wxml
<view>标题:{{data.title}}</view>
<view>内容:{{data.content}}</view>
```
阅读全文