微信小程序初学笔记(三)——如何向微信小程序云开发数据库操作之添加记录
向微信小程序云开发数据库操作之添加记录整体上分为三步:
1、前端设计一个form表单,进行数据的填写
2、云开发数据库创建一个存储该form表单的集合
3、微信小程序的js方法中创建一个添加到数据库的方法
接下来我们详细看看每一步的实现:
一、前端设计一个填写数据的form表单
- 在“小程序项目名\miniprogram\pages”目录下创建一个新的page。
- 在新的page中的index.wxml中设计一个form表单如下:
<view class="book-feedback page-center">
<form bindsubmit="onAdd">
<textarea value="{{content}}" bindblur="bindTextAreaBlur" name="content" class="feedback-content" placeholder='欢迎您提供宝贵意见,那将是我前进的动力'></textarea>
<button form-type="submit" class='button button-save'><text class='button-text'>保存</text></button>
</form>
</view>
二、在云数据库中创建一个数据表集合,存放form表单数据
在微信开发者工具中选择“云开发”按钮,打开“云开发控制台”对话框,选择“数据库”选项卡,在左侧的“集合名称”列表右上角点击“+”新建一个集合如“questionInfo”即可。
三、微信小程序的js方法中创建一个添加到数据库的方法
-
重写在新的page中的index.js中onAdd方法
-
获取表单传递的content数据的方法是:
2-1、用onAdd: function (e) {}中的e来承接表单的所有数据
2-2、获取具体的表单中的某个数据如:
在控制台输出content方法是:
console.log("shuchu:" + e.detail.value.content)
data数据集中的赋值:
data:{ content:e.detail.value.content }
具体重写方法如下:
onAdd: function (e) {
wx.showLoading({
title: '正在保存...',
})
console.log("shuchu:" + e.detail.value.content)
const db = wx.cloud.database()
db.collection('questionInfo').add({
data: {
"createdTime": new Date(),
"updateTime": new Date(),
"user": app.globalData.openid,
"_openid": app.globalData.openid,
status: 0,
content: e.detail.value.content
},
success: res => {
// 在返回结果中会包含新创建的记录的 _id
this.setData({
counterId: res._id,
count: 1
})
wx.showToast({
title: '新增记录成功',
})
console.log('[数据库] [新增记录] 成功,记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败:', err)
}
})
},