方案背景与需求分析

在开发公司小程序时，需对接支付功能。为保持订单数据和支付入口的统一性，计划复用公司商城现有支付体系。核心目标是在不重复开发支付功能的前提下，选择最优的对接方案，确保用户体验和开发效率的平衡。

可行方案对比

1. 跳转商城小程序支付

优势：直接复用商城小程序的支付能力，无需额外开发。

劣势：

小程序间跳转会触发微信的询问弹窗，影响用户体验。

当前商城小程序存在未修复的稳定性问题，可能引发支付失败风险。

2. 跳转商城H5支付

优势：

H5页面可无缝嵌入小程序，用户无感知跳转，体验更流畅。

技术实现上可通过参数传递完成支付流程闭环。

劣势：需额外处理H5与小程序间的通信逻辑。

3. 对接小程序支付API

优势：所有操作均在小程序内完成，无跳转问题。

劣势：

需重新对接支付API，开发工作量较大。

订单无法通过商城统一入口管理，增加后续维护成本。

方案选择与决策

综合评估用户体验、开发成本及系统稳定性，最终选择跳转商城H5支付方案。该方案既能避免小程序跳转的弹窗干扰，又能复用现有支付能力，开发成本相对可控。

技术实现与问题解决

测试发现，小程序内嵌H5页面时，微信H5支付无法正常调起。因此采用以下替代方案：

1. 流程设计

小程序跳转至商城H5订单页，携带用户ID和金额参数。

H5自动登录并生成预充值订单，用户确认信息后点击支付。

H5调用微信小程序支付API，携带订单号跳回小程序。

小程序弹出支付窗口，完成支付后轮询订单状态，最终跳转至结果页。

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

2. 关键细节

参数传递：通过URL的GET方式传递用户ID、金额及订单号。

支付回调：商城异步通知PaaS修改订单状态，小程序端轮询查询结果。

<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跳转逻辑：在H5返回小程序的页面中嵌入支付弹窗触发代码，确保流程连贯。

总结与提醒

本方案通过H5中转实现了支付流程的闭环，兼顾了用户体验与开发效率。实际落地时需注意：

确保H5与小程序间的参数传递安全。

<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>

支付回调逻辑需严格测试，避免状态同步延迟。

商城小程序的稳定性问题需持续跟踪优化。

若方案存在遗漏或优化空间，欢迎进一步讨论完善。

<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>