微信小程序：用户点击跳转付款码界面

最近工作中遇到一个需求是用户点击活动领取的微信代金券后跳转到微信付款码界面，于是乎，一顿翻文档，说实话，微信小程序的文档翻起来真的…一言难尽。
很快找到了一个wx.requestPayment(Object object)，可是仔细一看，这个接口是发起支付的，会弹出付款界面，就是让你输入密码那个，继续找，无果，转战百度，果然搜到了，原来这并不是一个开放的接口，而是需要单独去向微信申请的，并且也没有公开文档。也对，毕竟是跳到付款码界面，比较敏感。
好申请完成后，开始开发!

前置条件

小程序必须接入微信支付
拥有微信支付商户平台
关联小程序和商户

API介绍

wx.openOfflinePayView(OBJECT)

参数	类型	必填	实例值	说明
appId	String	是	wxd678efh567hg6787	公众平台 appid，需与 mch_id 有绑定关系
timeStamp	String	是	1631604636	时间戳；商户生成从 1970 年 1 月 1 日 00： 00：00 至今的秒数，即当前的时间
nonceStr	String	是	njqn50kxbl	随机字符串；商户生成的随机字符串；取值范围：长度为 32 个字符以下。
package	String	是	mch_id=1289343489	mch_id=****,微信支付商户号，需与 appid 有绑定关系
signType	String	是	MD5	签名类型，目前支持 MD5、 HMAC-SHA256。该字段需参与签名。
paySign	String	是	97A991A68892C3A0668E4DE80F24F782	签名结果，该方法需要加入签名的参数为 appId、timeStamp、nonceStr、package、 key、signType，请注意这里的参数有大小写，签名的时候不要转为小写
success	Function	否	successHandler	调用成功回调
fail	Function	否	failHandler	调用失败回调
complete	Function	否	complatehandler	调用完成回调

签名字符串示例

appId=wxa66666d6d5c4bf4b&nonceStr=y6683ha9i6a&package=mch_id=164888850&signType=MD5&timeStamp=1631605839&key=apiKey12355yesuis

最终请求示例

wx.openOfflinePayView(
{ 'appId': 'wxa66666d6d5c4bf4b','timeStamp': '1631605839','nonceStr': 'y6683ha9i6a', 'package': 'mch_id=164888850', 'signType': 'MD5', 'paySign': '64355B5427BAF57459BA2A3214AF1883EBB2B519F4789B7D616CC8B8F2CE8ED5','success':function(res){}, 'fail':function(res){}, 'complete':function(res){} }
)

代码

官方签名规则及签名生成算法

签名生成

设所有发送或者接收到的数据为集合M，将集合M内非空参数值的参数按照参数名ASCII码从小到大排序（字典序），使用URL键值对的格式（即key1=value1&key2=value2…）拼接成字符串stringA。

注意以下规则：

参数名ASCII码从小到大排序（字典序）；
如果参数的值为空不参与签名；
参数名区分大小写；
验证调用返回或微信主动通知签名时，传送的sign参数不参与签名，将生成的签名与该sign值作校验。
微信接口可能增加字段，验证签名时必须支持增加的扩展字段

加密参数排序拼接方法

obj2str(args) => {//获取参数对象的参数名集合var keys = Object.keys(args) //参数名ASCII码从小到大排序（字典序）keys = keys.sort() // 用于接收排序并过滤空值后的属性及值var newArgs = {} // 遍历赋值存储keys.forEach(function (key) {if (args[key] != "" && args[key] != 'undefined') {  //如果参数的值为空不参与签名；newArgs[key] = args[key]  //参数名区分大小写；}})//用于接收拼接的字符串var string = ''for (var k in newArgs) {string += '&' + k + '=' + newArgs[k]}// 截取字符串，只取第一个&符号后面的值string = string.substr(1)// 返回字符串，用于下一步加密return string
}

生成随机数方法
用于保证签名不可预测。推荐生成随机数算法如下：调用随机数函数生成，将得到的值转换为字符串

creatNonceStr(radix=36){// 将0-1随机小数，转换为radix进制，去掉0.，保留余下部分(这里可以自由发挥)return Math.random().toString(radix).substr(2, 15)
}

在stringA最后拼接上key得到stringSignTemp字符串，并对stringSignTemp进行MD5运算，再将得到的字符串所有字符转换为大写，得到sign值signValue。 注意：密钥的长度为32个字节。

我这里使用的是MD5加密，是从网上找的现成的，引入小程序直接使用

key设置路径：微信商户平台(pay.weixin.qq.com)–>账户设置–>API安全–>密钥设置

     let params = {appId: 'wxa66666d6d5c4bf4b',timeStamp: parseInt(new Date().getTime() / 1000) + '',nonceStr: this.creatNonceStr(), package: 'mch_id=164888850', signType: 'MD5', ,}// 商户后台api Keylet mchKey = 'apiKey12355yesuis'// 在拼接的参数后追加上api keylet objStr = this.obj2str(params)+`&key=${mchKey}`// 进行MD5加密并转为大写let paySign =  md5.hex_md5(objStr).toUpperCase()

注意：

package的值是mch_id=商户号，我第一次就没看清文档写错了
key是将appId、timeStamp、nonceStr、package、 key、signType排序拼接后追加在最后的
key用的是商户后台的API秘钥而不是APIv3秘钥
最后记得将加密后的结果转为大写

调用API

  wx.openOfflinePayView({...params,paySign,success(res){console.log('成功',res)},fail(err){console.log('失败',err)},complete(e){console.log('结束',e)}})

如果你觉得文章对你有帮助，可以关注我的个人公众号 ,感谢你的支持！！

微信小程序：用户点击跳转付款码界面相关推荐

微信开发工具button跳转页面_微信小程序按钮点击跳转页面详解
微信小程序中,按钮也是标签,它通过bindtap属性绑定点击事件: 然后在js里面注册这个回调函数: 回调函数里面通过 wx.navigateTo({ url: '/pages/index/talkP ...
微信小程序列表点击跳转对应详情页
2020/9/1:这种写法能实现但是用了多次缓存,后面发现其实是可以用自定义属性来传参的,具体有空我会写出来效果展示: 列表页js部分: onLoad: function(options) { va ...
微信小程序开发——点击按钮获取用户授权没反应或反应很慢的解决方法
微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法参考文章: (1)微信小程序开发--点击按钮获取用户授权没反应或反应很慢的解决方法 (2)https://www.cnblogs.co ...
微信小程序实现锚点跳转
微信小程序实现锚点跳转 1.先上效果图,看看是不是你想要的. 2.主要用到的微信小程序的scroll-view 组件实现该效果.核心主要是使用scroll-into-view属性跳转对应的标签页和标签 ...
微信小程序用户登录流程思路及主要代码
微信小程序用户登录流程思路由于微信官方不允许在刚进入小程序的时候,弹出用户登陆页面,需要在进入小程序后,用户主动点击才能进入登陆页面.此时,将会给小程序开发者在设计用户登陆页面时,带来一定的麻烦.现 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
微信java 签名验证_JAVA版微信小程序用户数据的签名验证和加解密
签名验证和加解密数据签名校验为了确保开放接口返回用户数据的安全性,微信会对明文数据进行签名.开发者可以根据业务需要对数据包进行签名校验,确保数据的完整性. 签名校验算法涉及用户的session ...
微信小程序用户登录信息过期处理
微信小程序用户登录信息过期处理由于小程序对获取用户信息的新规定,获取用户信息必须通过一个button调出获取窗口,然而用户的token会过期,而本地存在的缓存可能会让用户误以为自己仍处于登录状态,但 ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:

微信小程序：用户点击跳转付款码界面

前置条件

API介绍

代码

微信小程序：用户点击跳转付款码界面相关推荐

最新文章

热门文章