vue--支付宝+微信--支付

微信支付

1 PC网页集成 微信支付 native 生成 付款二维码 扫码直接支付 (二维码带价格)

后端 生成 微信返回的 response 中的 code_url

前端 A

将 URL 转换成 二维码 展示即可 或者 后端生成二维码 前端获取该二维码图片 展示
qrcodejs 二维码生成插件

支付结果通知 微信调用 后台接口 后台按照规范应答 或者 后台主动查询订单
对应 后端 Map 参数中 “notify_url”:“供 微信调用的后台接口”

前端 B

支付完成 pay/callback 回调页展示 – XXXX/#/pay/callback

方式一

后端使用 goEasy 推送 给前端 前端跳转 pay/callback socket 发送 接收的 channel 名字 使用 唯一的 订单号

方式二

前端 轮询 后端 得到 跳转 指令 后 前端跳转 pay/callback http

            let timer = null
            if(timer) return
            timer = setInterval(async()=>{
   
            // 发请求获取用户支付状态
            let result = await API.reqPayStatus(orderId)
            // 如果code===200
            if(result.code===200){
   
              // 第一步:清除定时器
              clearInterval(timer)
              timer = null
              // 保存支付成功返回的code
              code.value = result.code
              // 关闭弹出框
              msgBox.close()
              // 跳转到下一路由 查询订单操作
              router.push('pay/callback')
            }
          },2000)
    // 组件销毁  也要 清除定时器
    onBeforeUnmount(()=>{
   
      clearInterval(timer)
      timer = null
    })

2 手机端 微信扫一扫 前端页面 – JSAPI 支付 点击 调用 微信支付框 支付 微信内支付

微信内 支付 没有 openID–code 需要授权获取

这个也分两种

1、跳转授权页
2、静默授权，只获取code,后端凭借code换取openId，也称静默授权 parking为静默

流程

1 看 URL是否有 code 没有需要 授权获取 重定向为当前页 重新获取 code 就可以拿到 可以理解为 先静默后跳转
2 获取code
3 调用 后台接口 传递 code 并且获取 调起支付的 参数

// created阶段   微信内
let openId = null
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
   
  getCode()
}

const getCode