微信 JS-SDK chooseWXPay 与 WeixinJSBridge.invoke

微信 JS-SDK chooseWXPay 与 appId 关系说明文档

1. 概述

在微信 JS-SDK 【res.wx.qq.com/open/js/jwe... appId 配置。即使在调用 wx.chooseWXPay() 时没有显式传递 appId，它仍然需要在 wx.config() 阶段正确配置 appId，否则支付会失败。

2. 核心流程分析

2.1 config 阶段配置

当调用 wx.config() 方法时：

javascript 复制代码

wx.config({
    appId: 'your_app_id',  // 必须配置
    timestamp: timestamp,
    nonceStr: nonceStr,
    signature: signature,
    jsApiList: ['chooseWXPay']
});

在 jweixin-1.6.0.js 源码中：

javascript 复制代码

config: function(e) {
    C("config", h = e);  // 将配置参数保存到全局变量 h 中
    // ...
}

2.2 chooseWXPay 调用过程

当调用 wx.chooseWXPay() 时：

javascript 复制代码

wx.chooseWXPay({
    timestamp: payTimestamp,
    nonceStr: payNonceStr,
    package: package,
    signType: 'MD5',
    paySign: paySign
});

在 jweixin-1.6.0.js 源码中：

javascript 复制代码

chooseWXPay: function(e) {
    k(a.chooseWXPay, x(e), e),
    B({
        jsApiName: "chooseWXPay"
    })
},

2.3 参数处理流程

chooseWXPay 调用 k 函数
k 函数调用 P 函数处理参数
P 函数将全局配置的 appId 添加到参数中

javascript 复制代码

function k(n, e, i) {
    r.WeixinJSBridge ? WeixinJSBridge.invoke(n, P(e), function(e) {
        V(n, e, i)
    }) : C(n, i)
}

function P(e) {
    return (e = e || {}).appId = h.appId,  // 从全局变量 h 中获取 appId
    e.verifyAppId = h.appId,
    e.verifySignType = "sha1",
    e.verifyTimestamp = h.timestamp + "",
    e.verifyNonceStr = h.nonceStr,
    e.verifySignature = h.signature,
    e
}

3. 图解说明

lua 复制代码

+------------------+     +------------------+     +------------------+
|   wx.config()    |     |  wx.chooseWXPay()|     | 微信客户端API调用 |
|                  |     |                  |     |                  |
| 设置配置参数     |     | 设置支付参数     |     |                  |
| (包含appId)      |     | (不含appId)      |     |                  |
+--------+---------+     +--------+---------+     +--------+---------+
         |                        |                          |
         | 保存到全局变量 h       |                          |
         +----------->------------+                          |
                                    |                          |
                                    | 调用 k 函数              |
                                    +------------->----------+
                                                         |
                                                         | 调用 P 函数处理参数
                                                         +----------->---------+
                                                                               |
                                                                               | 添加 appId 等验证信息
                                                                               +----------->---------+
                                                                                             |
                                                                                             | 调用微信 JSBridge.invoke
                                                                                             +----------->---------+
                                                                                                           |
                                                                                                           v
                                                                                             +----------------------+
                                                                                             | 微信客户端处理支付请求 |
                                                                                             +----------------------+

4. 关键代码路径

配置保存：

javascript 复制代码

config: function(e) {
    C("config", h = e);  // h 是全局变量，保存 config 参数
}

支付调用：

javascript 复制代码

chooseWXPay: function(e) {
    k(a.chooseWXPay, x(e), e)  // 调用 k 函数
}

参数处理：

javascript 复制代码

function k(n, e, i) {
    r.WeixinJSBridge ? WeixinJSBridge.invoke(n, P(e), function(e) {
        V(n, e, i)  // 调用 P 函数处理参数
    }) : C(n, i)
}

function P(e) {
    return (e = e || {}).appId = h.appId,  // 从全局 h 中获取 appId
    // ... 其他验证参数
    e
}

wx.chooseWXPay 调用链

less 复制代码

wx.chooseWXPay(parameters)
        ↓
k("getBrandWCPayRequest", x(parameters), callback)
        ↓
WeixinJSBridge.invoke("getBrandWCPayRequest", P(x(parameters)), callback)
        ↓
微信客户端处理支付请求

直接调用 WeixinJSBridge.invoke

arduino 复制代码

WeixinJSBridge.invoke("getBrandWCPayRequest", parameters, callback)
        ↓
微信客户端处理支付请求

5. 常见问题及解决方案

5.1 问题：config 中未配置 appId 导致支付失败

原因：P 函数从全局变量 h 中获取 appId，如果 config 阶段未配置，则 h.appId 为 undefined

解决方案：

javascript 复制代码

// 正确的配置方式
wx.config({
    debug: false,
    appId: 'your_app_id',  // 必须配置
    timestamp: timestamp,
    nonceStr: nonceStr,
    signature: signature,
    jsApiList: ['chooseWXPay']
});

// 正确的支付调用方式
wx.chooseWXPay({
    timestamp: payTimestamp,
    nonceStr: payNonceStr,
    package: package,
    signType: 'MD5',
    paySign: paySign,
    success: function(res) {
        // 支付成功回调
    },
    fail: function(res) {
        // 支付失败回调
    }
});

6. 总结

虽然在 wx.chooseWXPay() 调用中没有显式传递 appId，但微信 JS-SDK 通过全局配置和参数处理机制，在底层自动将 appId 添加到支付请求中。因此，必须确保在 wx.config() 阶段正确配置 appId，否则支付功能将因权限验证失败而无法使用。