小程序定制

一、定制方式

• 页面定制：基于模板修改或新增页面，可调整布局、文案、交互
• 组件开发：自定义组件扩展UI能力，支持插槽、事件、属性
• 功能扩展：通过API对接扩展业务逻辑，与后端服务联动
• 主题定制：修改app.wxss中的CSS变量实现品牌色、字体等统一

二、开发环境

• 微信开发者工具（最新稳定版），编译设置中开启 ES6 转 ES5 与样式补全
• Node.js 16 及以上，用于构建 npm 依赖与运行工程化脚本
• 已注册并通过认证的小程序 AppID
• 看店通后台的开发者凭证，用于服务端调用 OpenAPI

首次开发需在微信公众平台注册小程序并完成主体认证，取得 AppID 与 AppSecret。小程序的 AppSecret 只能保存在服务端，绝不能写进小程序代码——小程序包体可以被反编译，写进去等同于公开。同理，看店通的 AppSecret 也只在服务端使用，小程序前端只与自己的后端通信，详见API 鉴权说明。

调试时优先使用真机预览。模拟器与真机在以下几处差异明显：滚动惯性与回弹、position: sticky 的表现、图片解码时机、以及支付与授权类接口的行为。只在模拟器上验证通过就提审，真机上容易出现滚动、支付或授权类差异。

三、目录结构说明

小程序采用模块化目录：pages/ 存放页面、components/ 存放自定义组件、utils/ 存放工具函数、api/ 存放接口封装、store/ 存放全局状态。app.js 为入口文件，app.json 配置页面路由、分包与全局窗口样式，新增页面必须在 pages 数组中注册，否则不会被编译进包。

微信对主包有 2MB 的体积限制，整包不超过 20MB。商城类小程序很容易超限，控制体积的三个办法是：把营销活动页、订单售后页等低频模块拆成分包；图片一律放 CDN 不打进包里；定期清理没有被引用的组件与图片。修改基础组件前请先确认它被哪些页面引用，商城模板中的商品卡片、价格标签、地址选择器往往被十几个页面共用，改坏一处会波及全站。

四、与后端对接

小程序通过 wx.request 调用后端接口，域名必须提前在微信公众平台的「开发设置 → 服务器域名」中配置为合法域名，且只能是 HTTPS。建议做统一的请求封装，集中处理登录态注入、错误码分发、loading 状态与超时重试，不要在每个页面里各写一遍。

登录流程是：小程序调用 wx.login 拿到临时 code，传给自己的后端；后端用 code 加 AppSecret 向微信服务器换取 openid 与 session_key；后端生成自有的登录态令牌返回给小程序。session_key 必须留在后端，不能下发给前端，它是解密用户手机号等敏感数据的密钥。前端只持有后端签发的登录态令牌，并在令牌过期时重新走一遍登录流程。

五、发布与审核

开发完成后在微信开发者工具中上传代码，在公众平台提交审核，通过后手动发布。首次审核通常 1 至 3 个工作日，后续版本一般更快。建议使用体验版让业务方先验收，避免审核通过后才发现功能不对又要重新走一轮。

电商类小程序被驳回的高频原因有四个：类目与实际经营内容不符（卖食品却选了日用百货类目）；页面出现「最」「第一」「国家级」等《广告法》禁用词；诱导分享的文案与交互；测试账号无法登录导致审核员看不到核心功能。提审前请准备好可用的测试账号与测试商品，并在备注里写清楚体验路径。涉及直播、医疗器械、食品等特殊类目还需补充资质，详见小程序审核合规。

六、多端适配

看店通支持微信、支付宝、抖音、快手等多端小程序。各端 API 存在差异，常见的坑包括：支付调起方式完全不同；抖音端没有 wx.getUserProfile 对应能力，用户信息获取路径不一样；支付宝的分享与转发能力受限；各端对 canvas 与自定义导航栏的支持程度不一。

推荐的做法是抽一层平台适配层，把支付、登录、分享、定位这四类差异最大的能力封装成统一接口，业务代码只调用适配层，不直接调用平台 API。这样新增一端时只需补一份适配实现，而不用翻遍所有业务页面。样式上尽量使用 rpx 与 Flex 布局，少用绝对定位，可以省掉大量跨端调试的时间。

七、延伸阅读

服务端能力扩展见插件开发；接口清单见API 接口文档；认证与签名规则见API 鉴权说明。