QR कोड स्कैन करें QR कोड अपलोड करें
Domen store
लिंक को अवरुद्ध होने से बचाने के लिए एंटी-रेड प्लेटफॉर्म प्रकार चुनें
एक्सेस की अनुमति वाले प्लेटफॉर्म प्रकार चुनें

微信小程序实现页面跳转的三种方式

做小程序开发,页面跳转是最基本的事情,但很多人一开始没注意到,跳转其实有两种完全不一样的场景。一种是从外部渠道点进来,比如短信、海报或者社群分享的链接,直接打开小程序的某个页面;另一种是在小程序内部,从一个页面切到另一个页面。这两种场景的实现方式差别很大,用错了,轻则体验变差,重则直接跳不过去。下面就把这两种情况拆开,把常用的几种方式梳理清楚。



先说外部跳转。做活动的时候,我们经常需要把链接放到公众号文章里、印在宣传单上,或者群发给用户,让人点一下就直接进到小程序的某个页面。这时候光有小程序自己的页面路径是不够的,还需要一个能承载跳转的中间链接,而且最好能适配微信、浏览器等不同环境,避免被拦截或者出现“请在微信客户端打开”这类提示。目前比较省事的做法,是用专业的短链接工具来生成小程序链接。

比如快缩短网址(suo.run)就提供了“跳转微信小程序”的功能。用法不复杂:登录后进控制台,左侧菜单找到【跳转小程序】-【跳转微信小程序】,点“创建小程序链接”,然后按提示填好目标小程序的页面路径、参数,再设置一些兜底策略,比如用户没装微信时就跳到一个 H5 页面,提交后就能生成一条可以直接投放的短链接。这个链接不光能跳转小程序,还支持防红防屏蔽、设置访问密码、查看访问次数和来源,甚至可以为 iOS 和 Android 分别配置不同的落地页。对于做电商、社群推广或者短信营销的人来说,这种一站式生成、免登录也能用的方式,确实能省不少事。

当然,如果你只是在小程序内部做页面跳转,完全不需要外部链接,直接调用微信小程序原生的 API 就够了。最常用的有三种:navigateTo、redirectTo 和 reLaunch。

最常用的是 navigateTo。它的作用是保留当前页面,然后跳转到应用内的另一个页面。比如用户在商品列表页点了一个商品,你想打开商品详情页,同时保留列表页,好让用户返回时直接回到刚才的位置,这种情况用 navigateTo 就很合适。调用方式很简单,在点击事件的回调里直接写:

wx.navigateTo({
url: '/pages/detail/detail'
})




要注意的是,navigateTo 只能跳转非 tabBar 页面,而且页面栈最多十层,反复跳转太深可能会失败,实际开发中这一点需要留心。

第二种是 redirectTo。它会关闭当前页面,再跳转到目标页面。适合那种做完一个操作后就不再需要当前页面的场景,比如提交完订单,从确认页跳到支付成功页,用户肯定不希望按返回键又回到订单确认页,这时候用 redirectTo 替换掉当前页面,逻辑上就更干净。写法跟 navigateTo 几乎一样,只是方法名不同:

wx.redirectTo({
url: '/pages/success/success'
})


同样,redirectTo 也不能跳转 tabBar 页面,如果目标是 tabBar 页面,就得换一种方式。

第三种是 reLaunch,它的力度最大,会关闭所有已经打开的页面,然后打开目标页面。相当于把整个小程序重启到某个页面。一般在用户登录状态过期、需要重新走一遍初始化流程,或者从深层页面跳转到首页这种全局性跳转时使用。代码也很简单:

wx.reLaunch({
url: '/pages/index/index'
})




reLaunch 可以跳转 tabBar 页面,这是它跟前两种方法的一个重要区别。不过因为它的体验比较“粗暴”,用户会感觉像是被强制重置了,所以不适合频繁使用。



对比一下这三种内部跳转:navigateTo 最轻量,适合常规的页面流转;redirectTo 用于替换当前页,避免产生无意义的返回路径;reLaunch 则用于彻底重置应用状态。实际开发中,很多人习惯性地只用 navigateTo,结果页面栈越堆越深,最后出现一些莫名其妙的 bug,所以还是得根据业务逻辑去选。

另外,如果你用的是 uni-app 这类跨端框架,这些方法也都封装好了,用法基本一致,只是调用方式可能从 wx. 换成 uni.,原理是一样的。

还有一点值得提一下,小程序里也可以通过 navigator 组件来实现跳转,感觉上跟写 a 标签差不多。不过对于需要动态决定跳转目标、或者要在跳转前做判断的场景,用 API 来控制会更灵活。组件和 API 之间没有绝对的优劣,全看代码风格和具体需求。

总的来说,小程序页面跳转并不复杂,但场景一多,方法就容易用混。如果需要从外部引流进小程序,用短链接生成工具是最快的方式;如果是在小程序内部做导航,navigateTo、redirectTo、reLaunch 这三板斧基本能覆盖所有需求。关键是要搞清楚每种方法会怎么处理页面栈,以及能不能跳转 tabBar 页面,这样遇到实际问题时,就能快速选出最合适的方案,少走很多弯路。