发布时间:2022-09-11 02:00
微信H5支付(JSAPI支付)---前端篇
在开发微信h5支付查了资料说是有两种唤起微信支付的方法:一种是利用内置对象,二是通过引用微信的js sdk,我只做过第二种方法的支付,下面主要讲通过引用微信js sdk的支付。
想要了解内置对象唤醒支付的,可以参考文档:
如何运用 js sdk唤醒微信支付
官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
第一步:绑定域名[必需]
先登录微信公众平台进入“公众号设置”的“功能设置”里填写"js接口安全域名"。
第二步:引入js文件[必需]
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js
第三步:通过config接口注入权限验证配置[必需]
所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushState来实现web app的页面会导致签名失败,此问题会在Android6.2中修复)。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
第四步:通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
第五步:通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
接口说明:
接口调用说明
所有接口通过wx对象(也可使用jWeixin对象)来调用,参数是一个对象,除了每个接口本身需要传的参数之外,还有以下通用参数:
1.success:接口调用成功时执行的回调函数。
2.fail:接口调用失败时执行的回调函数。
3.complete:接口调用完成时执行的回调函数,无论成功或失败都会执行。
4.cancel:用户点击取消时的回调函数,仅部分有用户取消操作的api才会用到。
5.trigger: 监听Menu中的按钮点击时触发的方法,该方法仅支持Menu中的相关接口。
备注:不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回。
以上几个函数都带有一个参数,类型为对象,其中除了每个接口本身返回的数据之外,还有一个通用属性errMsg,其值格式如下:
调用成功时:"xxx:ok" ,其中xxx为调用的接口名
用户取消时:"xxx:cancel",其中xxx为调用的接口名
调用失败时:其值为具体错误信息
基础接口:判断当前客户端版本是否支持指定JS接口
wx.checkJsApi({
jsApiList: ['chooseImage'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
// 以键值对的形式返回,可用的api值true,不可用为false
// 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
}
});
发起一个微信支付请求 [必需]
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串,不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: '', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});
注意事项
以上两种H5的微信支付方法都需要注意以下两点
1.设置支付目录
确保实际支付时的请求目录与后台配置的目录一致,否则将无法成功唤起微信支付
4347888-62d1144b90e15e61.png
2.设置授权域名
开发公众号支付时,在统一下单接口中要求必传用户openid,而获取openid则需要您在公众平台设置获取opendid的域名,只有被设置过的域名才是一个有效的获取openid的域名,否则将获取失败。
4347888-ae3cbc973a0545da.png
宇宙最強的IDE - Visual Studio 25岁生日快乐
【Turtle表白系列】你为什么还单身 ?因为昨天才遇见你。(爱心升级版本来袭)
spring boot/spring cloud 集成redis sentinel 哨兵集群
【FPGA教程案例26】在FPGA中通过verilog来实现小数的基础运算
Antd Pro Vue - 基于阿里 Ant Design 的免费开源中后台前端/设计解决方案
技术揭秘 | 阿里云EMR StarRocks 线上发布会预约开启!
技术解析|Doris Connector 结合 Flink CDC 实现 MySQL 分库分表 Exactly Once精准接入