uniapp微信H5支付开发需关注核心目录与流程：pages目录下存放支付页面（如支付页、回调页），utils或common目录封装微信签名、参数处理等工具函数，api目录对接后端统一下单接口获取支付参数，manifest.json需配置微信小程序appid及H5支付授权域名，确保回调页面（如pay/notify）在白名单内，流程为：前端发起支付请求→后统一下单返回prepay_id→前端调用微信H5支付JSAPI→处理支付结果回调，完成状态同步与页面跳转，关键点包括参数配置、安全校验及回调处理，确保支付流程闭环。
uniapp微信H5支付目录配置全攻略：从原理到实践
在移动端开发中,支付功能是电商、服务等应用的核心环节，Uniapp作为一款“一次开发，多端发布”的跨平台框架，支持快速集成微信支付，但不少开发者在对接微信H5支付时，会因“目录配置”问题导致支付失败——比如提示“商户平台产品配置中未找到此支付场景对应的配置”或“目录未校验通过”，本文将从微信H5支付的目录校验机制出发，详细讲解uniapp项目中微信H5支付目录的配置步骤、常见问题及解决方案，助你顺利打通支付流程。
微信H5支付目录：你必须知道的底层逻辑
微信H5支付是基于微信浏览器的内支付场景,用户在微信内打开H5页面时，通过微信JS-SDK或微信支付中间页完成支付，为确保支付安全，微信对H5支付的发起目录有严格的校验规则，具体包括：
什么是支付目录？
支付目录是指发起H5支付请求的页面完整URL路径（不含参数），需满足“协议+域名+路径”的格式。
- 合法示例：
https://www.yourdomain.com/pay/order - 非法示例：
https://www.yourdomain.com/pay/order?id=123（含参数）、http://www.yourdomain.com/pay/（协议非https）、https://sub.yourdomain.com/pay/（子域名未配置）
目录校验的核心规则
微信会校验发起支付请求的页面URL是否与商户平台配置的“H5支付目录”匹配，规则如下：
- 必须配置：在微信商户平台的“产品中心 > 开发配置 > H5支付”中，需提前添加支付目录，支持配置到二级目录（如
/pay/可匹配其所有子目录，如/pay/order、/pay/success）。 - 协议要求：仅支持
https协议，本地测试时需使用微信开发者工具或“微信内调试”功能（微信已对localhost和127.0.0.1放行，但正式环境必须为https）。 - 域名唯一性：支付目录需与H5页面的访问域名完全一致，不支持通配符（如
*.yourdomain.com需分别配置主域名和子域名）。
uniapp项目中微信H5支付目录配置步骤
uniapp开发H5支付时,目录配置涉及“商户平台配置”和“项目代码适配”两部分，需协同完成。
步骤1：微信商户平台配置支付目录
- 登录商户平台：进入微信商户平台，在“产品中心 > 开发配置”中选择“H5支付”。
- 添加支付目录：
- 若H5页面部署在
https://www.yourdomain.com，且支付页面路径为/pay/h5-pay，则需添加目录：https://www.yourdomain.com/pay/（注意末尾的，微信会校验该目录下的所有子路径）。 - 支持添加多个目录（如测试环境、生产环境需分别配置），最多可配置10个。
- 若H5页面部署在
- 提交审核：配置完成后提交审核，审核通过后（通常1-2个工作日）方可生效。
步骤2：uniapp项目目录规划与路由适配
uniapp开发H5时,需确保支付页面的访问路径与商户平台配置的目录一致，避免因路由问题导致校验失败。
项目目录结构示例
假设支付相关页面位于src/pages/pay/目录下，结构如下：
src/
├── pages/
│ ├── pay/
│ │ ├── order.vue // 支付订单页（发起支付的核心页面）
│ │ └── result.vue // 支付结果页
│ └── index.vue // 首页
├── static/
