第11章：微信小程序电商商城进阶实战

微信小程序入门与实战第11章：实战项目三：电商商城小程序（进阶篇）本章目录01项目概述与需求分析了解电商商城小程序进阶版的项目背景和核心功能需求02技术选型与架构设计选择合适的技术栈，并设计项目的整体架构03核心功能实现详解深入讲解登录、支付、订单流转及订阅消息实现04实战开发与总结从零开发进阶版小程序，并进行总结回顾05课后实操任务布置课后实操任务，巩固所学知识项目概述与需求分析项目背景在基础商城基础上，增加用户登录、地址管理、支付集成及订单流转等核心功能，构建完整电商闭环。核心功能需求用户登录：微信授权登录，快速获取用户信息地址管理：支持添加、修改、删除收货地址微信支付：集成支付接口，实现订单支付功能订单流转：全流程状态更新与可视化展示订阅消息：订单状态变更时自动推送通知电商商城小程序进阶版界面预览技术选型与架构设计项目架构示意图项目架构核心组件小程序前端：负责UI展示和用户交互，直接触达用户。云数据库/云存储：存储用户信息、订单数据及商品图片等静态资源。云函数：处理业务逻辑（如登录、支付签名）及订单状态更新。微信支付接口：提供安全、便捷的支付能力支撑。关键技术选型前端框架：微信小程序原生框架，确保性能与体验最优。后端服务：小程序云开发，无需管理服务器，快速迭代。扩展能力：集成微信支付API与订阅消息API，完善服务闭环。核心功能实现详解-用户登录与收货地址管理用户登录认证•调用wx.cloud.callFunction实现云函数登录•获取用户OpenID与信息，持久化存储至云数据库收货地址管理•调用wx.chooseAddressAPI获取地址信息•关联用户ID存储地址，支持个人中心展示与管理核心代码实现示例(JavaScript)//用户登录逻辑wx.cloud.callFunction({name:'login',success:(res)=>{console.log('登录成功',res.result.openid);//存储用户信息至数据库...}});//获取收货地址wx.chooseAddress({success:(res)=>{console.log('地址信息',res);//存储地址至数据库...}});总结：通过云开发能力，我们高效实现了用户身份认证与数据持久化，利用原生API提升了用户体验。核心功能实现详解-微信支付集成微信支付业务流程1.统一下单小程序调用云函数，向微信支付接口发起请求获取prepay_id2.支付签名云函数使用prepay_id和其他参数生成支付签名3.发起支付小程序端使用签名调用wx.requestPaymentAPI发起支付4.支付结果通知微信支付平台通过回调通知云函数支付结果5.订单状态更新云函数根据支付结果更新订单状态代码示例：小程序端支付调用//小程序端调用云函数发起支付wx.cloud.callFunction({name:'pay',data:{orderId:'订单ID'},success:(res)=>{const{payment}=res.result;wx.requestPayment({...payment,success:(res)=>{console.log('支付成功',res);}});}});注意：支付签名必须在服务端（云函数）完成，严禁在客户端暴露密钥。核心功能实现详解-订单状态流转待支付待发货待收货已完成已取消状态定义说明•待支付：用户提交订单后，尚未支付|待发货：用户支付成功后，商家尚未发货•待收货：商家发货后，用户尚未确认收货|已完成：用户确认收货后，订单完成状态更新核心代码实现asyncupdateOrderStatus(orderId,status){awaitwx.cloud.database().collection('orders').doc(orderId).update({data:{status}});}核心功能实现详解-订阅消息申请与发送订阅消息申请流程1.申请模板：在小程序管理后台申请订阅消息模板。2.调用API：调用wx.requestSubscribeMessage申请订阅。3.保存状态：将用户订阅状态存储至云数据库。订阅消息发送流程1.触发事件：订单状态变更时触发发送消息事件。2.调用API：云函数调用subscribeMessage.send。核心代码实现//申请用户订阅wx.requestSubscribeMessage({tmplIds:['模板ID'],success:(res)=>{console.log('用户订阅成功',res);//存储订阅状态...}});//发送订阅消息（云函数）wx.cloud.openapi.subscribeMessage.send({touser:'用户openid',templateId:'模板ID',data:{/*消息内容*/}});实战开发-项目初始化与配置创建项目1.打开微信开发者工具，点击“+”号。2.选择“小程序”项目类型。3.输入项目名称和本地目录路径。4.点击“创建”完成初始化。配置app.json(页面路径与窗口样式){"pages":["pages/index/index",...],"window":{"navigationBarTitleText":"电商商城","navigationBarBackgroundColor":"#007AFF"}}初始化云开发(app.js)App({onLaunch(){wx.cloud.init({env:'your-env-id',traceUser:true});}});提示：云环境ID需在微信公众平台获取，确保替换为您自己的真实ID以保证功能正常运行。实战开发-核心代码实现用户登录模块(login.js)Page({data:{userInfo:null},onLoad(){//页面加载时检查状态this.checkLoginStatus();}});●核心逻辑：初始化加载时自动检查登录状态；通过onGetUserInfo接口获取用户授权信息并完成登录流程。订单管理模块(order.js)Page({onLoad(){//获取订单列表this.getOrders();},asynconPay(e){//发起支付//调用支付接口...}});●核心逻辑：加载时从云数据库拉取订单数据；封装onPay处理支付逻辑，同步更新订单状态流转。代码整合要点：将用户登录、支付、订单状态管理等逻辑模块化封装，确保数据流向清晰，实现小程序功能闭环。常见问题排查Q1:用户登录失败？检查云开发环境是否初始化成功，云函数是否部署正确，用户是否已授权。Q2:微信支付签名错误？检查支付参数是否正确，商户号、API密钥是否配置正确，云函数的签名逻辑是否正确。Q3:订单状态无法更新？检查云数据库的orders集合权限设置是否正确，订单ID是否正确，云函数的更新逻辑是否正确。Q4:订阅消息发送失败？检查订阅消息模板是否已申请，用户是否已订阅，云函数的发送逻辑是否正确。本章总结项目需求与架构设计掌握了电商商城小程序进阶版的整体设计思路和技术选型。用户登录与地址管理学会使用小程序云开发实现用户登录和收货地址管理功能。微信支付集成与签名掌握微信支付完整业务流程及后端云函数签名的实现技巧。订单状态流转设计学会设计和实现订单状态的流转逻辑，确保业务闭环。订阅消息申请与发送掌握小程序订阅消息的申请流程及消息推送方法。进阶版实战开发完成综合运用所学知识，掌握更复杂的小程序开发技巧。课后实操任务：完善电商商城小程序进阶版任务步骤01.添加商品评价功能在订单详情页添加评价按钮，支持用户对已购商品进行评分和文字评价。

02.实现商品收藏功能在商品详情页添加收藏按钮，并在个