微信小程序商品列表

1.分支创建

定义请求参数对象

1.为了方便发起请求获取商品列表的数据，根据接口要求，事先定义一个请求参数对象：

data() {
  return {
    //请求参数对象
    queryObj: {
      //查询关键词
      query:'',
      //商品分类ID
      cid:'',
      //页码值
      pagenum: 1,
      //每页显示多少条数据
      pagesize: 10
    }
  }
}

2.通过 v-for 指令，循环渲染出商品的UI结构

<template>
  <view>
    <view class="goods-list">
      <block v-for="(goods,i)in goodsList" :key="i">
        <view class="goods-item">
          <!-- 商品左侧图片区域 -->
          <view class="goods-item-left">
            <image :src="goods.goods_small_logo || defaultapic" class="goods-pic">
            </image>
          </view>
          <!-- 商品右侧图片区域 -->
          <view class="goods-item-left">
            <!-- 商品标题 -->
            <view class="goods-name">{{goods.goods-name}}</view>
            <view class="goods-info-box">
              <!-- 商品价格 -->
              <view class="goods-price">￥{{goods.goods-price}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

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

1.在data中定义 isloading 节流阀

data() {
  return {
    // 是否正在请求数据
    isloading: false
  }
}

2.修改 getGoodsList 方法，在请求数据前后，分别打开和关闭节流阀

async getGoodsList() {
  // 打开节流阀
  this.isloading=true
  // 发起请求
  const { data: res } = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
  // 关闭节流阀
  this.isloading=false
}

下拉刷新

监听页面的 onPullDownRefresh 事件处理函数

onPullDownRefresh() {
  // 重置关键数据
  this.queryObj.pagenum=1
  this.total=0
  this.isloading=false
  this.goodsList=[]
  
  //重新发起请求
  this.getGoodsList(() => uni.stopPullDownRefresh()
}

渲染轮播图区域

<!-- 轮播图区域 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
  <swiper-item v-for="(item,i) in goods_info.pics" :key="i">
    <image :src="item.pics_big"></image>
  </swiper-item>
</swiper>

实现轮播图预览效果

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

<swiper-item v-for="(item,i) in goods_info.pics" :key="i">
    <!-- 把当前图片的索引传递到 preview() 处理函数中 -->
    <image :src="item.pics_big"@click="preview(i)"></image>
</swiper-item>

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

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

配置 vuex

按如下4个步骤初始化Store的实例对象：

//导入 Vue 和 Vuex
import Vue from 'vue'
import Vuex from 'vuex'

//将vuex 安装为 Vue 的插件
Vue.use(Vuex)

// 创建 Store 的实例对象
const store = new Vuex.Store({
    // TODO:挂载 store 模块
    modules:{},
})
// 向外共享 Store 的实例对象
export default store

为商品导航组件绑定事件处理函数：

buttonClick(e) {
  // 判断是否点击了 "加入购物车" 按钮
  if (e.content.text---'加入购物车') {
    const goods={
        goods_id: this.goods_info.goods_id,
        goods_name: this.goods_info.goods_name,
        goods_price: this.goods_info.goods_price,
        goods_small_loge: this.goods_info.goods_small_logo,
        goods_state: true
    }
    //信息储存
    this.addToCart(goods)
  }
}

持久化储存数据

在js模块中，声明一个mutations方法

// 将数据持久化储存到本地
saveToStorage(state) {
    uni.setStorageSync('cart',JSON.stringify(state.cart))
}

修改mutations节点中 addToCart 方法，在处理完信息后调用 saveToStoreage 方法：

addToCart(state,goods) {
  //根据提交的商品Id,查询是否存在商品
  //如果不存在，则 findResult 为 underfined,否则，为查找到的商品信息对象
  const findResult = state.cart.find(x=> x.goods_id===goods.goods_id)
  
  if(!findResult) {
    state.cate.push(goods)
  } else {
    findResult.goods_count++
  }

  //通过 commit 方法，调用 m_cart 命名的 saveToStorage 方法
  this.commit('m_cart/saveToStorage')
}

total侦听器

使用普通函数的形式定义的watch侦听器，在页面首次加载后不会被调用。（错误形式）

watch: {
  // 页面首次加载完毕后，不会调用这个侦听器
  total(newVal) {
    const findResult = this.options.find(x => x.text ==='购物车')
    if (findResult) {
       findResult.info = newVal
    }
  }  
}

使用对象形式来定义watch侦听器。（正确示例）

watch: {
  //定义 total 侦听器，指向一个配置对象
  total: {
    //handler 属性用来定义侦听器的 function 处理函数
    handler(newVal) {
      const findResult= this.option.find(x=> x.text === '购物车')
      if (findResult) {
         findResult.info = newVal
      }
    },
    immediate: true
  }
}