UniApp H5 微信支付后页面关闭问题解决方案

一、概述

问题背景
UniApp 开发的 H5 页面在微信内发起支付后，支付成功后页面会直接被微信关闭/返回微信会话，导致无法展示支付成功页、订单信息、引导用户回流。

根本原因
微信支付对 H5 页面做了支付后页面生命周期控制，默认会关闭支付窗口，必须通过 微信支付点金计划 才能保留页面、展示自定义小票。

解决核心
开通 点金计划 → 使用 商家小票 → 在 UniApp H5 中实现 iframe 通信 → 保留页面并实现业务功能。
具体参考链接：https://kf.qq.com/faq/2505216JzUzM250521Q3EbQN.html

二、微信支付 点金计划（核心基础）

1. 什么是点金计划

微信支付官方提供的 支付后运营服务，用于解决 支付后页面关闭、无法留住用户 的问题。
只有开通点金计划，才能：

• 支付后不关闭页面
• 展示 官方小票 / 商家小票
• 实现 H5 页面支付后正常跳转、运营

2. 点金计划作用（针对 UniApp H5）

1. 阻止微信支付后自动关闭页面
2. 以 iframe 形式加载你的 H5 页面
3. 允许自定义支付成功页（商家小票）
4. 支持页面跳转、数据加载、用户回流

3. 开通条件

• 微信支付商户号/服务商号
• 已开通 JSAPI 支付
• 拥有 HTTPS 域名（必须）

4. 后台配置路径

微信支付商户平台 → 产品中心 → 点金计划
需配置：

• 开启点金计划
• 开启 商家小票
• 填写你的 UniApp H5 支付成功页地址（HTTPS）

三、官方小票 vs 商家小票（区别与选择）

1. 官方小票（SHOW_OFFICIAL_PAGE）

• 微信默认提供
• 仅展示：支付金额、订单号、支付时间
• 无自定义能力
• 不能跳回你的 H5 应用
• 不能加载订单数据、展示业务信息
• 支付后页面依然无法有效运营

2. 商家小票（SHOW_CUSTOM_PAGE）【推荐方案】

• 完全加载 你的 UniApp H5 页面
• 可自由设计 UI、展示订单详情
• 可请求接口、加载实时数据
• 可添加按钮返回商家 H5/首页/订单列表
• 可实现会员、复购、核销
• 解决支付后页面关闭问题

3. 核心对比表

四、UniApp H5 商家小票实现方案

1. 实现逻辑（必须理解）

1. 微信支付成功 → 不关闭页面
2. 微信通过 iframe 加载你的 支付成功 H5 页面
3. 页面在 onLoad 中 3 秒内 发送消息给微信：SHOW_CUSTOM_PAGE
4. 微信展示你的页面，不再关闭
5. 页面可加载订单数据、提供返回按钮

2. 必须满足的硬性要求

• HTTPS 域名
• 页面 3 秒内发送 postMessage
• 配置 X-Frame-Options 允许 iframe 嵌套
• 点金计划后台已开启商家小票

五、具体功能实现（完整代码）

1. 页面创建

pages/paySuccess/paySuccess 支付成功商家小票页面

2. 商家小票通信代码（核心）

onLoad(options) {
  // 仅在 H5 环境执行
  // #ifdef H5
  this.initMerchantBill()
  // #endif

  // 加载订单数据（根据订单号）
  this.orderNo = options.orderNo
  this.loadOrderData()
},

methods: {
  // 商家小票核心：通知微信展示自定义页面
  initMerchantBill() {
    try {
      let data = {
        action: 'onIframeReady',
        displayStyle: 'SHOW_CUSTOM_PAGE' // 商家小票
      }
      let postData = JSON.stringify(data)
      parent.postMessage(postData, 'https://payapp.weixin.qq.com')
      console.log('✅ 商家小票加载成功')
    } catch (e) {
      console.log('当前不在微信支付iframe环境')
    }
  },
}

3. 页面功能：加载订单数据

async loadOrderData() {
  // 请求后端接口获取订单详情
  let res = await this.$api.getOrderDetail(this.orderNo)
  if (res.code === 200) {
    this.orderInfo = res.data
  }
},

4. 页面功能：返回之前的 H5 页面/应用

// 返回商家首页
goHome() {
  uni.switchTab({
    url: '/pages/index/index'
  })
},

// 返回订单列表
goOrderList() {
  uni.navigateTo({
    url: '/pages/order/list'
  })
},

5. 完整页面代码（可直接使用）

<template>
  <view class="pay-success">
    <!-- 支付状态 -->
    <view class="status">支付成功</view>

    <!-- 订单信息 -->
    <view class="order-info" v-if="orderInfo">
      <view>订单号：{{ orderInfo.orderNo }}</view>
      <view>支付金额：¥ {{ orderInfo.price }}</view>
      <view>支付时间：{{ orderInfo.payTime }}</view>
    </view>

    <!-- 操作按钮 -->
    <view class="btn-group">
      <button @click="goOrderList">查看订单</button>
      <button @click="goHome">返回首页</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      orderNo: '',
      orderInfo: null
    }
  },
  onLoad(options) {
    //点金计划页面打开时，页面上方的 iframe 框架会请求合作伙伴填写的商家小票链接，会在链接后附上：“特约商户号（sub_mch_id）”、“商户订单号（out_trade_no）”、“md5 校验码（check_code）”三个字段的信息，方便合作伙伴快速定位到具体订单的同时，也保证链接的可靠性。
    this.orderNo = options.out_trade_no || ''

    // H5 环境执行商家小票逻辑
    // #ifdef H5
    this.initMerchantBill()
    // #endif

    // 加载订单数据
    this.loadOrderData()
  },
  methods: {
    // 商家小票通信
    initMerchantBill() {
      try {
        let msg = {
          action: 'onIframeReady',
          displayStyle: 'SHOW_CUSTOM_PAGE'
        }
        parent.postMessage(JSON.stringify(msg), 'https://payapp.weixin.qq.com')
      } catch (e) {}
    },

    // 加载订单数据
    async loadOrderData() {
      // 替换为你的接口
      let res = await this.$api.getOrderDetail(this.orderNo)
      this.orderInfo = res.data
    },

    // 返回订单列表
    goOrderList() {
      uni.navigateTo({ url: '/pages/order/list' })//如果需要跳转出去，具体参照https://kf.qq.com/faq/2505216JzUzM250521Q3EbQN.html
    },

    // 返回首页
    goHome() {
      uni.switchTab({ url: '/pages/index/index' })////如果需要跳转出去，具体参照https://kf.qq.com/faq/2505216JzUzM250521Q3EbQN.html
    }
  }
}
</script>

<style scoped>
.pay-success {
  padding: 40rpx;
  text-align: center;
}
.status {
  font-size: 36rpx;
  color: #07c160;
  margin: 40rpx 0;
}
.order-info {
  font-size: 28rpx;
  color: #666;
  line-height: 2;
  margin-bottom: 60rpx;
}
.btn-group {
  display: flex;
  justify-content: center;
  gap: 30rpx;
}
button {
  background: #07c160;
  color: #fff;
  border-radius: 10rpx;
}
</style>

六、index.html 安全配置（解决白屏/不加载）

在项目 index.html 的 <head> 中添加：

<meta http-equiv="X-Frame-Options" content="ALLOW-FROM https://payapp.weixin.qq.com">

作用：允许微信支付 iframe 嵌套你的 H5 页面。

七、UniApp H5 打包配置

1. 发行 → 网站 H5 手机版
2. 路由模式：hash（history 模式在 iframe 中异常）
3. 部署到 HTTPS 服务器

八、常见问题（必看）

1. 支付后页面直接关闭

• 未开通点金计划
• 未开启商家小票
• 页面未发送 SHOW_CUSTOM_PAGE

2. 显示官方小票，不显示我的页面

• 消息发送超过 3 秒
• 商家小票地址配置错误
• 域名不是 HTTPS

3. 页面白屏

• 未配置 X-Frame-Options
• 跨域限制
• 证书无效

4. 无法跳转返回 H5 应用

• 使用了限制跳转的导航方式
• 推荐使用：switchTab / navigateTo