微信 H5 支付开发实战记录（含 Vue 和 Nginx 配置）

发布时间: 2025-07-30

微信支付在 H5 页面中有一定的接入门槛和限制，本文记录了我在开发微信 H5 支付过程中的一些关键点与踩坑经验，适合使用 Vue 框架开发的项目参考

微信支付方式对比 #

微信支付主要有两种 H5 接入方式：

方式一：微信官方 H5 支付（H5 场景支付） #

• 优点：

  • 不需要服务号，也不需要获取 openid。
  • 可以直接在移动端浏览器中唤起微信支付。

• 缺点：

  • 需要平台审核，流程较复杂。
  • 商户需通过微信支付的 H5 支付产品审核。

方式二：JSAPI 支付（公众号支付） #

• 优点：

  • 注册微信支付商户平台后默认可用。
  • 配合公众号能力更强。

• 缺点：

  • 必须绑定一个认证的服务号（300 元/年）。
  • 需要用户授权获取 openid。

JSAPI 接入配置步骤 #

参考：接入前准备，未测试是否支持 hash（http://example.com/h5/#/case） 地址匹配。

如果选择使用第二种方式（JSAPI 支付），需要以下几个配置步骤：

1. 配置支付授权目录（JSAPI） #

路径：微信支付商户平台 --> 产品中心 --> 开发配置 --> JSAPI 支付授权目录

• 必须填写精确目录，如：

  http://example.com/h5/

• 设置后一般5分钟内生效

2. 配置网页授权域名（用于获取 openid） #

路径有两种入口：

• 设置与开发 -> 开发接口管理 -> 网页服务 -> 网页授权

• 设置与开发 -> 账号设置 -> 功能设置 -> 网页授权域名

• 网页授权域名：用于获取 openid

• JS接口安全域名：用于使用如分享、扫码、上传图片等 jssdk 能力

Vue 项目接入中的坑点 #

使用 Vue 构建的 H5 页面默认采用 hash 模式路由，例如：

http://example.com/h5/#/case?no=202501010101

这种地址格式将无法通过微信支付授权校验，会提示：“该域名未配置授权”。

解决方案：改为 History 路由模式 #

微信的授权目录匹配的是实际 URL 路径，不能包含 #。所以需将 Vue 路由改为 history 模式：

const router = new VueRouter({
  mode: 'history',
  routes
})

新问题：Nginx 显示页面空白 #

当使用 history 模式时，刷新页面会导致页面找不到资源。此时需要修改 Vue Router 加上 base 路径，并配合 Nginx 配置重写路由：

Vue Router 配置： #

const router = new VueRouter({
  mode: 'history',
  base: '/h5/',
  routes
})

Nginx 配置示例 #

确保代理 /h5/ 路径时，能正确处理静态资源和前端路由：

location /h5 {
    # 静态资源根目录
    alias /www/h5;  # Windows 路径使用正斜杠或双反斜杠

    # 处理静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        access_log off;
    }

    # 前端路由支持 - 所有非静态资源的请求都返回 index.html
    try_files $uri $uri/ /h5/index.html;
}

总结建议 #