11-小程序(购物车页面,深度监听购物车数据变化让本地也跟着变化,数组reduce方法算总价总数量,计算属性弄全选状态,数组方法集合)

最新推荐文章于 2024-04-20 13:14:02 发布
最新推荐文章于 2024-04-20 13:14:02 发布
阅读量1.8k 收藏 11
点赞数 1
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tangoneone/article/details/107266534
版权

01.购物车-页面分析

  1. 入口: 点击底部tab菜单购物车时显示购物车页面;商详点击购物车跳转购物车页面
  2. 主要模块
    1. 商品列表
      1. 每一个商品包括选中状态，商品图片，商品名称，商品单价，商品数量
    2. 全选，总价，总数量
  3. 其他说明
    1. 收货地址放在支付页面
    2. 商品列表每一项目可以调整选中状态及数量
    3. 点击结算跳转到支付

02.购物车数据存哪里？（补充 ）

  1. 描述：购物车的数据的改变是发请求还是存本地，还是存Vuex?发请求即可

  2. 对比以上三个方案

    1. 购物车添加商品，刷新页面数据依然在

      1. vuex刷新后就没有

    2. 手机端添加购物车，PC端可以看到添加的商品

      1. 只存本地也不行

    3. 登录前加入购物车，登录后商品在

在这里插入图片描述

注意点：
  1. 实际项目中请求一般在100ms以内

03.购物车-静态页面

  1. copy
  2. iconfont引入
    1. 找到icon，加入购物车，生成新的.css文件
    2. copy内容更新项目里面iconfont.css
    3. 在cart页面使用iconfont

04.商详跳转购物车

  1. 商详购物车点击@click: toCart
  2. 跳转逻辑uni.switchTab
    在这里插入图片描述

05.购物车-接口分析

  1. url : https://www.uinav.com/api/public/v1/goods/goodslist?goods_ids=140,395,291

  2. 参数id以逗号分隔

  3. 返回数据

    [
    {
        商品id，
        商品名称，
        商品价格
        商品图片
    }
]

问题：

  1. 那商品列表里面第一个商品的勾选状态和数量来自哪里呢？
  2. 参数里面goods_ids从哪里来呢？

06.购物车数据结构

商品勾选状态，数量还有goodsId存storage

那么storage购物车的数据结构是什么样的？

  1. 数组
    1. 取值比较麻烦
    2. 有序的
  2. 对象
    1. 取值比较方便
//数组
[
    {
        goodsId:542
        num:99,
        checked:true
        
    },
    ....
]

//对象
{
    542:{
        num:99,
        checked:true
    },
    291:{
        num:88,
        checked:false 
    }
}

07.商详加入购物车

点击商详加入购物车按钮加入购物车

1. 点击@click: addCart
  1. 商品加入购物车
    ​ 1. 把当前商品存储到storage里面
    ​ 1. goodsId就是当前商品的id
    ​ 2. num: 第一次为1，后续++
    ​ 3. checked始终为true
    ​ 2. 步骤
    ​ 1. 取storage
    ​ 2. 更新
    ​ 3. 存storage
注意点：
  1. 商品加入购物车，如果在购物车中去勾选，再添加也勾选状态
  2. 如何区分是第一次，还是非第一次？
    1. 对象 cart[542]
    2. 数组find
      在这里插入图片描述

08.购物车-非首次添加优化

  1. 添加成功购物车提示用户

  2. 非首次添加，商品移到数组最前面
    在这里插入图片描述

  3. findIndx的使用

在这里插入图片描述

注意点：

  1. git stash储藏，相当于是游戏存档

    git stash -u  #保存当前工作区代码，-u包括新增文件
git stash pop #弹出最近一次的储藏

09.购物车-基本渲染

  1. 发请求

    1. 请求参数：取storage cart数组里面每一项的goodsId以逗号分隔拼成字符串

      1. forEach

      2. 方案2,返回一个goodsId的数组，然后join

        let goodsIdArr = cart.map(item=>{
    return item.goodsId
})
let ids = goodsIdArr.join(',')

    2. 什么时机发请求？？

      1. onShow
        1. tabbar页面，后续不会再执行onLoad
      2. 方法名：queryGoodsList

    3. 拿到请求数据，设置给data属性goodsList

    4. 在结构中vfor渲染

10.购物车-渲染选中状态及数量

接口返回的数组并不是按传参goodsId的顺序

  1. 问题：

    1. 应该以cart为主，遍历
    2. 数量渲染：去goodslist里面找一项goodsId为当goodsid相等的那一项的商品名称。在结构写不了

  2. 解决方案

    1. 在请求结束后，把storage cart和goodsList融合在一起，以cart为主，返回一个新的属性

      this.goodsList = this.cart.map(cartItem => {
    // 到_goodsList里面找一项goodsId相等的,组成新的对象
    let targetGoods = _goodsList.find(goodsItem => {
        return goodsItem.goods_id === cartItem.goodsId;
    });
    return {...targetGoods, ...cartItem};
});

    2. 渲染

注意点：
  1. cart添加为this的属性，相当于是全局变量

11.购物车-商品勾选与不勾选

  1. 商品列表的每一项点击时，checked状态取反
    1. 点击@click = toggleCheck
toggleCheck(item){
    item.checked = !item.checked
},

12.购物车-商品跳转商详

点击商品（不包括勾选，还有数量±按钮）跳转商详

  1. 点击@click= toItem
  2. toItem,跳转传参goodsId

补充：

  1. 不包括勾选，还有数量±按钮需要事件阻止冒泡
    1. .stop
  2. uniapp里面navigator跳转用绝对路径

13.购物车-商品数量

  1. 点击+，数量++

    1. 点击@click.stop: addNum

  2. 点击-，数量–

    1. 点击@click.stop: subNum

  3. 如果为1,提示删除goodsList

    this.goodsList.splice(从哪一项开始删除,删除多少项)

14.购物车-全选状态

  1. 所有商品都选中，全选就勾选
    1. 计算属性isAll
    2. 如何判断所有商品都选中呢？
      1. 1.选中的商品数量和数组总长度相等
      2. 2.如果有一个不选中，那么false
      3. 3.所有项都满足指定条件就返回true, 数组方法every
isAll() {
    // 所有商品都选中
    //1.选中的商品数量和数组总长度相等
    // let sum =0
    // this.goodsList.forEach(item=>{
    // 	if(item.checked){
    // 		sum++
    // 	}
    // })
    // return sum ===this.goodsList.length

    //2.如果有一个不选中，那么false
    // for (let item of this.goodsList) {
    // 	if (!item.checked) {
    // 		return false;
    // 	}
    // }
    // return true

    // 3.所有项都满足指定条件就返回true
    return this.goodsList.every(item=>{
        return item.checked
    })
}

15.购物车-全选点击

  1. 点击全选，全选状态切换, 勾选/不勾选

    1. 点击@click: toggleAll

    2. 在isAll的计算属性里面把isAll改变后的值，设置给它的依赖（goodsList每一项的checked）

      set(status){
    // 把isAll改变状态和每个商品状态同步
    this.goodsList.forEach(item=>{
        item.checked= status
    })
}

16.购物车-总价与总数量

  1. 总数量是选中的商品数量之和

    1. 计算属性totalNum

    2. 如何计算

      1. reduce
      return this.goodsList.reduce((sum,item)=>{
    return sum+(item.checked?item.num:0)
},0)

  2. 总价：选中的商品数量*商品价格之和

    1. 计算属性totalPrice
    2. 如何计算
      1. reduce

17.购物车-状态存storage

  1. 现象：在界面上改变（勾选的状态，数量改变），data属性goodsList改变，但并没有改变storage.重新编译后，界面状态没有了。
  2. 解决方案：界面的改变应该同时存到storage
    1. isAll点击，商品勾选点击，数量++，数量–，商品删除都需要更新到storage
    2. watch goodsList即可
// isAll点击，商品勾选点击，数量++，数量--会改变goodsList
goodsList:{
    handler(){
        console.log(this.goodsList)
        // 不用从storage取,然后存. 因为goodsList已经有存到storage cart里面所有的数据
        let cart = this.goodsList.map(item=>{
            return{
                goodsId:item.goodsId,
                num:item.num,
                checked:item.checked
            }
        })
        // 设置到storage
        uni.setStorageSync('cart',cart)
    },
        deep:true
}
注意点：
  1. 深度监听
  2. goodsList已经有构造cart的所有的数据，所有没必要取cart

Array的方法总结

  1. find

    1. 概念：在数组里面找一项符合条件的元素
    2. 如何作用的：遍历数组，对每一项执行指定函数，如果为ture，返回这一项，并中断遍历;如果一直没找到，返回undefined

  2. findIndex

    1. 概念：在数组里面找一项符合条件的元素的下标

  3. forEach

    1. 遍历数组
    2. 注意点：
      1. 不能中断遍历，而且不能修改元素

  4. map

    1. 概念：一般用来返回一个新的数组，新数组和原数组结构不一样
    2. 如何作用的：返回新数组，遍历原数组，每一项执行指定函数，返回值作为新数组的项

  5. for …of

    1. 遍历
    2. for(let item of arr), item是指元素并不是指下标。遍历可以叫断

  6. every

    1. 遍历数组，每一项执行指定函数，所有结果为true,就返回true

  7. some

    1. 遍历数组，每一项执行指定函数，只要有一项结果为true,就返回true

  8. reduce

    1. 如何作用
      1. 第一遍历时，中间变量被第2个参数赋值
      2. 中间变量和元素的计算都会赋值给中间变量
      3. 遍历结束后，reduce返回中间变量
    2. 应用场景：累加，和阶乘
    数组.reduce((中间变量,元素)=>{
	return 中间变量和元素的计算
},中间变量的初始值)
大力99
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信系小程序 StorageSync
有勇气的牛排博客
04-03 504
var sessionId = wx.getStorageSync("sessionId"); console.log('sid:'+sessionId) if(sessionId == ''){ console.log('没有登录') } //必须先清除，否则res.header['Set-Cookie']会报错 wx.removeStorageSync('sessionId'); //储存res.header['Set-Cookie'] wx.setStorageSync("sessionId",
vue实例：监听购物车数量变化、金额变化、物品模糊查询、计算属性的应用和分页功能的实现----纯手写
babyxuqian的博客
08-05 1290
Html部分 <template> <div class="main"> <div class="form-group"> <label>商品名称</label> <input type="text" placeholder="请输入查询内容" v-model="inputs" /> </div> <div class="table"&gt
微信小程序：自定义组件，数据监听器的使用，2024年最新面试web前端题目及答案
最新发布
m0_60667010的博客
04-20 859
对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
Vue2.（过滤器，Watch侦听器，计算属性，购物车案例）
切图仔
04-19 852
Vue2.（过滤器，Watch侦听器，计算属性）
电商项目——购物车案例***
weixin_45998300的博客
03-26 1428
1.项目初始化 效果图： ①: vue命令创建项目shopcar-demo ②: 下载bootstrap, less, less-loader@5.0.0 ③: main.js – 引入bootstrap样式 import "bootstrap/dist/css/bootstrap.css" //引入第三方包里的某个css文件 ④: 创建4个组件文件, 标签和样式（略） ⑤: 把组件相应的引入到对应位置使用 2.头部自定义 需求：组件支持自定义
【Vue】watch监听器案例，watch监听器实战、用法，watch监听购物车小案例。watch、filters、computed
qq_51055690的博客
07-10 1959
首先讲一下应用场景，购物车，，购物车的总数需要重新计算，并且购物车的总价，也是需要重新计算的，这里不考虑勾选之类的问题。只对watch做一个简单的应用实战 这里有3个商品，现在对任意一个进行添加或者删除，总价格和总数量都需要发生变化。 这里的变量是定义在data数据中的 再写一下css 开✍ watch监听 最后添加和删除写好了，就是对页面中的totalNum和totalPrice进行实时监听数据了。 看到没有，watch监听 首先写监听的数据名，我定义的数组就叫list，我就写list.........
基于Vue Computed Watch Filter知识点小案例：购物车
专注于Java领域开发 关注我 带你玩转Java
03-08 1150
对Vue Computed Watch Filter知识点还不熟 不妨做个小案例
小程序中在底部tabbar上显示购物的数量（如：购物车）
dd602350527的博客
06-19 2851
onShow: function() { if (this.data.num == '') { //如果还未添加商品时候，可使用这个wx.removeTabBarBadge来移除 wx.removeTabBarBadge({//移除tabbar右上角的文本 index: 2,//tabbar下标 }) } else { //添加商品后通过wx.setTabBarBadge来进行设置 wx.setTabBarBadge({//tabbar右上角添加
微信小程序使用计算属性computed封装购物车组件
01-02
微信小程序使用计算属性computed封装购物车组件
微信小程序购物车实战：加减商品数量，汇总价格，全选与全不选 ... ...
03-29
微信小程序，这里实现微信小程序checkbox,有需要此功能的朋友可以参考下。 摘要: 加减商品数量，汇总价格，全选与全不选 设计思路： 一、从网络上传入以下Json数据格式的数组 1.标题title 2.图片地址 3.数量num 4....
点奶茶小程序购物车页面源码及模板下载.zip
07-09
点奶茶小程序购物车页面源码及模板下载.zip
微信小程序--购物车功能
03-29
微信小程序其实跟 vue.js 的用法非常像，接下来就看看小程序可以怎样实现购物车功能。 需求 (此图片来源于网络，如有侵权，请联系删除! ) 先来弄清楚购物车的需求。 单选、全选和取消，而且会随着选中的商品计算出...
微信小程序源码（含截图）购物车
05-17
微信小程序源码（含截图）购物车微信小程序源码（含截图）购物车微信小程序源码（含截图）购物车微信小程序源码（含截图）购物车微信小程序源码（含截图）购物车微信小程序源码（含截图）购物车微信小程序源码（含...
小程序自定义tabbar中购物车数量不同步问题
ZxcHelloworld的博客
01-13 540
具体现象是在分类页面中购物车数量显示16，然后切换到购物车页面新加了两个商品变为18 ，这时候切换回分类页面会发现tabbar里面的数字会先变成16在变成18。每次打开tabbar页面的时候都将syncCartNum这个同步数量的函数加到 refreshCarNumCallBack 变量中。后来才想到自定义tabbar相对每个页面都是独立的，想要不闪必须得让他们之间互相同步通信才行。在自定义tabbar中加入了公共的购物车数量显示，但是在切换页面时 这个数会来回变。
微信小程序开发踩坑记录
Xiaofeng_Lu__的博客
04-20 1340
1. 微信小程序给组件的data赋值 2.微信小程序本地存储wx.getStorageSync和wx.setStorageSync的坑 3.微信小程序对data{}的监听机制 4.微信小程序给组件的properties传参时，properties一定要指定数据类型，否则真机测试会报错！！！ 5 微信小程序报错Do not have xxx handler in current page，xxxx 6 微信小程序异步转同步
小程序-本地存储StorageSync的相关用法
精通前端技术，了解后端接口
05-13 3944
小程序-本地存储StorageSync的相关用法
微信小程序全局变量（globalData）和缓存（StorageSync）的区别和具体用法
niu1109的博客
04-27 3024
微信小程序全局变量（globalData）和缓存（StorageSync）的区别和具体用法 一、缓存（StorageSync）本地存储 1、小程序中的本地存储有同步功能，可用于保存用户信息(用户登录后的一些基本信息) 2、缓存的更新需要使用setStorageSync方法。 二、全局变量（globalData） 1、保存一些可能涉及安全类的数据，例如资源类，每次需要很准确的，就建议用全局变量。 2、全局变量每次关闭小程序重新打开的时候，都会进行初始化更新。 三、globalData的用法 app.js中
vuex案例之购物车数据本地存储
weixin_44707050的博客
08-16 962
本地存储，当刷新页面时，数据保留在购物车中； 每次在mutations中操作，都要将更新的数据保存在本地 window.localStorage.setItem('cartlist',JSON.stringify(state.cartlist)) 此处保存的是一个数组，数组中包含对象，类似： cartlist:[ {id:1,num:1,price:10,name:'aaa'}, {id:2,num:1,price:10,name:'aaa1'}, {id:3,num:1,price:10,na
uni.app小程序加入购物车的数据请求与传递，渲染
Dummerd的博客
11-28 544
uni.app小程序加入购物车的数据请求与传递，渲染
1.定义一个数组，数组中包含产品的名称、单价和购买数量，使用methods(方法）computed(计算属性）和watch(侦听器）这3者中最优的方式计算购物车中产品的总价格；然后修改产品的购买数量，并重新计算其总价格。
06-09
好的，我可以帮你解答这个问题。 首先，我们可以定义一个数组来包含产品的名称、单价和购买数量，如下所示： ```javascript let products = [ { name: 'Product A', price: 10, quantity: 2 }, { name: 'Product B', price: 5, quantity: 3 }, { name: 'Product C', price: 8, quantity: 1 } ]; ``` 接下来，我们可以使用计算属性来计算购物车中产品的总价格，代码如下： ```javascript computed: { totalPrice() { return this.products.reduce((total, product) => { return total + product.price * product.quantity; }, 0); } } ``` 在上面的代码中，我们使用了数组的 `reduce` 方法来计算总价格。 最后，我们可以使用侦听器来监听购买数量的变化，并重新计算总价格，代码如下： ```javascript watch: { 'products': { handler: function() { this.totalPrice = this.products.reduce((total, product) => { return total + product.price * product.quantity; }, 0); }, deep: true } } ``` 在上面的代码中，我们使用了侦听器来监听 `products` 数组的变化，并在数组发生变化时重新计算总价格。 整个示例代码如下所示： ```javascript <template> <div> <ul> <li v-for="(product, index) in products" :key="index"> {{ product.name }} - {{ product.price }} - {{ product.quantity }} <button @click="product.quantity++">+</button> <button @click="product.quantity--">-</button> </li> </ul> <div>Total Price: {{ totalPrice }}</div> </div> </template> <script> export default { data() { return { products: [ { name: 'Product A', price: 10, quantity: 2 }, { name: 'Product B', price: 5, quantity: 3 }, { name: 'Product C', price: 8, quantity: 1 } ], totalPrice: 0 }; }, mounted() { this.totalPrice = this.products.reduce((total, product) => { return total + product.price * product.quantity; }, 0); }, computed: { totalPrice() { return this.products.reduce((total, product) => { return total + product.price * product.quantity; }, 0); } }, watch: { 'products': { handler: function() { this.totalPrice = this.products.reduce((total, product) => { return total + product.price * product.quantity; }, 0); }, deep: true } } }; </script> ``` 希望这个示例能够帮助你解决问题。如果你有任何疑问，可以随时向我提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值