在微信内嵌 H5 页面跳转到小程序（精简示例）

原创已于 2025-09-22 13:39:49 修改 · 434 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #小程序

于 2025-09-22 11:31:21 首次发布

微信小程序专栏收录该内容

2 篇文章

订阅专栏

在微信内嵌 H5 页面跳转到小程序（精简示例）

场景说明

在微信内打开的 H5 页面中，发起跳转至指定微信小程序的业务页面。

前置条件

已在微信内打开该 H5 页面（公众号菜单/消息/扫码等）。
已获得目标小程序的 AppID 与要打开的 页面路径。
H5 站点使用 HTTPS，且已在小程序和公众号后台正确配置业务/JS 接口安全域名。

引入脚本

<!-- Weixin JS-SDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni-webview 桥接（用于 H5 与小程序通信） -->
<script src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

调用示例

(() => {
  const isWeChat = /MicroMessenger/i.test(navigator.userAgent);
  if (!isWeChat) {
    alert('请在微信内打开以使用该功能');
    return;
  }

  try {
    // 目标小程序信息
    const appId = ''; //你的appid
    const miniPagePath = 'pages/index/index'; // 例如：pages/index/index?foo=bar

    // 约定：跳转至当前小程序内的中转页 /pages/mini/index，由小程序侧再调用 wx.navigateToMiniProgram
    const encodedPath = encodeURIComponent(miniPagePath);
    const url = `/pages/mini/index?appId=${appId}&path=${encodedPath}`;

    // 首选：通过 uni-webview 桥接通知小程序侧处理
    if (window.uni && uni.webView && typeof uni.webView.navigateTo === 'function') {
      uni.webView.navigateTo({ url });
      return;
    }

    // 备用：若已注入 WeixinJSBridge 的小程序 Webview 能力（具体实现视宿主小程序而定）
    if (typeof wx !== 'undefined' && wx.miniProgram && typeof wx.miniProgram.navigateTo === 'function') {
      wx.miniProgram.navigateTo({ url });
      return;
    }

    console.warn('未检测到可用的跳转桥接能力：uni.webView.navigateTo / wx.miniProgram.navigateTo');
  } catch (err) {
    console.error('跳转小程序失败：', err);
    alert('跳转失败，请稍后重试');
  }
})();

在小程序中转页实现跳转功能

// /pages/mini/index
Page({
  onLoad(query) {
    const { appId, path } = query;
    wx.navigateToMiniProgram({
      appId,
      path,
      fail(err) {
        console.error('跳转小程序失败：', err);
        wx.showToast({
          title: '跳转失败，请稍后重试',
          icon: 'none',
        });
      },
    });
  },
});