本篇是小程序开发系列的第五篇博客。本篇主要是实现个人档案的模块(填写信息,更新数据库)
页面效果
性别和忌口都是单选,提交的信息会保存到我的数据库的ueser-profile表里面(跟用户的微信头像、微信名放在一起)
如何获取输入值
举个例子,需要获取输入的身高。
在wxml文件里面输入身高的input组件那里绑定inputHeight函数(即bindinput="inputHeight")
inputHeight: function (event) {
var that=this;
that.setData({
height:Number(event.detail.value)//将用户输入的身高放到变量里面
})
},
使用Number(x),如果x是整数,最后会得到整数,如果x是小数,最后得到的是小数,如果x是非数字,最后得到的是NaN。
使用parseInt(x),如果x是整数,最后会得到整数,如果x是小数,最后得到的是整数(即截取x的整数部分),如果x是非数字,最后得到的是NaN。
看个人需要进行使用。
如何更新数据库信息
首先了解一下 云数据库更新操作代码的大致结构
wx.cloud.database().collection(数据表名称)
.where({
... //对某一条记录进行更新
})
//更新数据
.update({
data:{
... //更新的字段和数据
}
})
.then(res =>{
... //更新成功后执行的操作 比如可以用showToast提示用户操作成功
})
而在我的小程序中,用户首次登录时就已经增添过用户的信息记录(已经将用户的微信头像、微信名称存入ueser-profile表里面),因此当用户点击保存按钮时就对对该条记录进行更新,放上身高、体重、性别等等这些新的字段就行。
该create函数绑定在保存按钮组件上,根据放在app.globalData.openid里面的用户的openid来查找ueser-profile表里面有没有用户的记录,对该条记录进行更新,放上userheight(身高),userweight(体重), usersex(性别)等等这些新的字段。
tips:只要是登陆过的用户都会有记录的,每次打开小程序都会第一时间获取用户的openid,并放到app.globalData.openid里面,详细的做法请看本系列的第二篇博客 (68条消息) 【小程序开发之微信登录】_隐隐池玉的博客-优快云博客_小程序 微信登录)
create(){
var that=this;
wx.cloud.database().collection('user-profile').where({//user-profile是数据表的名称
_openid:app.globalData.openid
}).update({
data:{//放上身高、体重、性别等等这些新的字段
userheight:tha