微信小程序云开发从云数据库获取集合('cat')里的数据并把其中两个字段'catname'和'catkind'进行拼接成为多选选项,用户选择并且点击下单按钮添加进云数据库集合'order',这样一个流程的完整代码示例
时间: 2023-06-15 19:04:47 浏览: 178
以下是一个完整的微信小程序云开发从云数据库获取数据并添加数据的示例代码:
1. 创建云开发环境和集合
在微信开发者工具中,进入云开发控制台,创建一个新的云开发环境,然后在该环境下创建两个集合:`cat`和`order`。
2. 获取云数据库实例
在小程序页面中,首先获取云开发数据库实例:
```
const db = wx.cloud.database();
```
3. 从云数据库获取数据
获取`cat`集合中的所有文档,并将其中的`catname`和`catkind`字段拼接成多选选项:
```
db.collection('cat').get({
success: res => {
const options = res.data.map(cat => ({
value: `${cat.catname} - ${cat.catkind}`,
label: `${cat.catname} - ${cat.catkind}`
}));
this.setData({ options });
},
fail: err => {
console.error(err);
}
});
```
4. 添加数据到云数据库
当用户选择多选选项并点击下单按钮时,将选项信息添加到`order`集合中:
```
db.collection('order').add({
data: {
options: this.data.selectedOptions,
createTime: db.serverDate()
},
success: res => {
wx.showToast({
title: '下单成功',
icon: 'success'
});
},
fail: err => {
console.error(err);
}
});
```
完整代码示例:
```
const db = wx.cloud.database();
Page({
data: {
options: [],
selectedOptions: []
},
onLoad: function() {
db.collection('cat').get({
success: res => {
const options = res.data.map(cat => ({
value: `${cat.catname} - ${cat.catkind}`,
label: `${cat.catname} - ${cat.catkind}`
}));
this.setData({ options });
},
fail: err => {
console.error(err);
}
});
},
handleSelectChange: function(e) {
this.setData({ selectedOptions: e.detail.value });
},
handleOrderClick: function() {
db.collection('order').add({
data: {
options: this.data.selectedOptions,
createTime: db.serverDate()
},
success: res => {
wx.showToast({
title: '下单成功',
icon: 'success'
});
},
fail: err => {
console.error(err);
}
});
}
});
```
阅读全文