uni-app | 小程序嵌入H5页面实现支付功能

文章目录

• • 💼 背景
  • 🔎方案选择
  • ❓涉及问题
  • 🤔实现思路
  • • • 1. 前置条件
      • 2. 整体流程
      • 3. 时序图
      • 4. 通讯方式
      • • 小程序打开H5
        • H5跳转小程序
  • 🤞解决方案
  • • • 小程序端操作
  • 🙏结语

💼 背景

前一阵在做公司小程序时，有个需要对接支付的功能。但是本着订单数据和支付统一入口的设计原则，计划是对接公司商城现有的支付体系。故本方案是分析对接商城支付几种可行方案以及每种方案的可行性，最后综合选出一种最佳的方案。

🔎方案选择

综合用户体验、开发工作量等因素最终选择使用跳转商城H5支付的方案

❓涉及问题

• 小城和商城H5页面通讯问题
• 唤起支付窗口问题
• h5跳转回小程序问题

🤔实现思路

由于经过测试发现小程序中嵌入商城H5后，无法正常调起微信h5支付的。所以采用曲线救国的方式，商城内部走微信小程序支付API，再有小程序唤醒小程序支付。具体实现步骤如下

1. 小程序跳转商城H5
2. 商城H5判断如果是小程序内打开，调用微信小程序支付API
3. 商城H5跳回到小程序
4. 小程序唤起支付窗口
5. 根据回调进行业务处理

1. 前置条件

• 微信商户申请并开通小程序支付
• 使用小程序要是企业注册
• 商城域名添加进微信公众平台WEB-view业务域名中
• 商城h5中需要引入用于和web-view交互的JSSDK

2. 整体流程

1. 用户输入充值金额，点击确定。小程序携带token、用户id和支付金额参数跳转到商城H5订单确认页面
2. 商城H5根据token和用户id信息进行自动登录、根据支付金额生成预充值订单信息
3. 用户在商城H5页面进行订单确认、发票信息填写
4. 用户在商城H5点击支付，生成对应订单并携带订单号跳转到小程序订单详情页面
5. 小程序再订单详情页面弹出支付窗口
6. 商城端异步通知PaaS支付成功 PaaS 修改订单状态
7. 小程序端成功回调中轮训调用PaaS订单状态查询接口
8. 订单修改成功小程序跳转到一个指定页面（例如订单页）

3. 时序图

在原有微信支付的逻辑上增加了现有业务的交互逻辑（若有遗漏或者错误的地方，还请在评论区和谐讨论）

4. 通讯方式

由于使用postMessage方式传递数据，只有在小程序特殊操作下才可以触发，所以本方案采用get方式进行传参

小程序打开H5

<web-view  :src="'https://shop.XXX.com/Mobile/Index/wxchart?token=XXXXXXXXXX&name=youngRich'"  >web-view>

H5跳转小程序

<script type="text/javascript" src="Https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>// 还要再次页面中判断是是否在小程序内打开var ua = navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i)=="micromessenger") {//iOS的ua中无miniProgram，但都有MicroMessenger（表示是微信浏览器）wx.miniProgram.getEnv((res)=>{   if (res.miniprogram) {//在微信内，在小程序内。console.log("小程序的支付业务")let wxJSON ={} // 微信返回的5个参数               wx.miniProgram.navigateTo({url: '"/pages/pay/pay?param=" + wxJson  '});return}else{//在微信内，不在小程序内。console.log("微信H5的支付业务")return}})}else{//不在微信内。console.log("第三方浏览器支付业务")return} 

🤞解决方案

以下代码均为示例，仅供参考。请结合自身业务逻辑进行处理

小程序端操作

• 订单详情或者充值页面 携带金额等订单信息跳转到预支付页面（商城h5提供的地址用web-view嵌入）
• 预支付页面onLoad中调用uni.login获取code
• 把通行证token、code、user_id、account携带到商城h5给的url上（或者系统中其他参数）

<template>  <web-view src="{{shopUrl}}"></web-view></template><script>  export default {     data() {       return {         shopUrl:''       }     },    // 订单详情或者充值页面  携带金额跳转到预支付页面    onload(options){      uni.login({        provider: "weixin",        success: (res) => {          let params = {            code:res.code,            token:*********,            user_id:*****,            ...options,          }          this.shopUrl = this.stringifyUrlArgs('https://XXX.XXXX.XXX',params)         },        fail: (res) => {          utils.showToast("获取授权信息失败");        },      });           },    methods:{        stringifyUrlArgs(url, params) => {          url += (/\?/).test(url) ? '&' : '?'          url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&')          return url  }    }</script>

在商城h5跳转回小程序的页面中（可以是任何页面甚至是空白页）写入一下逻辑。此步骤主要是弹出授权支付弹窗

<template></template><script>  export default {    data() {},    onload(options){      let payData = {        provider: 'wxpay',        ...options, // 商城h5携带五个用于支付的参数      }      uni.requestPayment({      ...payData,        success(res) {          console.log('支付成功处理')        },        fail(err) {          console.log('支付失败处理')        }      })          },</script>

🙏结语

❤️感谢铁汁们的耐心阅读，如果本篇文章能对大家有所帮助，还请多多点赞收藏关注，支持一下❤️

来源地址：https://blog.csdn.net/m0_37572422/article/details/129270882