window.location.href = openlink; }, 100); } catch (err) { uni.showToast({ title: '跳转失败', icon: 'none' }); } } } }; </script>   四、关键注意事项 1. 环境限制：仅支持在微信内置浏览器中跳转，外部浏览器（如Chrome）点击无反应。 2. 参数编码：跳转携带的 query 参数需确保已做URL编码（后端生成时需处理）。 3. 调试方法：使用“微信开发者工具”的“H5调试模式”模拟微信浏览器环境，测试跳转逻辑。 4. Scheme有效期：微信生成的 openlink 最长有效期30天，若需长期使用，需后端定时刷新 access_token 并重新生成链接。 在这里添加跳转支付宝小程序

在 UniApp 开发的 H5 页面中跳转微信小程序与支付宝小程序（完整版）

一、前置准备（微信 + 支付宝平台配置）

（一）微信平台配置

1. 关联小程序与公众号登录微信公众平台，在 “小程序管理” 中绑定目标微信小程序（需公众号与小程序为同一主体）。
2. 备案业务域名
   • 进入公众号 “设置 - 公众号设置 - 功能设置 - 业务域名”，填写 H5 页面的域名（如yourdomain.com）。
   • 下载平台生成的验证文件（如MP_verify_xxxx.txt），上传至 H5 服务器的根目录，确保访问https://yourdomain.com/MP_verify_xxxx.txt能直接显示文件内容。

（二）支付宝平台配置

无需复杂备案，仅需获取目标支付宝小程序的 AppId（从支付宝开放平台 [open.alipay.com] 的 “小程序管理 - 基本信息” 中获取），若需稳定跳转，可在支付宝小程序后台 “开发设置 - Web 接入域名” 中，添加 H5 页面的域名（非强制，仅优化兼容性）。

二、后端生成跳转链接（微信需接口生成，支付宝无需）

（一）微信：生成小程序 Scheme 链接

1. 获取access_token（后端接口）

• 调用接口：GET https://api.weixin.qq.com/cgi-bin/token
• 参数：

  参数名	说明	来源
  appid	目标微信小程序的 AppID	小程序开发者提供
  secret	小程序的 AppSecret	小程序开发者提供
  grant_type	固定为client_credential	无需修改

• 示例返回（成功时）：

  json

  {
    "access_token": "xxx",
    "expires_in": 7200
  }
  

注意：access_token有效期 2 小时，需后端缓存，避免频繁请求。

2. 生成小程序 Scheme 链接（后端接口）

• 调用接口：POST https://api.weixin.qq.com/wxa/generatescheme?access_token=第一步获取的access_token
• 请求头：Content-Type: application/json
• 请求体（JSON 格式）：

  json

  {
    "jump_wxa": {
      "path": "pages/index/index.html", // 目标页面路径（需带.html后缀）
      "query": "id=123&name=test",     // 跳转携带参数
      "env_version": "release"         // 环境：release=正式版，trial=体验版，develop=开发版
    },
    "is_expire": true,                 // 是否设置过期时间
    "expire_time": 1735689600          // 过期时间（Unix秒级时间戳，最长30天）
  }
  

• 示例返回（成功时）：

  json

  {
    "openlink": "weixin://dl/business/?t=xxxxxx" // 微信跳转Scheme链接
  }
  

（二）支付宝：无需后端生成，直接拼接链接

支付宝跳转链接为固定URL Scheme格式，前端可直接拼接，格式如下：alipays://platformapi/startapp?appId=【支付宝小程序AppId】&page=【目标页面路径】&query=【参数（可选）】

• 示例：alipays://platformapi/startapp?appId=20210011816xxxxxx&page=pages/index/index&query=userId=123%26name=test注：query参数若含特殊字符（如&），需用encodeURIComponent()编码。

三、UniApp 前端统一实现（微信 + 支付宝跳转）

完整 Vue 页面代码

vue

<template>
  <view class="mini-jump-container">
    <button @click="jumpToWeChatMini">跳微信小程序</button>
    <button @click="jumpToAlipayMini" style="margin-top: 15px;">跳支付宝小程序</button>
  </view>
</template>

<script>
export default {
  methods: {
    // 1. 环境判断工具函数
    isWeChatEnv() {
      // 判断是否在微信内置浏览器
      return navigator.userAgent.toLowerCase().includes('micromessenger');
    },
    isAlipayEnv() {
      // 判断是否在支付宝内置浏览器
      return navigator.userAgent.toLowerCase().includes('alipayclient');
    },

    // 2. 跳转微信小程序逻辑
    async jumpToWeChatMini() {
      if (!this.isWeChatEnv()) {
        uni.showToast({ title: '请在微信浏览器中打开', icon: 'none' });
        return;
      }
      try {
        // 调用后端接口，获取微信Scheme链接
        const res = await uni.request({
          url: 'https://你的后端域名/api/get-wechat-scheme', // 后端接口地址
          method: 'GET'
        });
        const openlink = res.data.openlink;
        if (!openlink) {
          uni.showToast({ title: '微信跳转链接生成失败', icon: 'none' });
          return;
        }
        // 延时100ms跳转，避免微信兼容性问题
        setTimeout(() => {
          window.location.href = openlink;
        }, 100);
      } catch (err) {
        uni.showToast({ title: '微信跳转失败', icon: 'none' });
      }
    },

    // 3. 跳转支付宝小程序逻辑
    jumpToAlipayMini() {
      // 非支付宝环境提示（可选，外部浏览器也可尝试跳转，但需用户手动打开支付宝）
      if (!this.isAlipayEnv()) {
        uni.showToast({ title: '建议在支付宝内打开以确保跳转正常', icon: 'none', duration: 2000 });
      }
      // 1. 配置支付宝小程序信息（替换为实际值）
      const alipayAppId = '20210011816xxxxxx'; // 支付宝小程序AppId
      const targetPage = 'pages/index/index';  // 目标页面路径
      const jumpParams = { userId: 123, name: 'test' }; // 携带参数

      // 2. 拼接并编码链接（处理参数特殊字符）
      const queryStr = Object.entries(jumpParams)
        .map(([key, val]) => `${key}=${encodeURIComponent(val)}`)
        .join('&');
      const alipayScheme = `alipays://platformapi/startapp?appId=${alipayAppId}&page=${targetPage}&${queryStr}`;

      // 3. 触发跳转
      window.location.href = alipayScheme;
    }
  }
};
</script>

<style scoped>
.mini-jump-container {
  padding: 20px;
  text-align: center;
}
button {
  padding: 12px 24px;
  background: #007AFF;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
}
</style>

四、关键注意事项

（一）微信跳转注意

1. 环境限制：仅支持在微信内置浏览器跳转，外部浏览器（如 Chrome）点击无反应。
2. Scheme 有效期：微信生成的openlink最长 30 天，需后端定时刷新access_token重新生成。
3. 调试方法：用 “微信开发者工具” 的 “H5 调试模式” 模拟环境，测试跳转逻辑。

（二）支付宝跳转注意

1. 参数编码：query参数必须用encodeURIComponent()编码，避免特殊字符（如&、=）导致参数截断。
2. 页面路径：page参数需与支付宝小程序内的页面路径完全一致（如pages/index/index，不含.vue后缀）。
3. 外部浏览器兼容：手机外部浏览器点击跳转链接时，会提示 “是否打开支付宝”，用户确认后可正常跳转；电脑浏览器无效。