写在前面
本篇文章是微信小程序开发入门的第二十七篇,模拟购买
上篇已经做完了模拟购买的数据库集合“fruit-order”的创建和云函数的开发,这篇文章介绍如何在小程序端调用云函数
小程序端
首先在index.wxml文件,新增购买按钮,同时在index.wxss文件下新增购买按钮的样式,代码如下:
点击事件使用catchtap可以阻止事件冒泡,这样点击购买按钮页面就不会跳转到详情页面了
同时使用data-fruitId="{{item._id}}"
传递一个参数fruitId,等会儿调用云函数的时候要传过去
<view class="fruit_price">
<text class="oriPrice"><text class="qian">¥</text>{{item.oriPrice}}</text>
<text class="curPrice"><text class="qian">¥</text>{{item.curPrice}}</text>
<text class="vipPrice"><text class="qian">¥</text>{{item.vipPrice}} V</text>
<text class="buy_btn" catchtap="onBuy" data-fruitId="{{item._id}}">购买</text>
</view>
// index.wxss
.buy_btn {
font-size: 28rpx;
margin-left: 10rpx;
background-color: rgba(255, 153, 0, 1);
color: #fff;
padding: 0 10rpx;
}
此时页面效果如下:
接下来我们编写onBuy方法,打开文件index.js,新增onBuy方法,新增代码如下:
在onBuy方法调用云函数buy,num参数我们固定传1,fruitId传上面传过来的参数(通过e.currentTarget.dataset获取),userId先不传,因为用户这一块还没有做
onBuy(e) {
wx.cloud.callFunction({
// 云函数名称
name: 'fruit-order',
// 传给云函数的参数
data: {
type: 'buy',
num: 1,
fruitId: e.currentTarget.dataset.fruitid,
userId: ''
},
})
.then(res => {
const {
success,
msg
} = res.result
if (success) {
wx.showToast({
title: msg,
icon: 'success',
duration: 1500
})
} else {
wx.showToast({
title: msg,
icon: 'error',
duration: 1500
})
}
})
.catch(err => {})
},
此时我们点击页面上的“购买”按钮后,就会出现提示:
打开云开发控制器,我们可以看到数据库集合“fruit-order”多了一条记录,同时查看刚刚点击“购买的”水果的记录,可以看到记录的saleNum的值从0变成了1
写在最后
以上就是模拟购买(下)的全部代码