• uniapp——项目day03

    商品列表

    分支创建

    定义请求参数对象 

    获取商品列表数据

    渲染商品列表结构

    1. 在页面中，通过 v-for 指令，循环渲染出商品的 UI 结构：

    1. <template>
    2.   <view>
    3.     <view class="goods-list">
    4.       <block v-for="(goods, i) in goodsList" :key="i">
    5.         <view class="goods-item">
    6.           
    7.           <view class="goods-item-left">
    8.             <image :src="goods.goods_small_logo || defaultPic" class="goods-pic">image>
    9.           view>
    10.           
    11.           <view class="goods-item-right">
    12.             
    13.             <view class="goods-name">{{goods.goods_name}}view>
    14.             <view class="goods-info-box">
    15.               
    16.               <view class="goods-price">￥{{goods.goods_price}}view>
    17.             view>
    18.           view>
    19.         view>
    20.       block>
    21.     view>
    22.   view>
    23. template>

    2. 为了防止某些商品的图片不存在，需要在 data 中定义一个默认的图片：

    1. // 默认的空图片
    2.         defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'

    3. 美化商品列表的 UI 结构：

    1.  .goods-item {
    2.     display: flex;
    3.     padding: 10px 5px;
    4.     border-bottom: 1px solid #f0f0f0;
    5.  
    6.     .goods-item-left {
    7.       margin-right: 5px;
    8.  
    9.       .goods-pic {
    10.         width: 100px;
    11.         height: 100px;
    12.         display: block;
    13.       }
    14.     }
    15.  
    16.     .goods-item-right {
    17.       display: flex;
    18.       flex-direction: column;
    19.       justify-content: space-between;
    20.  
    21.       .goods-name {
    22.         font-size: 13px;
    23.       }
    24.  
    25.       .goods-price {
    26.         font-size: 16px;
    27.         color: #c00000;
    28.       }
    29.     }
    30.   }

    把商品 item 项封装为自定义组件

    1. 在 components 目录上鼠标右键，选择 新建组件 ：

    2. 将 goods_list 页面中，关于商品 item 项相关的 UI 结构、样式、data 数据，封装到 my-goods 组件中：

    1. <template>
    2.   <view class="goods-item">
    3.     
    4.     <view class="goods-item-left">
    5.       <image :src="goods.goods_small_logo || defaultPic" class="goodspic">image>
    6.     view>
    7.     
    8.     <view class="goods-item-right">
    9.       
    10.       <view class="goods-name">{{goods.goods_name}}view>
    11.       <view class="goods-info-box">
    12.         
    13.         <view class="goods-price">￥{{goods.goods_price}}view>
    14.       view>
    15.     view>
    16.   view>
    17. template>
    18.  
    19. <script>
    20.   export default {
    21.     name: "my-goods",
    22.     // 定义 props 属性，用来接收外界传递到当前组件的数据
    23.     props: {
    24.       // 商品的信息对象
    25.       goods: {
    26.         type: Object,
    27.         defaul: {},
    28.       },
    29.     },
    30.     data() {
    31.       return {
    32.         // 默认的空图片
    33.         defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
    34.       };
    35.     }
    36.   }
    37. script>
    38.  
    39. <style lang="scss">
    40.   .goods-item {
    41.     display: flex;
    42.     padding: 10px 5px;
    43.     border-bottom: 1px solid #f0f0f0;
    44.  
    45.     .goods-item-left {
    46.       margin-right: 5px;
    47.  
    48.       .goods-pic {
    49.         width: 100px;<template>
    50.   <view class="goods-item">
    51.     
    52.     <view class="goods-item-left">
    53.       <image :src="goods.goods_small_logo || defaultPic" class="goodspic">image>
    54.     view>
    55.     
    56.     <view class="goods-item-right">
    57.       
    58.       <view class="goods-name">{{goods.goods_name}}view>
    59.       <view class="goods-info-box">
    60.         
    61.         <view class="goods-price">￥{{goods.goods_price}}view>
    62.       view>
    63.     view>
    64.   view>
    65. template>
    66.  
    67. <script>
    68.   export default {
    69.     name: "my-goods",
    70.     // 定义 props 属性，用来接收外界传递到当前组件的数据
    71.     props: {
    72.       // 商品的信息对象
    73.       goods: {
    74.         type: Object,
    75.         defaul: {},
    76.       },
    77.     },
    78.     data() {
    79.       return {
    80.         // 默认的空图片
    81.         defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
    82.       };
    83.     }
    84.   }
    85. script>
    86.  
    87. <style lang="scss">
    88.   .goods-item {
    89.     display: flex;
    90.     padding: 10px 5px;
    91.     border-bottom: 1px solid #f0f0f0;
    92.  
    93.     .goods-item-left {
    94.       margin-right: 5px;
    95.  
    96.       .goods-pic {
    97.         width: 100px;
    98.         height: 100px;
    99.         display: block;
    100.       }
    101.     }
    102.  
    103.     .goods-item-right {
    104.       display: flex;
    105.       flex-direction: column;
    106.       justify-content: space-between;
    107.  
    108.       .goods-name {
    109.         font-size: 13px;
    110.       }
    111.  
    112.       .goods-price {
    113.         font-size: 16px;
    114.         color: #c00000;
    115.       }
    116.     }
    117.   }
    118. style>
    119.         height: 100px;
    120.         display: block;
    121.       }
    122.     }
    123.  
    124.     .goods-item-right {
    125.       display: flex;
    126.       flex-direction: column;
    127.       justify-content: space-between;
    128.  
    129.       .goods-name {
    130.         font-size: 13px;
    131.       }
    132.  
    133.       .goods-price {
    134.         font-size: 16px;
    135.         color: #c00000;
    136.       }
    137.     }
    138.   }
    139. style>

    使用过滤器处理商品价格

    1. 在 my-goods 组件中，和 data 节点平级，声明 filters 过滤器节点如下：

    1.     filters: {
    2.       // 把数字处理为带两位小数点的数字
    3.       tofixed(num) {
    4.         return Number(num).toFixed(2)
    5.       }
    6.     }

    2. 在渲染商品价格的时候，通过管道符 | 调用过滤器：

    2. <view class="goods-price">￥{{goods.goods_price | tofixed}}view>

    上拉加载更多

    初步实现上拉加载更多

    1. 打开项目根目录中的 pages.json 配置文件，为 subPackages 分包中的 goods_list 页面 配置上拉触底的距离：

    在style中配置如下属性

    "onReachBottomDistance": 150

    2. 在 goods_list 页面中，和 methods 节点平级，声明 onReachBottom 事件处理函数，用 来监听页面的上拉触底行为：

    1.     onReachBottom() {
    2.       // 让页码值自增 +1
    3.       this.queryObj.pagenum += 1
    4.       // 重新获取列表数据
    5.       this.getGoodsList()
    6.     }

    3. 改造 methods 中的 getGoodsList 函数，当列表数据请求成功之后，进行新旧数据的拼接处 理：

    1.       async getGoodsList() {
    2.         // 发起请求
    3.         const {
    4.           data: res
    5.         } = await
    6.         uni.$http.get('/api/public/v1/goods/search', this.queryObj)
    7.         if (res.meta.status !== 200) return uni.$showMsg()
    8.         // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
    9.         this.goodsList = [...this.goodsList, ...res.message.goods]
    10.         this.total = res.message.total
    11.       }

    通过节流阀防止发起额外的请求

    1. 在 data 中定义 isloading 节流阀如下：

    1. // 是否正在请求数据
    2. isloading: false

    判断数据是否加载完毕

    2. 修改 onReachBottom 事件处理函数如下：

    1.     onReachBottom() {
    2.       // 判断是否还有下一页数据
    3.       if (this.queryObj.pagenum * this.queryObj.pagesize >= this.total)
    4.         return uni.$showMsg('数据加载完毕！')
    5.       // 判断是否正在请求其它数据，如果是，则不发起额外的请求
    6.       if (this.isloading) return
    7.       this.queryObj.pagenum += 1
    8.       this.getGoodsList()
    9.     }

    下拉刷新

    3. 修改 getGoodsList 函数，接收 cb 回调函数并按需进行调用：

    1.       async getGoodsList(cb) {
    2.         // ** 打开节流阀
    3.         this.isloading = true
    4.         // 发起请求
    5.         const {
    6.           data: res
    7.         } = await
    8.         uni.$http.get('/api/public/v1/goods/search', this.queryObj)
    9.         this.isloading = false
    10.         // 只要数据请求完毕，就立即按需调用 cb 回调函数
    11.         cb && cb()
    12.         if (res.meta.status !== 200) return uni.$showMsg()
    13.         // 为数据赋值：通过展开运算符的形式，进行新旧数据的拼接
    14.         this.goodsList = [...this.goodsList, ...res.message.goods]
    15.         this.total = res.message.total
    16.       }

    点击商品 item 项跳转到详情页面

    1. 将循环时的 block 组件修改为 view 组件，并绑定 click 点击事件处理函数：

    1. <view class="goods-list">
    2. <view v-for="(item, i) in goodsList" :key="i" @click="gotoDetail(item)">
    4. <my-goods :goods="item">my-goods>
    5. view>
    6. view>

    分支的合并与提交

    商品详情

    创建分支

    git checkout -b goodsdetail

    获取商品详情数据

    渲染商品详情页的 UI 结构

    渲染轮播图区域

    实现轮播图预览效果

    1. 为轮播图中的 image 图片绑定 click 事件处理函数：

    1.         
    2.         <image :src="item.pics_big" @click="preview(i)">image>

    2. 在 methods 中定义 preview 事件处理函数：

    1. // 实现轮播图的预览效果
    2.       preview(i) {
    3.         // 调用 uni.previewImage() 方法预览图片
    4.         uni.previewImage({
    5.           // 预览时，默认显示图片的索引
    6.           current: i,
    7.           // 所有图片 url 地址的数组
    8.           urls: this.goods_info.pics.map(x => x.pics_big)
    9.         })
    10.       }

    渲染商品信息区域

    1. 定义商品信息区域的 UI 结构如下：

    1.     
    2.     <view class="goods-info-box">
    3.       
    4.       <view class="price">￥{{goods_info.goods_price}}view>
    5.       
    6.       <view class="goods-info-body">
    7.         
    8.         <view class="goods-name">{{goods_info.goods_name}}view>
    9.         
    10.         <view class="favi">
    11.           <uni-icons type="star" size="18" color="gray">uni-icons>
    12.           <text>收藏text>
    13.         view>
    14.       view>
    15.       
    16.       <view class="yf">快递：免运费view>
    17.     view>

    2. 美化商品信息区域的样式：

    1.  
    2.   // 商品信息区域的样式
    3.   .goods-info-box {
    4.     padding: 10px;
    5.     padding-right: 0;
    6.  
    7.     .price {
    8.       color: #c00000;
    9.       font-size: 18px;
    10.       margin: 10px 0;
    11.     }
    12.  
    13.     .goods-info-body {
    14.       display: flex;
    15.       justify-content: space-between;
    16.  
    17.       .goods-name {
    18.         font-size: 13px;
    19.         padding-right: 10px;
    20.       }
    21.  
    22.       // 收藏区域
    23.       .favi {
    24.         width: 120px;
    25.         font-size: 12px;
    26.         display: flex;
    27.         flex-direction: column;
    28.         justify-content: center;
    29.         align-items: center;
    30.         border-left: 1px solid #efefef;
    31.         color: gray;
    32.       }
    33.     }
    34.  
    35.     // 运费
    36.     .yf {
    37.       margin: 10px 0;
    38.       font-size: 12px;
    39.       color: gray;
    40.     }
    41.   }

    渲染商品详情信息

     3. 解决 .webp 格式图片在 ios 设备上无法正常显示的问题：

    1. // 定义请求商品详情数据的方法
    2.       async getGoodsDetail(goods_id) {
    3.         const {
    4.           data: res
    5.         } = await uni.$http.get('/api/public/v1/goods/detail', {
    6.           goods_id
    7.         })
    8.         if (res.meta.status !== 200) return uni.$showMsg()
    9.         // 使用字符串的 replace() 方法，将 webp 的后缀名替换为 jpg 的后缀名
    10.         res.message.goods_introduce = res.message.goods_introduce.replace(/, ')
    11.           .replace(/webp/g, 'jpg')
    12.         this.goods_info = res.message
    13.       }

    解决商品价格闪烁的问题

    1. 导致问题的原因：在商品详情数据请求回来之前，data 中 goods_info 的值为 {} ，因此初次 渲染页面时，会导致 商品价格、商品名称 等闪烁的问题。

    2. 解决方案：判断 goods_info.goods_name 属性的值是否存在，从而使用 v-if 指令控制页面 的显示与隐藏：

    渲染详情页底部的商品导航区域

    渲染商品导航区域的 UI 结构

    基于 uni-ui 提供的 GoodsNav 组件来实现商品导航区域的效果

     1. 在 data 中，通过 options 和 buttonGroup 两个数组，来声明商品导航组件的按钮配置对 象：

    1. // 左侧按钮组的配置对象
    2.         options: [{
    3.           icon: 'shop',
    4.           text: '店铺'
    5.         }, {
    6.           icon: 'cart',
    7.           text: '购物车',
    8.           info: 2
    9.         }],
    10.         // 右侧按钮组的配置对象
    11.         buttonGroup: [{
    12.             text: '加入购物车',
    13.             backgroundColor: '#ff0000',
    14.             color: '#fff'
    15.           },
    16.           {
    17.             text: '立即购买',
    18.             backgroundColor: '#ffa200',
    19.             color: '#fff'
    20.           }
    21.         ]

    2. 在页面中使用 uni-goods-nav 商品导航组件：

    1.     <view class="goods_nav">
    2.       
    3.       
    4.       
    5.       
    6.       
    7.       <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
    8.         @buttonClick="buttonClick" />
    9.     view>

    3. 美化商品导航组件，使之固定在页面最底部：

    1.   .goods-detail-container {
    2.     // 给页面外层的容器，添加 50px 的内padding，
    3.     // 防止页面内容被底部的商品导航组件遮盖
    4.     padding-bottom: 50px;
    5.   }
    6.  
    7.   .goods_nav {
    8.     // 为商品导航组件添加固定定位
    9.     position: fixed;
    10.     bottom: 0;
    11.     left: 0;
    12.     width: 100%;
    13.   }

    点击跳转到购物车页面

     2. 根据 e.content.text 的值，来决定进一步的操作：

    1. // 左侧按钮的点击事件处理函数
    2.       onClick(e) {
    3.         if (e.content.text === '购物车') {
    4.           // 切换到购物车页面
    5.           uni.switchTab({
    6.             url: '/pages/cart/cart'
    7.           })
    8.         }
    9.       }

    分支的合并与提交

    加入购物车

    分支创建

    git checkout -b cart

    配置vuex

    1.在项目根目录中创建store文件夹，专门存放vuex相关的模块.

    2.在store目录上鼠标右键，选择新建js文件，新建store.js文件.

    3. 在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象：

    这里是vue2的初始化方法

    1. // 1. 导入 Vue 和 Vuex
    2. import Vue from 'vue'
    3. import Vuex from 'vuex'
    4. // 2. 将 Vuex 安装为 Vue 的插件
    5. Vue.use(Vuex)
    6. // 3. 创建 Store 的实例对象
    7. const store = new Vuex.Store({
    8.   // TODO：挂载 store 模块
    9.   modules: {},
    10. })
    11. // 4. 向外共享 Store 的实例对象
    12. export default store

    这里是vue3的初始化方法, byd，这里不同的初始化方法是真的麻烦，差点就重新创建项目了

    1. // 1. 导入 Vue 和 Vuex
    2. import { createStore } from 'vuex'
    3. import moduleCart from './cart.js'
    4.  
    5. // 2. 创建 Store 的实例对象
    6. const store = createStore({
    7.   modules: {
    8.     m_cart: moduleCart,
    9.   },
    10. })
    11.  
    12. // 3. 向外共享 Store 的实例对象
    13. export default store

    4. 在 main.js 中导入 store 实例对象并挂载到 Vue 的实例上：

    下面是uniapp中提供的两种初始化，，所以我也加上了在vue3中的挂载方式。

    1. // #ifndef VUE3 
    2. import store from './store/store.js'
    3. import Vue from 'vue'
    4. import App from './App'
    5. Vue.config.productionTip = false
    6.  
    7. App.mpType = 'app'
    8.  
    9. const app = new Vue({
    10.   store
    11.   ...App,
    12. })
    13. app.$mount()
    14. // #endif
    15.  
    16.  
    17.  
    18. //_______________________________________________
    19.  
    20.  
    21. // #ifdef VUE3
    22. import {
    23.   createSSRApp
    24. } from 'vue'
    25. import App from './App.vue'
    26. import store from './store/store.js'
    27. export function createApp() {
    28.   const app = createSSRApp(App)
    29.   app.use(store)
    30.   return {
    31.     app,
    32.   }
    33. }
    34. // #endif

    创建购物车的store模块

    1. 在 store 目录上鼠标右键，选择 新建 -> js文件 ，创建购物车的 store 模块，命名为 cart.js ：

    2. 在 cart.js 中，初始化如下的 vuex 模块：

    1. export default {
    2.   // 为当前模块开启命名空间
    3.   namespaced: true,
    4.   // 模块的 state 数据
    5.   state: () => ({
    6.       // 购物车的数组，用来存储购物车中每个商品的信息对象
    7.       // 每个商品的信息对象，都包含如下 6 个属性：
    8.       // { goods_id, goods_name, goods_price, goods_count,
    9.       goods_small_logo,
    10.       goods_state
    11.     }
    12.     cart: [],
    13.   }),
    14. // 模块的 mutations 方法
    15. mutations: {},
    16.   // 模块的 getters 属性
    17.   getters: {},
    18. }

    3. 在 store/store.js 模块中，导入并挂载购物车的 vuex 模块，示例代码如下:

    1. import Vue from 'vue'
    2. import Vuex from 'vuex'
    3. // 1. 导入购物车的 vuex 模块
    4. import moduleCart from './cart.js'
    5. Vue.use(Vuex)
    6. const store = new Vuex.Store({
    7. // TODO：挂载 store 模块
    8. modules: {
    9. // 2. 挂载购物车的 vuex 模块，模块内成员的访问路径被调整为 m_cart，例如：
    10. // 购物车模块中 cart 数组的访问路径是 m_cart/cart
    11. m_cart: moduleCart,
    12. },
    13. })
    14. export default store

    在商品详情页中使用 Store 中的数据

    1. 在 goods_detail.vue 页面中，修改 标签中的代码如下：

    1.     // 从 vuex 中按需导出 mapState 辅助方法
    2.     import {
    3.       mapState
    4.     } from 'vuex'
    5.     export default {
    6.       computed: {
    7.         // 调用 mapState 方法，把 m_cart 模块中的 cart 数组映射到当前页面中，作为计算
    8.         属性来使用
    9.         // ...mapState('模块的名称', ['要映射的数据名称1', '要映射的数据名称2'])
    10.         ...mapState('m_cart', ['cart']),
    11.       },
    12.       // 省略其它代码...
    13.     }

    实现加入购物车的功能

    1. 在 store 目录下的 cart.js 模块中，封装一个将商品信息加入购物车的 mutations 方法，命名 为 addToCart 。示例代码如下：

    1. export default {
    2.   // 为当前模块开启命名空间
    3.   namespaced: true,
    4.   // 模块的 state 数据
    5.   state: () => ({
    6.       // 购物车的数组，用来存储购物车中每个商品的信息对象
    7.       // 每个商品的信息对象，都包含如下 6 个属性：
    8.       // { goods_id, goods_name, goods_price, goods_count,
    9.       goods_small_logo,
    10.       goods_state
    11.     }
    12.     cart: [],
    13.   }),
    14. // 模块的 mutations 方法
    15. mutations: {
    16.     addToCart(state, goods) {
    17.       // 根据提交的商品的Id，查询购物车中是否存在这件商品
    18.       // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象
    19.       const findResult = state.cart.find((x) => x.goods_id ===
    20.         goods.goods_id)
    21.       if (!findResult) {
    22.         // 如果购物车中没有这件商品，则直接 push
    23.         state.cart.push(goods)
    24.       } else {
    25.         // 如果购物车中有这件商品，则只更新数量即可
    26.         findResult.goods_count++
    27.       }
    28.     },
    29.   },
    30.   // 模块的 getters 属性
    31.   getters: {},
    32. }

    2. 在商品详情页面中，通过 mapMutations 这个辅助方法，把 vuex 中 m_cart 模块下的 addToCart 方法映射到当前页面：

    1.   // 按需导入 mapMutations 这个辅助方法
    2.   import {
    3.     mapMutations
    4.   } from 'vuex'
    5.   export default {
    6.     methods: {
    7.       // 把 m_cart 模块中的 addToCart 方法映射到当前页面使用
    8.       ...mapMutations('m_cart', ['addToCart']),
    9.     },
    10.   }

    3. 为商品导航组件 uni-goods-nav 绑定 @buttonClick="buttonClick" 事件处理函数：

    1. // 右侧按钮的点击事件处理函数
    2.       buttonClick(e) {
    3.         // 1. 判断是否点击了 加入购物车 按钮
    4.         if (e.content.text === '加入购物车') { // 2. 组织一个商品的信息对象
    5.           const goods = {
    6.             goods_id: this.goods_info.goods_id, // 商品的Id
    7.             goods_name: this.goods_info.goods_name, // 商品的名称
    8.             goods_price: this.goods_info.goods_price, // 商品的价格
    9.             goods_count: 1, // 商品的数量
    10.             goods_small_logo: this.goods_info.goods_small_logo, // 商品的图片
    11.             goods_state: true // 商品的勾选状态
    12.           }
    13.           console.log(goods)
    14.           // 3. 通过 this 调用映射过来的 addToCart 方法，把商品信息对象存储到购物车中
    15.           this.addToCart(goods)
    16.         }
    17.       },

    动态统计购物车中商品的总数量

    1. 在 cart.js 模块中，在 getters 节点下定义一个 total 方法，用来统计购物车中商品的 总数量：

    1.   // 模块的 getters 属性
    2.   getters: {
    3.     // 统计购物车中商品的总数量
    4.     total(state) {
    5.       let c = 0
    6.       // 循环统计商品的数量，累加到变量 c 中
    7.       state.cart.forEach(goods => c += goods.goods_count)
    8.       return c
    9.     }
    10.   },

    2. 在商品详情页面的 script 标签中，按需导入 mapGetters 方法并进行使用：

    1.   // 按需导入 mapGetters 这个辅助方法
    2.   import {
    3.     mapGetters
    4.   } from 'vuex'
    5.   export default {
    6.     computed: {
    7.       // 把 m_cart 模块中名称为 total 的 getter 映射到当前页面中使用
    8.       ...mapGetters('m_cart', ['total']),
    9.     },
    10.   }

    3. 通过 watch 侦听器，监听计算属性 total 值的变化，从而动态为购物车按钮的徽标赋值：

    1.     watch: {
    2.       // 1. 监听 total 值的变化，通过第一个形参得到变化后的新值
    3.       total(newVal) {
    4.         // 2. 通过数组的 find() 方法，找到购物车按钮的配置对象
    5.         const findResult = this.options.find((x) => x.text === '购物车')
    6.         if (findResult) {
    7.           // 3. 动态为购物车按钮的 info 属性赋值
    8.           findResult.info = newVal
    9.         }
    10.       },
    11.     },

    持久化存储购物车中的商品

    2. 修改 mutations 节点中的 addToCart 方法，在处理完商品信息后，调用步骤 1 中定义的 saveToStorage 方法：

    1.     addToCart(state, goods) {
    2.       // 根据提交的商品的Id，查询购物车中是否存在这件商品
    3.       // 如果不存在，则 findResult 为 undefined；否则，为查找到的商品信息对象
    4.       const findResult = state.cart.find((x) => x.goods_id ===
    5.         goods.goods_id)
    6.       if (!findResult) {
    7.         // 如果购物车中没有这件商品，则直接 push
    8.         state.cart.push(goods)
    9.         console.log(state.cart)
    10.       } else {
    11.         // 如果购物车中有这件商品，则只更新数量即可
    12.         findResult.goods_count++
    13.       }
    14.       // 通过 commit 方法，调用 m_cart 命名空间下的 saveToStorage 方法
    15.       this.commit('m_cart/saveToStorage')
    16.     },

    优化商品详情页的 total 侦听器

    1. 使用普通函数的形式定义的 watch 侦听器，在页面首次加载后不会被调用。因此导致了商品详情 页在首次加载完毕之后，不会将商品的总数量显示到商品导航区域：

    2. 为了防止这个上述问题，可以使用对象的形式来定义 watch 侦听器（详细文档请参考 Vue 官方的 watch 侦听器教程），示例代码如下：

    1.     watch: {
    2.       // 定义 total 侦听器，指向一个配置对象
    3.       total: {
    4.         // handler 属性用来定义侦听器的 function 处理函数
    5.         handler(newVal) {
    6.           const findResult = this.options.find(x => x.text === '购物车')
    7.           if (findResult) {
    8.             findResult.info = newVal
    9.           }
    10.         },
    11.         // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
    12.         immediate: true
    13.       }
    14.     },

    动态为 tabBar 页面设置数字徽标

    需求描述：从商品详情页面导航到购物车页面之后，需要为 tabBar 中的购物车动态设置数字徽 标。

    将设置 tabBar 徽标的代码抽离为 mixins

    注意：除了要在 cart.vue 页面中设置购物车的数字徽标，还需要在其它 3 个 tabBar 页面中，为购 物车设置数字徽标。

    此时可以使用 Vue 提供的 mixins 特性，提高代码的可维护性。

    1. 在项目根目录中新建 mixins 文件夹，并在 mixins 文件夹之下新建 tabbar-badge.js 文 件，用来把设置 tabBar 徽标的代码封装为一个 mixin 文件：

    1. import {
    2.   mapGetters
    3. } from 'vuex'
    4. // 导出一个 mixin 对象
    5. export default {
    6.   computed: {
    7.     ...mapGetters('m_cart', ['total']),
    8.   },
    9.   onShow() {
    10.     // 在页面刚展示的时候，设置数字徽标
    11.     this.setBadge()
    12.   },
    13.   methods: {
    14.     setBadge() {
    15.       // 调用 uni.setTabBarBadge() 方法，为购物车设置右上角的徽标
    16.       uni.setTabBarBadge({
    17.         index: 2,
    18.         text: this.total + '', // 注意：text 的值必须是字符串，不能是数字
    19.       })
    20.     },
    21.   },
    22. }

    2. 修改 home.vue ， cate.vue ， cart.vue ， my.vue 这 4 个 tabBar 页面的源代码，分别导 入 @/mixins/tabbar-badge.js 模块并进行使用： 

  • 相关阅读:
    mysql快问快答(1)---MySQL常用的存储引擎MyISAM和InnoDB
    分布式事务
    pytorch笔记
    PyQt5快速开发与实战10.2 复利计算 && 10.3 刷新博客点击量
    创建一个给定形状的数组，并用给定的值填充numpy.full()
    SpringBoot的原理-初探
    Kotlin高阶函数&DSL布局劝退指南
    【单端S参数与差分S参数转化】
    用队列实现栈（力扣第225题）
    大数据必学Java基础（四十七）：异常的讲解
  • 原文地址：https://blog.csdn.net/m0_62327332/article/details/134357431