wxapp

  • 前言

    以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能。

    需求

    image

    先来弄清楚购物车的需求。

    • 单选、全选和取消,而且会随着选中的商品计算出总价
    • 单个商品购买数量的增加和减少
    • 删除商品。当购物车为空时,页面会变为空购物车的布局

    根据设计图,我们可以先实现静态页面。接下来,再看看一个购物车需要什么样的数据。

    • 首先是一个商品列表(carts),列表里的单品需要:商品图(image),商品名(title),单价(price),数量(num),是否选中(selected),商品id(id)
    • 然后左下角的全选,