wxmp_pay_h5

微信公众号 H5 充值页面

这是一个基于 Vue.js 开发的微信公众号 H5 充值页面，包含用户搜索和充值两个页面。

功能特性

• 用户搜索页面：通过 ID 搜索用户
• 充值页面：选择充值金额，支持支付宝支付
• 响应式设计，适配各种移动设备
• 美观的 UI 界面，专业的用户体验

技术栈

• Vue.js 2.x
• Vue Router
• Vant UI 组件库
• Less CSS 预处理器

项目结构

src/
  ├── assets/        # 静态资源
  ├── components/    # 公共组件
  ├── router/        # 路由配置
  ├── views/         # 页面组件
  │   ├── Search.vue    # 搜索用户页面
  │   └── Recharge.vue  # 充值页面
  ├── App.vue        # 根组件
  └── main.js        # 入口文件

开发说明

安装依赖

npm install

启动开发服务器

npm run serve

构建生产版本

npm run build

打包配置说明（包含 6 个版本）

• 配置文件路径：src/utils/config.js
• 需调整的两个开关：
  • PAYMENT_TYPE（支付方式，'wechat' | 'alipay'）位于 src/utils/config.js#L9-10
  • ALI_CUSTOM（是否开启“任意金额”，仅在支付宝时生效）位于 src/utils/config.js#L13

版本清单与构建步骤

• 微信支付-需要登录(有金币兑换)

  • 分支：该版本在main分支，请先切换到对应分支
  • 设置：PAYMENT_TYPE = 'wechat'
  • 任意金额：不适用（仅支付宝）
  • 构建：npm run build

• 微信支付-无需登录(无金币兑换)

  • 分支：该版本在master分支，请先切换到对应分支
  • 设置：无需配置
  • 构建：npm run build

• 支付宝支付-需要登录(有金币兑换)-无任意金额

  • 分支：该版本在main分支，请先切换到对应分支
  • 设置：PAYMENT_TYPE = 'alipay'，ALI_CUSTOM = false
  • 构建：npm run build

• 支付宝支付-需要登录(有金币兑换)-有任意金额

  • 分支：该版本在main分支，请先切换到对应分支
  • 设置：PAYMENT_TYPE = 'alipay'，ALI_CUSTOM = true
  • 构建：npm run build

• 支付宝支付-无需登录(无金币兑换)-无任意金额

  • 分支：该版本在alipay分支，请先切换到对应分支
  • 设置：无需配置
  • 构建：npm run build

• 支付宝支付-无需登录(无金币兑换)-有任意金额

  • 分支：该版本在alipay-anymoney分支，请先切换到对应分支
  • 设置：无需配置
  • 构建：npm run build

说明与建议

• 金币兑换：登录版的“金币兑换”由后端登录态返回的权限 canExchange 控制，无需额外打包开关；无需登录版本不包含兑换入口。
• 产物命名：每次构建会生成 dist/，建议按以下名称保存归档，便于区分：
  • 微信支付-无需登录(无金币兑换)
  • 微信支付-需要登录(有金币兑换)
  • 支付宝支付-无需登录(无金币兑换)-无任意金额
  • 支付宝支付-无需登录(无金币兑换)-有任意金额
  • 支付宝支付-需要登录(有金币兑换)-无任意金额
  • 支付宝支付-需要登录(有金币兑换)-有任意金额