当前位置: 首页 > news >正文

uniapp 微信小程序 微信支付

本章的内容我尽量描述的细致一些,哪里看不懂给我评论就可以,我看到进行回复

微信支付大致分为4步,具体看后端设计

1. 获取code

2. 根据code获取openid

3. 根据openid,以及部分订单相关数据,生成prepayId (预支付交易会话ID)

4. 通过prepayId调用支付api,并让后端在支付api中返回支付相关配置参数,然后前端将支付配置参数设置到微信支付api上,进行支付拉起

(第3步和第4步 后端可以合成1步,生成prepayId的同时,并执行支付然后将支付配置返回给前端)

本章主要核心介绍就是: 通过第1步,第2步的结合取出openid,以及第4步中的使用uni.requestPayment(OBJECT) 方法,拉起微信支付api的使用以及参数配置,其他可具体结合自己的项目。

1. 获取code

首先要清楚,code是啥?怎么取?取到它用来干啥?

说明:调用接口获取临时登录凭证(code)。通过凭证进而换取用户登录态信息,包括用户在当前小程序的唯一标识(openid)、微信开放平台账号下的唯一标识(unionid,若当前小程序已绑定到微信开放平台账号)及本次登录的会话密钥(session_key)等。

通过这个说明可以知道:code是临时登录凭证(有效期五分钟),我们可以通过这个code在第二步拿到openid,unionid,session_key 这三个参数

怎么取到code:这里需要使用uniapp官方提供的api uni.login(OBJECT)


uni.login({provider: 'weixin', // 使用微信登录success: (res) => {const { code } = res;console.log('code =>', code) // code => 0e1MTrFa1eDx9I0bRpJa1Mqfwf4MTrFJ}
});

2. 根据code获取openid

openid是啥?怎么取?取到它用来干啥?

说明:openid是微信用户在公众帐号(包括小程序)、H5、APP下的唯一标识。每个应用都有一个appid,不同的appid,对应的openid不同。

用来干啥:因为涉及到支付,那么业务中肯定的需要知道是谁支付了,这个谁就通过openid界定

怎么取:调用微信api【GET https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code】

const toggleExecutePay = (param) => {return new Promise((resolve) => {uni.showLoading({title: '加载中',mask: true});uni.login({provider: 'weixin', // 使用微信登录success: (loginRes) => {// 取得 codeconst { code } = loginRes;// 该api的功能:校验临时登录凭证。通过临时登录凭证完成登录流程,并且返回 openid, unionid, session_key。// 需要注意:某些场景下 在前端代码里直接调用这个api的话,会报错request:fail url not in domain list (url不在域列表中),// 在微信公众平台里面也没办法将这个域名配置到合法域名内// 所以就不能在前端代码里直接调用这个api,让后端新增一个接口,在新增的接口里面调用这个api,然后将openid进行返回// uni.request({//   // 微信官网api 携带参数(小程序appId、小程序appSecret、通过wx.login获取的code、授权类型:此处只需填写 authorization_code)//   url: `https://api.weixin.qq.com/sns/jscode2session?appid=xxx&secret=xxx&js_code=${code}&grant_type=authorization_code`,//   method: 'GET',//   success: function (jscodeRes) {//     const { openid, unionid, session_key } = jscodeRes.data;//   }// });// 调用后端接口 获取openid (只传code就行了,其他三个参数让后端在后台自己写)getUserOpenId({ code: code }).then(async (res) => {const { success, data, message } = res;if (success) {// 执行第3步 创建订单 获取prepayid(统一下单订单号)const prepayId = await toggleCreateOrder(data.openid, param).then((res) => res);// 执行第4步 获取支付配置 并拉起支付await toggleGetPayConfig(prepayId);resolve(true);} else {// 加载弹窗隐藏uni.hideLoading();// 弹起错误信息uni.showToast({icon: 'none',title: `${message}`,mask: true,position: 'top'});resolve(false);}});}});});
};

3. 根据openid,以及部分订单相关数据,生成prepayId (预支付交易会话ID)

这一步对于后端来说,只是单纯的通过openid,以及订单相关参数,像微信要了一个prepayId,然后创建了一个订单,并且给前端返回prepayId

// 创建订单 获取 prepayid(统一下单订单号)
const toggleCreateOrder = (openid, param) => {return new Promise((resolve) => {const payParam = {openId: openid,amount: param.amount// ... 如果生成订单后端还需要其他参数(如商品名称,商品id等等),在这里追加就行};createOrder(payParam).then(async (res) => {const { success, data } = res;if (success) {resolve(data.prepayId);} else {// 加载弹窗隐藏uni.hideLoading();resolve(false);}});});
};

4. 通过prepayId 调用支付api,并让后端在支付api中返回支付相关配置参数,然后前端将支付配置参数设置到微信支付api上,进行支付拉起

这一步对于后端来说,通过prepayId将刚刚生成的订单设置成待支付,并且将支付参数返回给前端,前端拉起微信支付,支付成功后,后端应该会监听回调,监听到微信支付成功了,就把订单设置成支付成功

前端调用拉起微信支付api:uni.requestPayment(OBJECT)

// 获取支付配置
const toggleGetPayConfig = (prepayId) => {return new Promise((resolve) => {getPayConfig({prepayId: prepayId}).then((res) => {// 这些参数都让后端返回,前端就不维护像appid这些固定值了const { appid, nonceStr, signature, timestamp, signType, partnerid } =res;// 加载弹窗隐藏uni.hideLoading();uni.requestPayment({provider: 'wxpay', // 固定传wxpayappid: appid, // 微信开放平台 - 应用 - AppIdtimeStamp: `${timestamp}`, // 时间戳(单位:秒)package: 'prepay_id=' + prepayId, // 'prepay_id=' + prepayIdpaySign: signature, // 签名signType: signType, // 签名算法,这里用的 MD5/RSA 签名nonceStr: nonceStr, // 随机字符串partnerid: partnerid, // 微信支付商户号success(res) {resolve(true);},fail(err) {console.log('支付异常 =>', err);}});});});
};

http://www.lryc.cn/news/450773.html

相关文章:

  • CSS 效果:实现动态展示双箭头
  • Linux 创建开发用的账户
  • 检查一个CentOS服务器的配置的常用命令
  • Redis 简单的消息队列
  • C++:继承和多态,自定义封装栈,队列
  • Python多个set中的交集
  • 百度百科 X-Bk-Token 算法还原
  • RUST语言的初印象-从一个模拟登陆谈起-slint+reqwest+aes
  • HBase批量写入优化
  • 江协科技STM32学习- P19 TIM编码器接口
  • 文件上传、重定向、Gin路由
  • 躺平成长:微信小程序运营日记第二天
  • 三分钟速览:Node.js 版本差异与关键特性解析
  • git创建新分支
  • Chip-seq数据分析处理流程
  • spring boot3.2.x与spring boot2.7.x对比
  • Vue2(十三):路由
  • Java并发:互斥锁,读写锁,公平锁,Condition,StampedLock
  • 在 Linux 中,要让某一个线程或进程排他性地独占一个 CPU
  • 滚雪球学MySQL[7.3讲]:数据库日志与审计详解:从错误日志到审计日志的配置与使用
  • 网关的作用及其高可用性设计详解
  • Vortex GPGPU的github流程跑通与功能模块波形探索
  • 10.2 Linux_并发_进程相关函数
  • 【深度学习基础模型】玻尔兹曼机BM|受限玻尔兹曼机RBM|深度置信网络DBN详细理解并附实现代码。
  • 滑动窗口->dd爱框框
  • Python从入门到高手4.1节-掌握条件控制语句
  • 使用Qt实现实时数据动态绘制的折线图示例
  • 【人人保-注册安全分析报告-无验证方式导致安全隐患】
  • Redis6 多线程模型
  • Python的异步编程