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

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

微信小程序这几年发展得很快,能做的事情越来越多,页面之间的跳转也就成了开发里绕不开的一环。用户点了商品卡片要进详情页,看完活动说明要回首页,登录态失效了还要重新走一遍流程——这些交互背后,都是跳转逻辑在撑着。实现方式有好几种,下面挑最常用的来说一说,各有各的用武之地。

先说借助第三方工具的路子,以快缩短网址(suo.run)为例。它解决的问题和纯代码方案不太一样:写代码处理的是小程序内部的页面流转,而很多时候你需要从外部把用户带进来——海报上的二维码、短信里的链接、投放中的广告,都属于这一类。操作本身并不复杂:打开 https://www.suo.run/mini,登录账号进入控制台,在左侧菜单找到【跳转小程序】-【跳转微信小程序】,点【创建小程序链接】,按需求填好相关配置,一条可用的小程序链接就生成了,全程不用写一行代码,运营人员自己就能搞定。更省心的是,链接生成之后还能随时更换跳转目标——有没有遇到过这种尴尬:海报印好了,广告也投出去了,落地页却临时要换?后台改一下地址就行,物料完全不用重做。

说完外部,回到小程序内部。内部跳转最常用的是 wx.navigateTo,一般写在点击事件的回调函数里,调用时传入目标页面的路径:



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

点击事件一触发,页面就跳过去了。有意思的是,navigateTo 并不销毁原页面,只是把它压进页面栈,用户随时可以点左上角返回上一页。这种“保留来路”的设计,很适合列表进详情、首页进二级页这类浏览型场景。不过页面栈最多十层,层级嵌套太深时 navigateTo 就跳不动了,这时候得换个方式。

如果不打算让用户“回头”,可以改用 wx.redirectTo。写法几乎一样,同样放在点击回调里,传入目标路径:

wx.redirectTo({ url: '../detail/detail' })



不同的地方在于,它会先关闭当前页面再跳转,相当于替换而不是叠加。最典型的场景是登录页:登录成功之后,用户没必要再退回登录页,直接换成主页面,体验更顺畅。

reLaunch 则走得更彻底:先关闭所有已打开的页面,再打开应用内的某个指定页面。

wx.reLaunch({ url: '../detail/detail' })

这种清空重来的思路,适合需要强制重置用户路径的时候,比如登录态过期、切换账号,或者活动结束后把人带回首页。



顺带一提,这些跳转除了在 JS 里调用 API 实现,小程序还提供了 navigator 组件,直接写在 WXML 里就能完成声明式跳转,行为和对应方法基本一致,适合入口固定、结构清晰的页面。

回过头梳理一下,几种方式各管一段:要把外部用户带进小程序,用工具生成跳转链接最省事;内部跳转想保留返回路径,选 navigateTo;要替换当前页,交给 redirectTo;想彻底重置路径,就用 reLaunch。实际开发中按场景搭配着用,页面之间的流转基本就理顺了。