微信小程序161~170

1.SwipeCell自动收齐删除滑块

复制代码

// 导出
export const swipeCellBehavior = Behavior({
  data: {
    swipeCellQueue: [] // 存储滑动单元格实例
  },

  methods: {
    //当用户打开滑块时触发
    swipeCellOpen(event) {
      this.instance = this.selectComponent(`#${event.target.id}`)
      // 将实例追加到数组中
      this.data.swipeCellQueue.push(instance)
    },

    //给页面绑定点击事件
    onSwipeCellPage() {
      this.onSwipeCellCommonClick()
    },

    //点击滑动单元格时触发的事件
    onSwipeCellClick() {
      this.onSwipeCellCommonClick()
    },

    // 关掉滑块的统一逻辑
    onSwipeCellCommonClick() {
      this.data.swipeCellQueue.forEach((instance) => {
        instance.close()
      })
      // 将滑动单元格数组重置为空
      this.data.swipeCellQueue = []
    }
  }
})

2.配置商品管理分包

将商品列表和商品详情功能配置成一个分包，用户在访问设置页面时，预加载商品列表和商品详情所在的分包

复制代码

    "subPackages": [
        {
            "root": "modules/settingModule",
            "name": "settingModule",
            "pages": [
                "pages/address/add/index",
                "pages/address/list/index",
                "pages/profile/profile"
            ]
        },
        {
            "root": "modules/goodModule",
            "name": "goodModule",
            "pages": [
                "pages/goods/list/list",
                "pages/goods/detail/detail"
            ]
        }
    ],
    "preloadRule": {
        "pages/settings/settings": {
            "network": "all",
            "packages": [
                "settingModule"
            ]
        },
        "pages/category/category": {
            "network": "all",
            "packages": [
                "goodModule"
            ]
        }
    },

封装商品模块接口API，在后续进行商品管理模块开发的时候直接调用接口即可

复制代码

import { http } from '../utils/http'

export const reqGoodsList = ({ page, limit, ...data }) => {
  return http.get(`/goods/list/${page}/${limit}`, data)
}

export const reqGoodsInfo = (goodsId) => {
  return http.get(`/goods/${goodsId}`)
}

3.商品列表请求参数

在商品列表页面定义四个请求参数，在onLoad钩子函数接收传递的参数，在对定义参数进行赋值。

Object.assign用来合并对象，后面对象的属性会往前进行合并

复制代码

Page({
  data: {
    goodsList: [],
    isFinish: false,
    requestData: {
      page: 1,
      limit: 10,
      category1Id: '',
      category2Id: ''
    }
  },

  onLoad(options) {
    Object.assign(this.data.requestData, options)
  }
})

4.获取商品列表数据并渲染

复制代码

import { reqGoodsList } from '../../../../../api/good'
Page({
  data: {
    goodsList: [],
    total: 0, // 数据总条数
    isFinish: false,
    requestData: {
      page: 1,
      limit: 10,
      category1Id: '',
      category2Id: ''
    }
  },

  // 获取商品列表数据
  async getGoodsList() {
    const { data } = await reqGoodsList(this.data.requestDta)
    this.setData({
      goodsList: data.records,
      total: data.total
    })
  },

  onLoad(options) {
    Object.assign(this.data.requestData, options)
    // 调用
    this.getGoodsList()
  }
})

5.商品列表上拉加载更多功能

现在.js文件中声明onReachBottom方法监听用户是否进行了上拉，上拉时，要对page页码加1,请求下一页数据。

参数发生改变时要重新发送请求，拿最新的page向服务器发送获取数据请求，在下一页商品数据返回后，将最新数据与之前数据合并。

复制代码

  // 获取商品列表数据
  async getGoodsList() {
    const { data } = await reqGoodsList(this.data.requestDta)
    this.setData({
      goodsList: [...this.data.goodsList, ...data.records],
      total: data.total
    })
  },

  // 监听页面上拉
  onReachBottom() {
    const { page } = this.data.requestData
    this.setData({
      requestData: { ...this.data.requestData, page: page + 1 }
    })
    // 重新获取商品列表
    getGoodsList()
  },

6.数据是否加载完毕

复制代码

onReachBottom() {
    const { total, goodsList, requestData } = this.data
    const { page } = requestData
    // 对比
    if (goodsList.length === total) {
      this.setData({
        isFinish: true
      })
      return
    }
    this.setData({
      requestData: { ...this.data.requestData, page: page + 1 }
    })
    // 重新获取商品列表
    getGoodsList()
  },

7.节流阀进行列表节流

在用户网速很慢的情况下，如果用户在距离底部来回的进行多次滑动，可能会发送一些无意义的请求、造成请求浪费的情况，因此需要给上拉加载添加节流功能。

我们使用节流阀来给商品列表添加节流功能。

在 data 中定义节流阀状态 isLoading，默认值是 false 。
在请求发送之前，将 isLoading 设置为 true，表示请求正在发送。
在请求结束以后，将 isLoading 设置为 false，表示请求已经完成。

在 onReachBottom 事件监听函数中，对 isLoading 进行判断，如果数据正在请求中，不请求下一页的数据。

复制代码

  // 表示请求正在发送中
  this.data.isLoading = true
  const { data } = await reqGoodsList(this.data.requestDta)
  // 表示请求已经结束
  this.data.isLoading = false

const { total, goodsList, requestData, isLoading } = this.data
const { page } = requestData

复制代码

  // 判断isLoading状态
  // 如果为true就不请求下一页数据
  if (isLoading) return

8.实现下拉刷新功能

在页面.json中开启允许下拉，同时配置窗口、loading样式
在页面.js中定义onPullDownRefresh事件监听用户下拉刷新

//监听页面下拉刷新
onPullDownRefresh() {
// 将数据重置
this.setData({
goodsList: [],
total: 0,
isFinish: false,
requestData: { ...this.data.requestData, page: 1 }
})
// 使用最新的参数方式请求
this.getGoodsList()
// 手动关闭下拉刷新效果
wx.stopPullDownRefresh()
},

9.获取并渲染商品详情

复制代码

import { reqGoodsInfo } from '../../../../../api/good'
Page({
  data: {
    goodsInfo: {},
    show: false,
    count: 1,
    blessing: ''
  },

  getGoodsInfo() {
    reqGoodsInfo(this.goodsId)
  },
  onLoad(options) {
    this.goodsId = options.goodsId
    this.getGoodsInfo()
  }
})

全屏预览展示: wx.previewImage()

在预览过程中还可以保存图片，方式给朋友等操作

复制代码

  // 全屏预览
  previewImage() {
    wx.previewImage({
      urls: this.data.goodsInfo.detailList
    })
  },

10.@路径别名优化访问路径

在小程序中app.json中使用resolveAlias配置项用来自定义模块路径的映射规则。

复制代码

    "resolveAlias": {
        "@/*": "/*"
    }

因为指定了miniprogram/所以/指的就是miniprogram