上拉加载下一页数据
业务逻辑
1.用户上滑页面滚动条触底开始加载下一页数据
1.利用滚动条触底事件(onReachBottom)
2.判断还有没有下一页数据
1.获取到总页数 总页数=Math.ceil(总条数 / 页容量)
2.获取到当前的页码
3.判断一下当前的页码是否大于总页数,如果大于的话,表示没有下一页数据
2.假如没有下一页数据,弹出一个提示框
3.假如还有下一页数据,来加载下一页数据
1.当前的页码++
2.重新发送请求
3.数据请求回来,要对data中的数组进行拼接而不是全部替换
下拉刷新数据
业务逻辑
1.触发下拉刷新事件,需要在页面的json文件中开启一个配置项
找到触发下拉刷新事件
2.重置数据和数组
3.重置页码设置为1
4.重新发送请求
5.数据发送请求回来需要手动关闭等待效果
加入购物车
1.先绑定点击事件
2.获取缓存中的购物车数据,数组格式
3.先判断当前的商品是否已经存在于购物车中
4.已经存在,修改商品数据,执行购物车数量++,重新把购物车数据填充回缓存中
5.不存在购物车的数据中,直接给购物车数组添加一个新元素,新元素带上购买数量属性,重新把购物车数组填充回缓存中
6.弹出提示
购物车
一、获取用户的收货地址
1.绑定点击事件
2.获取用户对小程序所授予获取地址的权限状态scope
1.假设用户点击获取收货地址的提示框确定 authSetting scope.address scope值为true,直接调用获取收货地址
2.假设用户从来没有调用过收货地址的api,scope undefined 直接调用获取收获地址
3.假设用户点击获取收货地址的提示框 取消 scope值为false
1.诱导用户自己打开授权设置页面(wx.openSetting)当用户重新给与获取地址权限的时候
2.获取收货地址
4.把获取到的收货地址存入到本地存储中
二、页面加载完毕
1.onLoad onShow
2.获取本地存储中的地址数据
3.把数据设置给data中的一个变量
三、onShow
1.回到了商品详情页面,第一次添加商品的时候手动添加了属性
1.num=1
2.checked=true
2.获取缓存中的购物车数组
3.把购物车数据填充到data中
四、全选的实现,数据展示
1.onShow获取缓存中的购物车数组
2.根据购物车中的商品数据,所有的商品都被选中 checked=true 全选就被选中
五、总价格和总数量
1.都需要商品被选中,我们才能拿它们来计算
2.获取购物车数组
3.遍历
4.判断商品是否被选中
5.总价格 +=商品单价*商品数量
6.把计算后的价格和数量设置回data即可
六、商品的选中
1.绑定change事件
2.获取被修改的的商品对象
3.商品对象的选中状态取反
4.重新填充回data中和缓存中
5.重新计算全选。总价格 总数量
七、全选和反选
1.全选复选框绑定事件change
2.获取data中的全选变量 allChecked
3.直接取反 allChecked=!allChecked
4.遍历购物车数组让里面的商品选中状态跟随allChecked改变而改变
5.把购物车数组和allChecked重新设置回data,把购物车重新设置回缓存中
八、商品数量的编辑
1.“+” “-” 按钮绑定一同一个点击事件区分的关键是自定义属性
1.“+” “+1”
2.“-” “-1”
2.传递被点击的商品id goods_id
3.获取data中的购物车数组来获取需要被修改的商品对象
4.当购物车的数量=1 同时用户点击 “-”,弹框提示(showModal)询问用户是否要删除
1.确定 直接执行删除
2.取消 什么也不做
5.把cart数组重新设置回缓存中和data中 this. setCart
九、点击结算
1.判断有没有收货地址信息
2.判断用户有没有选购商品
3.经过以上验证跳转到支付页面!
支付功能实现
一、页面加载的时候
从缓存中获取购物车的数据渲染到页面中,这些数据checked=true
二、微信支付
1.那些人 那些账号 可以实现微信支付
1.企业账号
2.企业账号的小程序后台中必须给开发者添加白名单
1.一个appid可以同时绑定多个开发者
2.这些开发者就可以公用这个appid和它的开发权限
三、支付按钮
1.先判断缓存中有没有token
2.没有 就跳转授权页面进行获取token
3.有token往下执行
4.创建订单,获取订单编号
5.准备预支付
6.发起微信支付
7.查询订单状态
8.已经完成了微信支付
9.手动删除缓存中已经被选中的商品
10.在跳转页面