写在前面

本篇文章是微信小程序开发入门的第二十七篇，模拟购买

上篇已经做完了模拟购买的数据库集合“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

写在最后

以上就是模拟购买（下）的全部代码