技能介绍

解决什么问题

微信小程序商城看似是一个“页面集合”，真正落地时会遇到三类工程问题：一是页面数量多，首页、商品详情、购物车、结算、订单列表、个人中心等各自承担不同交互；二是交互细节分散，SKU 多属性联动、购物车全选联动、订单状态按钮切换、分享海报合成都散落在不同页面；三是原生小程序的工程约束严格，.js、.wxml、.wxss、.json 四件套必须齐备，wx:key、mode="widthFix"、页面栈层级都容易踩坑。

技能如何工作

该技能把 UrShop 官方 Gitee 仓库中的真实小程序前端代码提炼成一套页面规范，定位是纯前端页面与交互实现，不涉及 API 对接。它以原生微信小程序为基础，覆盖以下核心能力：

页面四件套规范：每个页面都要求包含 .js、.wxml、.wxss、.json，分别对应逻辑、结构、样式与配置。
核心页面结构：首页采用分店信息、搜索栏、轮播图、公告栏、分类入口、商品推荐、服务保障栏的纵向布局；商品详情页覆盖图片轮播、会员价/普通价/原价、SKU 参数表、数量选择、底部操作栏、富文本详情；购物车支持选中、全选联动、数量 1~99 控制、删除二次确认与底部汇总。
订单闭环：结算页提供收货地址、商品清单、运费、备注、微信支付与订单确认弹窗；订单列表按待付款、待发货、待收货、已完成区分 Tab 与按钮组；订单详情只读展示状态、地址、商品与订单信息。
自定义组件：dialogModal 替代 wx.showModal 做统一弹窗；painter 负责 Canvas 海报绘制；shareBox 将商品图片、小程序码、农历日历、天气与文案合成为 700×1516 海报。
模板与样式复用：swiper、product-view2、order-state、my-view1 等模板集中在 templates/ 目录；公共颜色、工具类通过 style/ 与 app.wxss 导入。

适用边界与注意点

它适合需要快速对齐成熟电商小程序页面结构和组件交互的前端工程师，尤其是希望复用 UrShop 页面布局、订单状态机、海报组件的团队。但它不提供后端接口、支付落地、登录鉴权实现，也不能直接完成商品数据获取。接入时需自行准备 UrShop 后端部署包，并注意原生小程序的工程约束：数组更新要用字符串 key、列表必须设置 wx:key、图片保持 mode="widthFix"、navigateTo 页面栈不超过 10 层，复杂操作使用 redirectTo 或 reLaunch。