uniapp之微信小程序 支付
一、注册微信支付商户号(由上级或法人注册)
注册链接:https://pay.weixin.qq.com/index.php/apply/applyment_home/guide_normal#none,如图
注意:需要由主管及更上级领导进行注册,成为公司收款账户 (企业注册需要材料:营业执照、对公银行账户信息,法人身份证)
二、注册小程序账号(由上及或者领导注册)
企业一般注册为企业小程序,非个人。地址链接:https://mp.weixin.qq.com/wxopen/waregister?action=step1
三、登录商户号绑定小程序
当小程序ID绑定至此商户,就可以调用此商户支付的相关接口,地址链接:https://pay.weixin.qq.com/index.php/core/home/login
四、后端写接口
根据前端传入数据,返回微信支付核心数据
五、前端调用接口
① 获取openid(当前用户真实id)
openid为当前用户真实id,无法直接用任何接口获得,需要先调用微信login接口登录,获取登录凭证code,再通过此code(登录凭证,5分钟有效),向微信服务器换取用户openid。
uniapp官方文档地址链接:https://uniapp.dcloud.net.cn/api/plugins/login.html#login
1 2 3 4 5 6 7 8 9 10 | uni.login({ provider: 'weixin' , success (res) { if (res.code) { //code: 用户登录凭证(有效期五分钟)使用 code 可以换取 openid、unionid、session_key 等核心信息 } else { console.log( '登录失败!' + res.errMsg) } } }) |
发送请求调用微信官方接口,用code凭证换取用户openid(真实用户id)
1 2 3 4 5 6 7 8 9 10 11 12 13 | uni.request({ url: `https: //api.weixin.qq.com/sns/jscode2session`, //微信官方接口 data: { appid: '小程序appId' , secret: '小程序密钥,在小程序appId下一行,放一块在' , js_code: '刚才获取的code' , grant_type: 'authorization_code' //固定值 }, success: (res) => { //获取openid:用户真实唯一id console.log(res.data.openid); } }) |
② 调用公司后端接口,获取支付核心数据
1 2 3 4 5 6 7 8 9 | // 调用接口 uni.request({ url: '调用你们公司的后端接口地址,获取支付核心数据' , method: 'POST' , data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 }, success(obj) { console.log(obj) } }) |
该接口必须返回以下6个核心数据,都是由后台计算生成。
"appId": "xxxx",
"nonceStr": "xxxx",
"packageValue": "prepay_id=xxxxx",
"paySign": "xxxxxx",
"signType": "MD5",
"timeStamp": "xxxxxx"
③ 调用微信官方支付接口,弹出支付界面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | uni.request({ url: '调用后端接口地址,获取支付核心数据' , method: 'POST' , data: { 接口需要什么参数就传给接口,包含扣款金额,订单id等 }, success(obj) { //调用微信官方支付接口弹出付款界面,输入密码扣款 wx.requestPayment({ timeStamp: obj.xxxx.timeStamp, //后端返回的时间戳 nonceStr: obj.xxxx.nonceStr, //后端返回的随机字符串 package : obj.xxxx.packageValue, //后端返回的prepay_id signType: 'MD5' , //后端签名算法,根据后端来,后端MD5这里即为MD5 paySign: obj.xxxx.paySign, //后端返回的签名 success (res) { console.log( '用户支付扣款成功' , res) }, fail (res) { console.log( '用户支付扣款失败' , res) } }) } }) |
调用后,弹出付款界面,模拟器需要扫码支付。
点击真机调试会直接弹出微信付款界面。
六、项目中的微信支付
一般情况下,支付界面都是在用户登录后,但是在我们开发微信小程序的支付功能时,到支付的时候用户已经登录该小程序,所以我们不需要从uni.login去获取code,再拿code获取openid,这个时候后端在登录的时候已经可以保存用户的登录信息,前端只需要调用后端接口,传商品id去获取所需要的的五个核心参数及需要的信息
uniapp官方文档链接:https://uniapp.dcloud.net.cn/api/plugins/payment.html#requestpayment
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | async confirmPayment() { let res = await postPrepayReq({goodsId: this .payId}) // 调用后端接口去获取所需要的的数据 if (res.code == 0) { let tempObj = { ...res.data }<br> // 处理后端返回数据为JSON字符串转为对象 for ( let key in tempObj) { if (key == 'payData' ) { tempObj[key] = JSON.parse(tempObj[key]) } } console.log(698, tempObj);<br> // 解构所需要的的数据 let { appId, nonceStr, paySign, signType, timeStamp, packageValue } = tempObj.payData<br> // 调用微信支付 uni.requestPayment({ provider: 'wxpay' , // 支付服务提供商,此处为微信支付 timeStamp, nonceStr, package : packageValue, signType, paySign, prepayid: tempObj.mchOrderNo, success: payRes => { console.log( "支付成功" , payRes); }, fail: payErr => { console.log( "支付失败" , payErr); } }) } }, |
七、支付过程图
注:该文档为个人理解所写,有误可建议修改
本文作者:persist_in
本文链接:https://www.cnblogs.com/persistIn/p/17791185.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步