微信小程序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.requestDatathis.setData({requestData: { ...this.data.requestData, page: page + 1 }})// 重新获取商品列表getGoodsList()},
6.数据是否加载完毕
onReachBottom() {const { total, goodsList, requestData } = this.dataconst { 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 = trueconst { data } = await reqGoodsList(this.data.requestDta)// 表示请求已经结束this.data.isLoading = falseconst { total, goodsList, requestData, isLoading } = this.dataconst { page } = requestData// 判断isLoading状态// 如果为true就不请求下一页数据if (isLoading) return8.实现下拉刷新功能
- 在页面.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.goodsIdthis.getGoodsInfo()}
})
全屏预览展示: wx.previewImage()
在预览过程中还可以保存图片，方式给朋友等操作
// 全屏预览previewImage() {wx.previewImage({urls: this.data.goodsInfo.detailList})},
10.@路径别名优化访问路径
在小程序中app.json中使用resolveAlias配置项用来自定义模块路径的映射规则。
"resolveAlias": {"@/*": "/*"}
因为指定了miniprogram/所 以/指的就是miniprogram
