1.view层,设置两个input,一个button,需要注意微信小程序与HTML中input不同。
<view>
输入商品名称:
<input bindinput="getName" value="{{name}}"></input>
输入商品价格:
<input bindinput="getPrice" value='{{price}}'></input>
<button bindtap="addGood" type="primary">添加商品</button>
</view>
绑定了键盘输入事件:getName getPrice,捕获键盘输入内容。value值得增加是为了后面增加完成记录后,清除input里面内容。
button中绑定事件addGood,实现记录添加。
2.三个事件的处理代码
(1)先将存储数据name,price定义到data中,(原视频中将这两个变量定义为公共变量)这样便于后面数据清理。
data: {
list:[],
name:'',
price:0
},
(2)通过键盘事件e.detail.value读取input中输入的值,并赋予 页面data中,name 和price,price为数值型数据,通过Numver()强制转换
/**
* 获取输入商品名称
*/
getName(e){
this.name=e.detail.value
},
/**
* 获取输入商品价格
*/
getPrice(e){
this.price = Number(e.detail.value)
},
(3)添加记录事件addGood中,先验证数据,后通过add添加数据。清空输入框,并刷新列表
addGood(){
if (this.name==''){//验证姓名是否为空
wx.showToast({
title:'姓名为空',
icon:'none'
})
} else if(this.price==0){//验证价格是否为空
wx.showToast({
title:'价格为空!',
icon:'none'
})
}else{//向库goods添加商品名称和价格
wx.cloud.database().collection('goods')
.add(
{
data:{
name:this.name,//商品名称
price:this.price//商品价格
}
}
)
.then(res=>{
console.log('添加数据成功!',res)
})
.catch(err=>{
console.log('添加数据失败',err)
})
//刷新页面列表
this.clearInput()//清空输入框数据
this.getlist()
}
(4)清空输入框内容用setData使得他们值为空
* 清空输入框内容
*/
clearInput(){
this.setData({
name:'',
price:0
})
},