掃描二維碼 上傳二維碼
域名商店
選擇防紅平台類型,避免鏈接被攔截
選擇允許訪問的平台類型

如何将小程序跳转到链接

做过小程序开发的朋友,多半都有过这种体会:页面跳转这件事,看着无非是点一下、翻一页,真动手才发现讲究不少。Banner 点了要进活动页,商品卡片要跳详情,客服入口说不定还得打开一份外部的帮助文档……几乎哪个项目都会遇到这类需求。好在小程序官方给的跳转方式够全,理清各自适合的场景之后,选起来并不费劲。

要说最省事的,还得是 navigator 组件。声明式写法,直接在 wxml 里把 url 指向目标页面,用户点击就能跳,一行 JS 都用不着。像底部导航、列表卡片这种位置固定的入口,交给它再合适不过。想控制跳转行为的话,也可以通过 open-type 来指定:是保留当前页、关闭当前页,还是切换到 tab 页,灵活性其实不低。



但有些跳转没这么"直给"。拿提交表单来说,往往得先做校验,通过了才能放行下一步——这就得在 JS 里写判断,再调用 wx.navigateTo。这个方法会把目标页面压进页面栈,用户点左上角还能退回上一页,跟大多数流程的操作习惯是吻合的。要是不想让人返回,换成 wx.redirectTo 就好。组件式和 API 式并不矛盾,实际项目里通常混着用:静态入口归 navigator,带逻辑判断的归 JS。



如果想跳到另一个小程序,前面这两招就派不上用场了。wx.navigateToMiniProgram 专门干这个,传入对方的 app-id 和页面路径就能唤起。实在不想写 JS,navigator 组件也办得到:把 target 属性设为 miniProgram,再配好 app-id 就行。电商导流、矩阵产品之间互相跳转,基本都是这套打法。

还有一种情况也很常见:要打开的是普通网页,比如一篇图文消息,或者一个活动 H5。小程序里可没有浏览器那种"开新窗口"的概念,正确的做法是用 web-view 组件把网页嵌进来。整个页面放一个 web-view,src 指向目标地址,用户在小程序内就能直接浏览外部内容,体验上不会断裂。

不过这里有个绕不过去的前提:域名白名单。小程序对网络请求和网页加载管得很严,web-view 要加载的域名,都得提前在小程序后台的业务域名里登记;接口请求则要配置 request 合法域名,哪一项没配,真机上都打不开。好在开发阶段有变通的办法,在开发者工具里勾选"不校验合法域名",先把流程跑通;但上线前一定要记得补齐配置,而且域名必须支持 HTTPS、完成备案,这些硬性要求没法讨价还价。

说到底,跳转方式没有绝对的好坏,关键看场景:页内跳转用 navigator 或 wx.navigateTo,跨小程序用 navigateToMiniProgram,嵌网页交给 web-view。把这套组合记熟,再提前把域名配置弄妥当,剩下的就是安心写业务代码的事了。