当前位置：首页 > news >正文

微信小程序161~200

news 2026/5/23 13:40:00

收货地址

实现删除收货地址

删除滑块SwipeCell自动收起

调用之前的swipeCell

商品管理

配置商品管理分包-封装商品模块接口

import http from "../utils/http" /** * @description 获取商品列表数据 * @param {Object} param {page,limit,categoryId,category2Id} * @returns Promise */ export const reqGoodsList=({page,limit,...data})=>{ return http.get(`/goods/list/${page}/${limit}`,data) } /** * @description 获取商品的详情 * @param {*} goodsId 商品的id * @return Promise */ export const reqGoodsInfo=(goodsId)=>{ return http.get(`/goods/${goodsId}`) }

商品列表

准备列表请求参数

获取商品列表数据并渲染

实现步骤：
1.在/pages/goods/list/list.js中导入封装好的获取商品列表的API函数
2．页面数据在页面加载的时候进行调用，在onLoad钩子函数中调用reqGoodsList方法
3，在获取到数据以后，使用后端返回的数据对页面进行渲染

实现上拉加载更多功能

实现步骤：
1．list.js文件中声明onReachBottom事件处理函数，监听用户的上拉行为
2。在onReachBottom函数中加page进行加1的操作，同时发送请求获取下一页数据
3．在getGoodsList函数中，实现参数的合并

判断数据是否加载完毕

节流阀进行列表节流

在data中定义节流阀状态isLoading，默认值是false。
在请求发送之前，将isLoading设置为true，表示请求正在发送。
在请求结束以后，将isLoading设置为false，表示请求已经完成。
在onReachBottom事件监听函数中，对isLoading进行判断，如果数据正在请求中，不请求下一页的数据。

实现下拉刷新功能

小程序中实现上拉加载更多的方式：
1．在页面.json中开启允许下拉，同时可以配置窗口、loading样式等
2．在页面.js中定义onPullDownRefresh事件监听用户下拉刷新

商品详情渲染+预览图片

实现步骤：
1．在/pages/goods/detail/detail.js中导入封装好的获取商品列表的API函数
2，页面数据在页面加载的时候进行调用，在onLoad钩子函数中调用reqGoodsInfo方法
3，在获取到数据以后，使用后端返回的数据对页面进行渲染

优化-小程序配置@路径别名优化..

购物车

封装购物车

接口API为了方便后续进行购物车模块的开发，我们在这一节将购物车所有的接口封装成接口API函数

加入购物车-模板分析和渲染

页面关联Store对象
加入购物车和立即购买区分处理

产品需求
1，如果点击的是加入购物车，需要将当前商品加入到购物车
2．如果点击的是立即购买，需要跳转到结算支付页面，立即购买该商品
3．如果是立即购买，不支持购买多个商品

展示购物车购买数量

限制用户的购买数量（0~200）,给弹窗确认按钮绑定点击事件，事件处理函数里首先判断用户是否登录（token），如果登录了判断是加入购物车还是立即购买（buyNow）,如果立即购买：跳转到结算（带上blessing和goodsId）,加入购物车就是获取该商品的详细信息，code为200就是成功给个toast提示，之后关闭弹窗（setData）

购物车关联Store对象

获取并渲染购物车列表

实现步骤：
1．导入封装好的获取列表数据的API函数
2．在onShow钩子中，根据产品的需求，处理页面的提示
3，在获取到数据以后，使用后端返回的数据对页面进行渲染

更新商品的购买状态

实现步骤：
1，导入封装好的获取列表数据的API函数
2．当点击切换切换商品状态的时候，调用requpdateGoodStatus，并传参
3．在更新成功，将本地的数据一并改变。

控制全选按钮的选中状态

实现全选和全不选功能

更新商品购买数量思路分析
更新商品的购买数量

实现步骤：
1，给输入框绑定监听值是否改变的事件，同时传递商品的I0id和商品的购买之前的购买数量num
2．在事件处理程序中获取到最新的数据，然后进行差值的运算
3，发送请求即可

更新商品购买数量防抖

购物车商品合计

删除购物车中的商品

订单结算

配置分包并跳转到结算页面+接口API

商品结算

获取收货地址

更新收货地址功能

实现步骤：
1．在app.js中定义全局共享的数据globalData.address
2，点击箭头，携带参数跳转到收货地址页面，标识是从订单结算页面进入
3，在选择收货地址成功以后，将数据存储到globalData，address中，然后返回到订单结算页面。
4，在订单结算页面判断globalData.address是否存在收货地址数据，如果存在则渲染