Escanear código QR Carregar código QR
Loja de dominios
Selecione o tipo de plataforma anti-bloqueio para evitar interceptação de links
Selecionar tipos de plataforma permitidos para acesso

如何将小程序跳转到链接

做过小程序开发的人都清楚,跳转链接几乎是日常需求里绕不开的一环。产品文档里可能就一句“点击跳转到活动页”,但落到实现上,首先得判断这是跳小程序内部页面,还是打开外部网页。两者对应的处理方式完全不同,搞混了往往会在真机上碰壁。



如果只是固定入口,比如首页 banner 点进去看活动详情,用小程序自带的 navigator 组件最省事。它可以直接写在页面结构里,把目标路径通过属性传给组件,再配合点击事件就能完成跳转。这种方式很直观,适合不需要动态变化的一次性跳转。

可一旦跳转目标需要携带参数,或者页面之间有上下文关系,wx.navigateTo 就更合适。比如从列表页点进某条数据,把 id 拼到路径里传到详情页。这种跳转不会销毁当前页面,用户返回时还能回到原来的列表位置,浏览状态不会丢。对于“列表进详情”这种高频场景,这点尤其重要。

还有一种情况是,点击后不希望直接在当前页面上覆盖,而是新开一个上下文。navigator 组件的 target 属性可以满足这个需求。设置后,跳转行为会改变,用户看完新内容后还能回到之前的页面继续操作。虽然不同平台对“新窗口”的支持程度不太一致,但在需要保留当前页面状态的场景下,它仍然是一个实用的选择。

除了内部跳转,外部链接是更容易出问题的地方。不少开发者第一次在真机上点外部链接,会看到“无法打开”之类的提示,多半不是代码写错,而是域名没配好。小程序会拦截不在白名单里的域名,必须提前到管理后台,把目标域名加进业务域名或相关白名单。尤其要注意,测试环境正常、上线后跳转失败,很多时候就是因为线上域名没配全。另外,外部页面通常要借助 web-view 组件来承载,单独调用跳转 API 并不能直接打开浏览器。



把这几类场景分清之后,选择也就清晰了:内部动态页面之间用 wx.navigateTo,固定入口用 navigator 组件,需要保留当前页时设置 target,碰到外部链接先把域名白名单配好。基础理顺了,小程序里的跳转功能基本就不会再出什么大问题。