微信小程序实现购物车功能(上)

003--笔记

微信小程序实现购物车功能--逻辑

效果图:

购物车效果图.PNG

逻辑:

01、登录授权( ‘购物车’及‘我的’页面,进入的时候首先要授权,这个根据自己的需求可更改)
     1)、wx.login 获取coed码
     2)、wx.request 向开发者服务器发送code码,并换取token --- 此时后端同时将token存入数据库
     3)、登录成功后,显示购物车页面
02、请求购物车数据,使用wx.request请求。
     1)、获取本地token,如果获取不到,就引导用户去login页面授权
     2)、如果本地有token,就发送请求,请求购物车的数据。每次请求将用户id(token)传向服务器,根据用户id(token)请求响应数据
     3)、从服务器拿到的物品数据data里面,只有物品的信息,我们需要给每个物品的数据中加入自定义属性,来判断当前复选框是否被选中
03、购物车商品数量的加减
     1)、商品数量加:
          1-1)、通过e事件对象获取当前被点击的商品在goodslist中的索引值,
          1-2)、根据索引值去goodslist中更改当前商品的数量num。num++
          1-3)、根据索引值去goodslist中获取商品id,num++的同时,实时发送请求,去更改数据库中的num。(商品数量num是存在数据库中的,因为数量后期会在各个页面之间传递,所以我选择存在数据库中了。)
          1-4)、会触发计算总价的方法
     2)、商品数量减:
          2-1)、同上,
          2-2)、但是要对num<1的情况做处理
          2-3)、会触发计算总价的方法
04、删除商品
     1)、通过e事件对象获取当前被点击的商品在goodslist中的索引值
     2)、根据索引值去goodslist中删除当前商品
     3)、根据索引值去goodslist中获取当前商品id,然后去数据库中删除当前商品
     4)、会触发计算总价的方法
05、单选事件
     1)、会触发计算总价的方法
06、全选事件
     1)、实现物品的全选
当用户通过单选选择了所有物品时,“全选按钮”会自动改变为选中样式;当用户通过“全选按钮”选择所有商品的时候,每个商品都应该是选中状态
     2)、会触发计算总价的方法
07、计算总价
     1)、任何一次触发该函数,都会重新计算价格,将总价变为0,再进行选中项的价格累加,而不是在原总价上累加或减某一个商品的价格

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 前言 以往的购物车,基本都是通过大量的 DOM 操作来实现。微信小程序其实跟 vue.js 的用法非常像,接下来就...
    linshuai阅读 11,332评论 3 18
  • 1、模拟购物车功能 创建store/cart.js export default { state:{ cartl...
    千锋H5阅读 3,175评论 0 1
  • 早上,接到一个陌生电话,原来是武义童话办打来的。 她通知我,我的文章被征用了,把银行卡号发给她,把稿费打过来。 说...
    孤独的小猪89583阅读 254评论 4 2
  • 虚与实,作相对论,再明白不过:虚者,空也,看不见摸不着;实者,充盈饱满,真切实在。 虛幻、虚伪、虚名、虚张声势...
    三峡孬张阅读 340评论 0 3
  • 第七天 一、这个周末,请你花两个小时的时间,给自己本周的觉察营做个总结:本周的情绪起伏变化、本周的对自我的觉察点、...
    豌豆女人阅读 323评论 1 1