微信小程序/H5 调起确认收款界面

技术分享 10个月前 (04-19) 0 999+

关注

🧾 微信小程序/H5 调起确认收款界面详解（附代码+平台兼容处理）

场景：用户点击「收款」按钮后，系统调起微信收款组件，用户确认后完成转账或收款流程。该能力广泛用于现金营销、二手交易、佣金报酬、企业赔付等业务场景中。

具体见官方文档

💡 背景

微信官方在前俩月更新了 requestMerchantTransfer 接口，允许微信小程序与H5 页面调起一个用户确认收款的界面，用户在完成确认后即可完成转账。

该 API 可用于实现：

商户对用户打款时让用户确认（平台代发）
用户向另一个用户确认收款（点对点收款）
钱包提现类应用（先展示转账详情 → 用户同意 → 发起打款）
...

⚙️ 使用前提

✅ 申请前提：

需要开通微信支付商户平台的 商家转账到零钱 产品权限；
绑定到小程序或公众号；
需要设置 mchId（商户号）、appId（当前小程序/公众号的 appid）、package（订单详情包）。

🔄 支持的平台：

平台	是否支持	调用方式说明
小程序端	✅ 支持	原生 API `wx.requestMerchantTransfer`
微信内 H5	✅ 支持	通过 `WeixinJSBridge.invoke()` 调用
外部浏览器	❌ 不支持	必须在微信内打开网页
PC 端微信	❌ 不支持	仅支持手机微信端

另外官方提示：低版本微信客户端、低版本小程序基础库均不支持 requestMerchantTransfer 方法，需做好兼容性处理。

APP 另见官方文档，有 Android 和 iOS，这里不做详细说明

🔧 核心代码实现

以下使用 uniapp 为兼容小程序 + 微信 H5 两端的完整调用方式（复制后更换参数即可使用）：

getMoney(item) {   const that = this;   // 判断平台  也可以使用（// #ifdef MP-WEIXIN    // #endif）   if (app.globalData.platform === 'wx') {     // ✅ 小程序端调用方式     wx.requestMerchantTransfer({       mchId: item.mchid, // 商户号，由微信支付生成并下发       appId: item.appid, // 商户绑定的AppID（企业号corpid即为此AppID），由微信生成，可在公众号后台查看       package: item.package_info,  // 对应发起转账接口应答参数中的 package_info（仅当转账单据状态为WAIT_USER_CONFIRM: 待收款用户确认时才返回），用于唤起用户确认收款页面。       success(res) {         console.log('用户确认收款成功', res);         uni.showToast({           title: '收款成功',           icon: 'success'         });         that.getdata(false, 1); // 刷新数据       },       fail(res) {         console.error('用户确认收款失败', res);         uni.showToast({           title: '收款失败',           icon: 'error'         });       },       complete(res) {         console.log('请求完成', res);       }     });   } else if (app.globalData.platform === 'h5') {   // 也可以使用（// #ifdef H5   // #endif）     // ✅ H5调用方式（确保在微信环境中）     wx.ready(function() {       wx.checkJsApi({         jsApiList: ['requestMerchantTransfer'],         success: function(res) {           if (res.checkResult['requestMerchantTransfer']) {             // H5端通过 WeixinJSBridge 调用             WeixinJSBridge.invoke('requestMerchantTransfer', {               mchId: item.mchid,               appId: item.appid,               package: item.package_info,             }, function(res) {               if (res.err_msg === 'requestMerchantTransfer:ok') {                 uni.showToast({                   title: '收款成功',                   icon: 'success'                 });                 that.getdata();  // 刷新数据               } else {                 console.warn('用户取消或收款失败', res);               }             });           } else {             alert('你的微信版本过低，请更新至最新版本。');           }         }       });     });   } }

🔍 解读（关键点说明）

参数/逻辑	含义/说明
`mchId`	微信商户平台下的商户号
`appId`	小程序或公众号的 AppID
`package`	微信支付平台返回的打款详情（经过加密）
`wx.requestMerchantTransfer`	小程序端内置 API，发起转账确认流程
`WeixinJSBridge.invoke()`	微信 H5 端的 JS 桥调用，用于唤起支付、收款等界面
`checkJsApi()`	检查当前微信版本是否支持该 JS API
`err_msg: ok`	表示用户确认了收款，才会执行成功逻辑