UniAppH5微信公众号支付集成指南

在开始集成微信公众号支付之前，确保已完成以下准备工作：

1. 在微信公众平台注册并获取AppID。

2. 完成微信支付商户平台的注册与配置。

3. 获取并保存商户密钥。

接下来，我们将介绍如何通过封装的方法来实现支付功能。该方法接收URL、数据和回调函数作为参数，主要逻辑如下：

function initiatePayment(apiUrl, requestData, successCallback) {
    uni.request({
        url: apiUrl, // API接口地址
        method: 'POST',
        header: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Authorization': 'Bearer ' + uni.getStorageSync('accessToken')
        },
        data: requestData,
        success: (response) => {
            if (response.statusCode === 200) {
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        appId: response.data.appId, // 微信公众号ID
                        timeStamp: response.data.timeStamp, // 时间戳
                        nonceStr: response.data.nonceStr, // 随机字符串
                        package: response.data.package, // 数据包
                        signType: response.data.signType, // 签名类型
                        paySign: response.data.paySign // 支付签名
                    },
                    (wxResponse) => {
                        console.log('微信支付结果:', wxResponse);
                        if (wxResponse.err_msg === 'get_brand_wcpay_request:ok') {
                            successCallback(wxResponse);
                        }
                    }
                );
            }
        }
    });
}

上述代码中，initiatePayment 函数用于发起支付请求。当用户点击支付按钮时，可以通过调用此函数来启动支付流程，例如：

bindChange() {
    const self = this;
    const requestData = {
        goldCoinId: self.selectedCoinId // 假设这是选择的金币ID
    };
    initiatePayment('/api/recharge', requestData, (result) => {
        if (result.errMsg === 'requestPayment:ok') {
            self.updateUserInfo(); // 更新用户信息
        }
    });
}

在实际应用中，需要将API URL和请求数据替换为实际的值，并根据业务需求调整响应处理逻辑。

最后，在UniApp项目中部署上述代码，并确保在微信内置浏览器中访问以启用支付功能。本地开发或使用微信开发者工具测试时，可能无法正常调用支付功能，因为此功能仅支持在微信环境中运行。

部署完成后，用户在页面上点击支付按钮即可触发微信支付流程，完成支付操作。