微信小程序/H5 调起确认收款界面
微信小程序/H5 调起确认收款界面详解(附代码+平台兼容处理)
场景:用户点击「收款」按钮后,系统调起微信收款组件,用户确认后完成转账或收款流程。该能力广泛用于现金营销、二手交易、佣金报酬、企业赔付等业务场景中。
具体见官方文档
背景
微信官方在前俩月更新了 requestMerchantTransfer 接口,允许微信小程序与H5 页面调起一个用户确认收款的界面,用户在完成确认后即可完成转账。
该 API 可用于实现:
- 商户对用户打款时让用户确认(平台代发)
- 用户向另一个用户确认收款(点对点收款)
- 钱包提现类应用(先展示转账详情 → 用户同意 → 发起打款)
...
⚙️ 使用前提
申请前提:
- 需要开通微信支付商户平台的 商家转账到零钱 产品权限;
- 绑定到小程序或公众号;
- 需要设置
mchId(商户号)、appId(当前小程序/公众号的 appid)、package(订单详情包)。
调用方式:
| 平台 | 调用方式说明 |
|---|---|
| 小程序端 | 原生 API wx.requestMerchantTransfer |
| 微信内 H5 | 通过 WeixinJSBridge.invoke() 调用 |
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 |
表示用户确认了收款,才会执行成功逻辑 |
️ 常见问题 & 踩坑提示
- 小程序内请确保 AppID 已配置转账权限,否则会报「无权限」;
- H5 调用必须在
wx.ready()中进行,且前提是先注入 JS-SDK 签名; - 微信版本低于 7.0.20 可能不支持该能力;
- 请勿在非微信浏览器中测试 H5 端,WeixinJSBridge 无法注入;
- package 参数要从后端获取,且务必注意加密与签名校验;
参考链接:
微信开放文档:requestMerchantTransfer
微信小程序/H5 调起确认收款界面的更多相关文章
- 【微信小程序】调起微信支付完整demo
微信小程序调用微信支付接口 https://blog.csdn.net/u012667477/article/details/80940578
- 微信小程序H5预览页面框架(二维码不隐藏)
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序H5预览页面框架
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 微信小程序要调数据 微信小程序 for 循环详解
现在要完成这样的效果: 我的代码是: <view class="l-setlist clr" > <template name="listab" ...
- 微信小程序调接口常见问题解决方法
第一次调接口时遇见的bug. 注意:接口的域名不能使用 IP 地址或 localhost,且不能带端口号: 微信小程序如何调接口? wx.request({ url: 'http://miniapp/ ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 近期热门微信小程序demo源码下载汇总
近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 微信小程序5 - 数据驱动界面
微信小程序不可以使用js直接控制界面元素.而是通过改变 this.data中的属性,同步到界面 这个问题可以克服,带来的就是和H5不一样的编码方式.JS中更多的是改变数据的逻辑,而不是获取某个View ...
- 微信小程序导航:官方工具+精品教程+DEMO集合(1月7更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug ...
随机推荐
- linux命令操作android手机
目的 通过一台linux机器操作android手机做一些常用的操作 复杂的操作都是由简单操作开始的, 可以自行发掘 环境 笔记本: thinkpad t480 操作系统: archlinux adb版 ...
- MySQL分页性能思考
MySQL分页性能思考 关键词:深度分页 背景 最近有一个需求:在后台管理页面中,需要展示产品信息的列表. 之前版本开发中产品信息是用户填写完所有字段之后能进行保存.在之前的基础上需要支持用户不完全填 ...
- HPC中常见的调度器介绍
本文分享自天翼云开发者社区<HPC中常见的调度器介绍> 作者:土豆炒肉丝 在高性能计算(HPC)环境中,调度器是负责管理和分配计算资源(如计算节点.处理器核心.内存等)给待执行任务的重要组 ...
- Doris BloomFilter原理
1.Bloom Filter的核心是一个[m]位的bitset和[k]个hash函数. 初始时bitset中所有位的值都设置为0,假设取[m = 10],[k = 3],用蓝色表示某位为0,红色表示为 ...
- [虚拟化/Docker] Docker Desktop 安装与使用
0 序:DeepSeek 等AI大模型在Windows的私有化部署 DeepSeek 等AI大模型在Windows的私有化部署,最流行的开源AI终端应用----Dify,依赖于 Docker 环境.由 ...
- 分合之道:最小生成树的 Kruskal 与 Prim 算法
最小生成树问题 想象你是一位城市规划师,面前摊开一张地图,标记着散落的村庄.你的任务是用最经济的成本,在村庄间铺设道路,让所有村庄互通.这个问题看似简单,却隐藏着一个经典的数学命题:如何在一张&quo ...
- [BZOJ5093] 图的价值 题解
考虑计算一个点的贡献,最后 \(\times n\) 即为所求. 显然一个点的贡献为 \(\sum\limits_{i=0}^{n-1}\binom{n-1}ii^k2^{\frac{(n-1)(n- ...
- Element-UI 使用心得之el-card
el-card 是Element-UI 内置的卡片组件,使用起来很方便,但是对Vuejs和html 不是精通的话,根据自己的要求布局,会出现自己的小困惑,必须添加垂直居中,按照CSS 布局设置,总是 ...
- PHP 命名空间与spl_autoload_register() 自动加载机制
转:https://www.cnblogs.com/chihuobao/p/9895202.html include 和 require 是PHP中引入文件的两个基本方法.在小规模开发中直接使用 in ...
- 介绍一下opentcs
OpenTCS是一个开源的自动运载系统(Automated Guided Vehicle,AGV)控制系统.它旨在管理和控制自动化运输车辆,例如AGV或自动搬运车(AMR),在工业和商业环境中执行各种 ...