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