天天看点

小程序购物车功能怎么实现的

1 点击加入购物车

  • 给购物车图标绑定点击事件
  • 获取缓存中的购物车数据 数组格式 没有就给一个空数组
  • 先判断当前商品(用goods_id)是否已存在购物车
  • 已经存在 :执行购物车当前商品数量++ 并重新把购物车数组填充回缓存中
  • 不存在于购物车的数组中 :给购物车数组添加一个新元素 新元素带上购买数量属性num,重新把购物车数组填充回缓存中
  • 弹出提示wx.showToast

2 获取用户的收货地址

1 获取用户的收货地址

1 绑定点击事件

//2 调用小程序内置 api 获取用户的收货地址 wx.chooseAddress=>这样用户在一次取消添加地址后无法修改权限进行下次的添加地址

2 获取 用户对小程序所授予获取地址的权限 wx.getSetting() 判断authSetting下的scope.address状态scope

1 假设 用户 点击获取收货地址的提示框 确定

scope值为ture 直接调用api获取收货地址

2 假设 用户 从来没有调用过 收货地址的api

scope undefind 直接调用api获取收货地址

3 假设 用户 点击获取收获地址的提示框 取消

scope值为false

1 诱导用户 打开授权设置页面 当用户重新给与获取地址权限的时候

2 获取收货地址

3 把地址存进缓存

4 判断当缓存中有地址时显示地址,没有时显示添加地址

3 全选的实现 在数据展示阶段

1 数据的展示在页面构造是就应该完成 选钩子函数onshow

2 checked都选中全选选中 用every遍历cart

4 总价格和总数量和全选 onshow

1 当商品被选中时才进行计算

2 获取购物车数组

3 遍历

4 判断商品是否被选中

5 总价格等于商品单价*商品数量

5 总数量+=商品数量

6 把计算后的价格和数量设置回data里

5 全选和反选

1 全选复选框绑定事件 change

2 获取 data中全选变量allcheck

3 直接取反 allcheck=!allcheck

4 遍历购物车数组,让里面选中状态跟随allcheck改变而改变

5 把购物车里的数组和allcheck重新设置成data 把购物车数组存回缓存中

6 商品的选中

1 绑定change事件

2 获取到被修改的商品对象

3 商品对象的选中状态取反

4 重新填回data中和缓存中

5 重新计算全选。总价格,总数量

7 商品数量的编辑

1 “+” “-“按钮 绑定同一个点击事件 区分的关键 自定义属性 “+”=>”+1”,"-"=>"-1"

2 传递被点击的商品id

3 获取data中的购物车数组 来获取需要被修改的商品对象

4 当购物车的数量=1,用户仍然点击’-'时,弹窗询问用户是否要删除

1 确定时执行删除

2 取消 什么都不做

4 直接修改商品对象的数量num

5 把cart数组重新设置回缓存和data this.setCart

8 点击结算

1 判断有没有收货地址

2 判断购物车有没有选购商品

3 经过以上验证跳转到支付页面