微信小程序/H5 调起确认收款界面
笔记哥 /
04-18 /
41点赞 /
0评论 /
146阅读
## 🧾 微信小程序/H5 调起确认收款界面详解（附代码+平台兼容处理）
> 场景：用户点击「收款」按钮后，系统调起微信收款组件，用户确认后完成转账或收款流程。该能力广泛用于现金营销、二手交易、佣金报酬、企业赔付等业务场景中。
## 具体见官方文档
## 💡 背景
微信官方在前俩月更新了 **requestMerchantTransfer** 接口，允许**微信小程序**与**H5 页面**调起一个用户确认收款的界面，用户在完成确认后即可完成转账。
该 API 可用于实现：
- 商户对用户打款时让用户确认（平台代发）
- 用户向另一个用户确认收款（点对点收款）
- 钱包提现类应用（先展示转账详情 → 用户同意 → 发起打款）
...
## ⚙️ 使用前提
### ✅ 申请前提：
- 需要开通微信支付商户平台的 **商家转账到零钱** 产品权限；
- 绑定到小程序或公众号；
- 需要设置 `mchId`（商户号）、`appId`（当前小程序/公众号的 appid）、`package`（订单详情包）。
## 🔄 支持的平台：
| 平台 | 是否支持 | 调用方式说明 |
| --- | --- | --- |
| 小程序端 | ✅ 支持 | 原生 API `wx.requestMerchantTransfer` |
| 微信内 H5 | ✅ 支持 | 通过 `WeixinJSBridge.invoke()` 调用 |
| 外部浏览器 | ❌ 不支持 | 必须在微信内打开网页 |
| PC 端微信 | ❌ 不支持 | 仅支持手机微信端 |
>
>
> 另外官方提示：低版本微信客户端、低版本小程序基础库 均不支持 requestMerchantTransfer 方法，需做好兼容性处理。
>
APP 另见官方文档，有 Android 和 iOS，这里不做详细说明
## 🔧 核心代码实现
以下使用 uniapp 为兼容小程序 + 微信 H5 两端的完整调用方式（复制后更换参数即可使用）：
```csharp
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` | 表示用户确认了收款，才会执行成功逻辑 |
## ⚠️ 常见问题 & 踩坑提示
- **小程序内请确保 AppID 已配置转账权限**，否则会报「无权限」；
- **H5 调用必须在 `wx.ready()` 中进行，且前提是先注入 JS-SDK 签名**；
- **微信版本低于 7.0.20 可能不支持该能力**；
- **请勿在非微信浏览器中测试 H5 端，WeixinJSBridge 无法注入**；
- **package 参数要从后端获取，且务必注意加密与签名校验**；
📚 参考链接：
微信开放文档：https://pay.weixin.qq.com/doc/v3/merchant/4012716430
本文来自投稿，不代表本站立场，如若转载，请注明出处：http//www.knowhub.vip/share/2/2369
- 热门的技术博文分享
- 1 . ESP实现Web服务器
- 2 . 从零到一：打造高效的金仓社区 API 集成到 MCP 服务方案
- 3 . 使用C#构建一个同时问多个LLM并总结的小工具
- 4 . .NET 原生驾驭 AI 新基建实战系列Milvus ── 大规模 AI 应用的向量数据库首选
- 5 . 在Avalonia/C#中使用依赖注入过程记录
- 6 . [设计模式/Java] 设计模式之工厂方法模式
- 7 . 5. RabbitMQ 消息队列中 Exchanges(交换机) 的详细说明
- 8 . SQL 中的各种连接 JOIN 的区别总结！
- 9 . JavaScript 中防抖和节流的多种实现方式及应用场景
- 10 . SaltStack 远程命令执行中文乱码问题
- 11 . 推荐10个 DeepSeek 神级提示词，建议搜藏起来使用
- 12 . C#基础：枚举、数组、类型、函数等解析
- 13 . VMware平台的Ubuntu部署完全分布式Hadoop环境
- 14 . C# 多项目打包时如何将项目引用转为包依赖
- 15 . Chrome 135 版本开发者工具（DevTools）更新内容
- 16 . 从零创建npm依赖，只需执行一条命令
- 17 . 关于 Newtonsoft.Json 和 System.Text.Json 混用导致的的序列化不识别的问题
- 18 . 大模型微调实战之训练数据集准备的艺术与科学
- 19 . Windows快速安装MongoDB之Mongo实战
- 20 . 探索 C# 14 新功能：实用特性为编程带来便利
- 相关联分享
- 微信小程序/H5 调起确认收款界面