如何实现小程序跳转到另外一个小程序

小程序做久了，几乎都会碰到一个需求：从自己的小程序跳进另一个小程序，或者反过来。比如内容小程序跳去电商小程序完成交易，工具小程序跳去客服小程序解答问题。这种跳转既能让用户少走几步弯路，也能把不同团队做出来的能力拼成一条更完整的服务链路。

动手写跳转之前，第一步要做的不是写代码，而是先把白名单配好。在发起跳转的小程序里，需要到 app.json 中声明目标小程序的 AppID，字段名一般是 navigateToMiniProgramAppIdList，接收一个数组，例如：

"navigateToMiniProgramAppIdList": [

  "wxabcdef123456"

]

这一步要是漏了，后面无论用组件还是 API 都拉不起来。配置完成后重新编译，在开发者工具里也能更早发现这类配置问题。

白名单配好之后，如果入口就放在页面结构里，用组件会更直观。navigator 组件要跳去另一个小程序，关键是 target 设为 miniProgram，再用 app-id 指向目标小程序，path 指定对方页面。示例：

<navigator

  target="miniProgram"

  open-type="navigate"

  app-id="wxabcdef123456"

  path="pages/index/index"

  extra-data="{{jumpData}}"

  version="release"

>进入对方小程序</navigator>

这里的 open-type 保持 navigate 就行，真正决定“跳到另一个小程序”的不是 url，而是 target 和 app-id。extra-data 用来携带额外参数，它的值是一个对象。

传过去的 extra-data，目标小程序可以在 App 的 onLaunch 或 onShow 里通过 options.referrerInfo.extraData 读取。容易混淆的是，页面 onLoad 里直接拿到的是 path 后面拼接的 query 参数，和 extra-data 不是一回事。所以如果既需要页面路径，又需要额外数据，最好分开传。

如果跳转是由点击按钮、提交表单或请求回调这类操作触发的，用 wx.navigateToMiniProgram 这个 API 会更顺手。它接收一个对象，appId 必填，path 和 extraData 可选。示例：

wx.navigateToMiniProgram({

  appId: 'wxabcdef123456',

  path: 'pages/index/index?id=123',

  extraData: {

    from: 'current',

    userId: 1001

  },

  envVersion: 'release',

  success: () => {},

  fail: () => {}

})

用 API 的好处是可以在调用前先做判断，比如根据用户状态、活动配置或后端返回值决定跳去哪个小程序，也方便在 success 和 fail 里分别处理成功和失败的情况。

如果目标小程序打不开，微信原生接口一般不会直接给一个 fallback 属性，更多是靠 fail 回调来兜底，比如提示用户稍后再试，或者引导到一个 H5 或备用页面。一些封装过的组件或第三方框架可能会自带 fallback 配置，这时候就得看它具体怎么实现。

现实中这类跳转已经很常见了。电商小程序跳去支付小程序完成收银，再跳回订单页；教育小程序跳去视频小程序看课，再回到题库小程序练习；活动小程序跳去领券小程序，领完再回商城继续下单。这样做既保留了各个小程序的边界，又通过跳转把体验接了起来，不用把所有功能都塞进一个包里。

做这类功能时，真正耗时间的通常不是跳转本身，而是路径配置、参数读取和真机联调。把白名单配好、路径写对，再在真机上完整点一遍流程，跳转体验就会稳定很多。