|
🧾 微信小程序/H5 调起确认收款界面详解(附代码+平台兼容处理)
场景:用户点击「收款」按钮后,系统调起微信收款组件,用户确认后完成转账或收款流程。该能力广泛用于现金营销、二手交易、佣金报酬、企业赔付等业务场景中。
具体见官方文档
💡 背景
微信官方在前俩月更新了 requestMerchantTransfer 接口,允许微信小程序与H5 页面调起一个用户确认收款的界面,用户在完成确认后即可完成转账。
该 API 可用于实现:
- 商户对用户打款时让用户确认(平台代发)
- 用户向另一个用户确认收款(点对点收款)
- 钱包提现类应用(先展示转账详情 → 用户同意 → 发起打款)
...
<hr>⚙️ 使用前提
✅ 申请前提:
- 需要开通微信支付商户平台的 商家转账到零钱 产品权限;
- 绑定到小程序或公众号;
- 需要设置 mchId(商户号)、appId(当前小程序/公众号的 appid)、package(订单详情包)。
<hr>🔄 支持的平台:
平台是否支持调用方式说明小程序端✅ 支持原生 API wx.requestMerchantTransfer微信内 H5✅ 支持通过 WeixinJSBridge.invoke() 调用外部浏览器❌ 不支持必须在微信内打开网页PC 端微信❌ 不支持仅支持手机微信端另外官方提示:低版本微信客户端、低版本小程序基础库 均不支持 requestMerchantTransfer 方法,需做好兼容性处理。
APP 另见官方文档,有 Android 和 iOS,这里不做详细说明
<hr>🔧 核心代码实现
以下使用 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('你的微信版本过低,请更新至最新版本。'); } } }); }); }}<hr>🔍 解读(关键点说明)
参数/逻辑含义/说明mchId微信商户平台下的商户号appId小程序或公众号的 AppIDpackage微信支付平台返回的打款详情(经过加密)wx.requestMerchantTransfer小程序端内置 API,发起转账确认流程WeixinJSBridge.invoke()微信 H5 端的 JS 桥调用,用于唤起支付、收款等界面checkJsApi()检查当前微信版本是否支持该 JS APIerr_msg: ok表示用户确认了收款,才会执行成功逻辑<hr>⚠️ 常见问题 & 踩坑提示
- 小程序内请确保 AppID 已配置转账权限,否则会报「无权限」;
- H5 调用必须在 wx.ready() 中进行,且前提是先注入 JS-SDK 签名;
- 微信版本低于 7.0.20 可能不支持该能力;
- 请勿在非微信浏览器中测试 H5 端,WeixinJSBridge 无法注入;
- package 参数要从后端获取,且务必注意加密与签名校验;
<hr>📚 参考链接:
微信开放文档:requestMerchantTransfer |
|