小程序云开发初体验——商品总额结算②（day17）

作为程序员，看到别人完成的作品总是让我们会心一笑。我们喜欢谈论新技术、新工具、新编程语言，但是光说不练假把式。对于开发者来说，动手实践才是硬道理。因此，我们决定在这个系列中带领大家完成一个完整的小程序开发项目——从零开始，一步一步开发一个小程序，最后把它发布到微信上。

如果对这个系列感兴趣，请一定要继续关注！我们还会带来更多精彩内容。

在上一篇文章中，我们完成了基本页面的编辑。接下来，我们需要完成js文件中的逻辑代码。基本上包括商品加一减一，以及最后商品的总价格的计算。

1. 商品加一减一

打开pages/index/index.js文件，在onReady()函数中添加以下代码：

// 获取商品加一减一按钮
const addButton = wx.createSelectorQuery().select('#add-button');
const minusButton = wx.createSelectorQuery().select('#minus-button');

// 给商品加一减一按钮添加点击事件
addButton.boundingClientRect().exec(function (res) {
  let y = res[0].height;
  minusButton.boundingClientRect().exec(function (res) {
    let x = res[0].left;
    wx.onTouchMove(function (res) {
      if (res.touches[0].clientX < x && res.touches[0].clientY < y) {
        // 减一
        minusQuantity();
      } else if (res.touches[0].clientX > x && res.touches[0].clientY < y) {
        // 加一
        addQuantity();
      }
    });
  });
});

这段代码的作用是给商品加一减一按钮添加点击事件。当用户点击加一按钮时，会调用addQuantity()函数；当用户点击减一按钮时，会调用minusQuantity()函数。

2. 商品总额计算

接下来，我们需要计算商品的总额。在pages/index/index.js文件中添加以下代码：

// 计算商品总额
function calculateTotalPrice() {
  let totalPrice = 0;
  for (let i = 0; i < data.goodsList.length; i++) {
    totalPrice += data.goodsList[i].quantity * data.goodsList[i].price;
  }
  return totalPrice;
}

这段代码的作用是计算商品的总额。它遍历商品列表，将每个商品的数量乘以其价格，然后累加得到总额。

3. 显示商品总额

最后，我们需要在页面上显示商品的总额。在pages/index/index.js文件中添加以下代码：

// 显示商品总额
setData({
  totalPrice: calculateTotalPrice()
});

这段代码的作用是在页面上显示商品的总额。它调用calculateTotalPrice()函数计算商品的总额，然后将总额赋值给data.totalPrice。

至此，我们就完成了商品加一减一以及商品总额计算的功能。在下一篇博文中，我们将继续完成购物车结算的功能。

结语

小程序云开发初体验系列博文到此结束。希望大家通过这个系列博文，能够对小程序云开发有更深入的了解。如果您有任何问题或建议，欢迎在评论区留言。