收货地址实现删除收货地址删除滑块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在获取到数据以后使用后端返回的数据对页面进行渲染实现上拉加载更多功能实现步骤1list.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和商品的购买之前的购买数量num2在事件处理程序中获取到最新的数据然后进行差值的运算3发送请求即可更新商品购买数量防抖购物车商品合计删除购物车中的商品订单结算配置分包并跳转到结算页面接口API商品结算获取收货地址更新收货地址功能实现步骤1在app.js中定义全局共享的数据globalData.address2点击箭头携带参数跳转到收货地址页面标识是从订单结算页面进入3在选择收货地址成功以后将数据存储到globalDataaddress中然后返回到订单结算页面。4在订单结算页面判断globalData.address是否存在收货地址数据如果存在则渲染获取订单详情数据获取立即购买商品数据实现步骤1在页面打开的时候onShow中接受传递的参数并赋值给data中的状态2在getorderInfo函数中判断立即购买商品的id是否存在如果存在调用立即购买的接口3获取数据后然后根据数据并渲染结构即可收集送达时间提交订单请求参数验证1在商品结算页面导入封装好的格式化时间的方法formatTime2.调用formattime传入需要格式化的时问戳优化流程小程序支付梳理小程序支付流程创建平台订单创建平台订单创建成功后服务器返回订单编号编号传递给后端后端获取预支付信息并把这消息加密后返回给客户端加密信息就是支付参数把支付参数传递给 wx.requestPayment方法就能发起支付获取预付单信息发起微信支付支付状态查询分享功能分包整理订单列表梳理订单列表模块代码代码优化代码优化与代码质量检测项目上线-演示上线流程