前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序项目实战-第五篇

小程序项目实战-第五篇

作者头像
全栈开发日记
发布2022-05-13 14:38:43
3600
发布2022-05-13 14:38:43
举报
文章被收录于专栏:全栈开发日记

本篇目录:

1-小程序实现加入购物车操作 2-小程序获取用户收货地址 3-购物车判断是否全选

小程序实现加入购物车操作

① 触发点击事件

访问本地缓存中的购物车数据(数组)。

代码语言:javascript
复制
/*
 获取缓存中的购物车 数组
 由于第一次获取肯定是一个空的字符串,所以给他转化成数组,保证它肯定是数组
*/
let cart=wx.getStorageSync('cart')||[];

② 判断商品是否存在于购物车中

如果在则返回该商品在购物车数组中的索引,如果不存在则返回-1

代码语言:javascript
复制
let index=cart.findIndex(v=>v.goods_id==this.goodsData.goods_id);

③ 对存在或不存在购物车时进行相应的动作

代码语言:javascript
复制
if(index===-1){
  //表示购物车中没有该数据
  this.goodsData.num=1,
  //将该数据放入购物车数组中
  cart.push(this.goodsData) 
}else{
  //表示购物车中已经有了 需要给数量+1
  cart[index].num++;
}

④ 将购物车中的数据重新放入缓存中

无论是否之前存在该商品,都重新放入。

代码语言:javascript
复制
//将购物车数组重新放入缓存中
wx.setStorageSync('cart', cart);

⑤ 弹窗提示用户添加购物车成功

代码语言:javascript
复制
//弹窗提示用户添加购物车成功
wx.showToast({
  title: '加入购物成功',
  icon:'success',
  //使用用户1.5s之后才能再次点击页面,防止恶意
  mask:'true'
})

获取用户收货地址

API中微信提供了获取用户收货地址的方法,从2020年9月24日起,获取用户收货地址无需用户授权。

代码语言:javascript
复制
wx.chooseAddress({
  //获取到地址信息
  success: (res) => {
    console.log(res)
  },
})

购物车判断是否全选

业务场景:当购物车有很多商品时,当所有商品都勾选了复选框后,全选框也应该被勾选。以此来提醒用户已经选择了购物车中所有的商品了。

思路:先获取到本地缓存中的购物车数据,判断数组中选中属性是否为true,如果都为true则返回true,将获取到值赋值给data中,然后传递前端页面。

使用一个函数,遍历数组中的属性值,如果有一个属性值是false则返回false。

代码语言:javascript
复制
//计算是否全选
//判断元素中是否有false,只要有一个false就会返回false
//判断数组长度,如果为零直接返回flase
const allChecked=cart.length?cart.every(v=>v.cheked):false;
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-03-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈开发日记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 小程序实现加入购物车操作
  • 获取用户收货地址
  • 购物车判断是否全选
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档