信支付在 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;
}

總結建議