前端跳转微信小程序全方式总结（网页 / App / 小程序 / 其他）

以下内容为AI生成，仅供参考！！！

核心前提：只有微信环境下才能直接唤起小程序；外部浏览器 / 普通 App 只能间接引导，不能直接跳转。

一、H5 网页跳转微信小程序

1.wx-open-launch-weapp 标签（官方标准）

• 适用场景：微信内置浏览器（公众号 H5、企业微信 H5）
• 实现代码：

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxx"
  path="pages/index/index?param=1">
  <script type="text/wxtag-template">
    <button style="padding:8px 16px;">打开小程序</button>
  </script>
</wx-open-launch-weapp>

• 要求：
  • H5 域名在小程序/公众号业务域名白名单
  • 引入微信 JS-SDK，配置 wx.config
  • 仅支持微信浏览器，外部浏览器无效

2.URL Scheme（微信内直接跳转）

• 格式：

weixin://dl/business/?appid=wxxxxxxx&t=xxx

• 特点：简单，但稳定性差、微信经常封禁，不推荐生产用。

3.JS-SDK 跳转（wx.navigateToMiniProgram）

• 微信 JS-SDK 1.6.0+

wx.navigateToMiniProgram({
  appId: 'wxxxxxxx',
  path: 'pages/index/index',
  success(res) {}
})

• 限制：仅公众号网页可用，个人号 H5 不行。

二、原生 App（iOS / Android / Flutter / React Native / UniApp）

App 分两种：微信生态 App（企业微信）、普通独立 App

1.普通原生 App（iOS/Android）

方式1：微信开放平台 SDK（最正规）

集成微信 SDK，调用跳转小程序 API：

• iOS：WXLaunchMiniProgramReq
• Android：WXAPIFactory.createWXAPI → launchMiniProgram
• 要求：App 在微信开放平台注册，获取 AppID，开通小程序跳转权限
• 可指定：小程序 appid、页面路径、携带参数

方式2：URL Scheme 唤起（简单但不稳定）

weixin://dl/business/?appid=wxxxxxxx

部分系统可直接跳转，微信版本更新容易失效。

2.UniApp / Flutter / React Native

• UniApp：uni.navigateToMiniProgram
• Flutter：调用原生微信 SDK 封装
• RN：桥接原生微信跳转 API

三、微信小程序内部互相跳转

1.同主体小程序跳转

wx.navigateToMiniProgram({
  appId: 'wxxxxx',
  path: 'pages/index/index'
})

2.不同主体小程序跳转

需要在小程序后台配置关联，否则无法跳转。

3.跳转回自身（普通页面跳转）

wx.navigateTo / wx.redirectTo

四、其他场景跳转微信小程序

1.公众号 → 小程序

1. 公众号菜单直接绑定小程序
2. 公众号文章插入小程序卡片
3. 公众号 H5 用 wx-open-launch-weapp 跳转

2.企业微信 → 小程序

企业微信 H5/应用可直接调用微信 SDK 跳转，权限更宽松。

3.PC 网页 / PC 浏览器

无法直接打开小程序，只能展示小程序码，手机扫码进入。

4.短信、邮件、二维码

• 短信发送小程序短链，手机微信打开
• 二维码/小程序码：微信扫码直接进入（最通用、无环境限制）

最佳实践

• 微信内 H5 优先用 wx-open-launch-weapp，官方稳定
• 外部环境一律用小程序码，兼容性最强
• App 必须接入微信开放平台 SDK，不要用不稳定的 scheme
• 所有跳转必须配置小程序白名单、业务域名