① 小程序页面跳转方式
小程序页面的跳转方式有多种,以下是常见的四种操作:
首先,wx.navigateTo(OBJECT)是最常见的跳转方式,官方描述为“在当前页面的基础上跳转到其他页面”,类似HTML的window.location.href,例如:wx.navigateTo({ url: 'test?id=1' })。小程序页面左上角通常有返回箭头,可返回上一个页面。另外,wx.navigateBack方法可用于返回原页面。
wx.redirectTo(OBJECT)则是关闭当前页面并跳转,类似于window.open。例如:wx.redirectTo({ url: 'test?id=1' }),不同之处在于左上角无返回箭头,不能直接返回上一个页面。
wx.switchTab(OBJECT)用来切换到 tabBar 页面,关闭其他非 tabBar 页面,例如:{ "tabBar": { "list": [ ... ] } },wx.switchTab({ url: '/index' })。注意,wx.navigateTo和wx.redirectTo不能跳转到 tabBar,而switchTab则是唯一的选择。
wx.reLaunch(OBJECT)功能更为特殊,它会关闭所有页面并打开指定页面,与wx.redirectTo相似,但没有返回箭头。不过,getCurrentPages方法在reLaunch后的页面堆栈管理上有所不同:reLaunch会清空堆栈。
② 如何实现微信小程序页面跳转功能
微信小程序页面跳转功能让开发者能轻松链接不同小程序或公众号,满足多样化的功能需求。实现这一功能分为跳转小程序和跳转公众号两部分。
跳转小程序主要在已发布成功的小程序中进行。首先,通过选择小程序制作工具如「上线了」,注册账号并选择模板,添加所需功能版块。发布小程序后,进入编辑器,选择图片banner或快捷按钮版块,设置“跳转小程序”链接类型,选择已发布的上线了小程序或输入跳转小程序的APPID,完成配置。
跳转公众号同样在小程序编辑器内进行,通过设置微信小程序账号,扫码关注公众号,即可在小程序底部显示公众号入口。商家在公众号自定义菜单栏添加小程序链接,粉丝即可在公众号底部直接访问小程序。
值得注意的是,微信小程序目前仅支持HTTPS页面跳转至外部链接。
通过跳转功能,小程序与公众号、外部链接形成信息互通,有助于商家扩大业务范围,拓宽线上流量渠道。在私域流量时代,实现信息共享对于提升用户黏性、优化用户体验具有重要意义。
③ 微信小程序使用navigator实现页面跳转功能
在微信小程序开发中,navigator组件主要用于实现页面之间的跳转功能。页面之间的跳转方式主要分为五种:默认方式打开新的页面、替换当前页面、重新加载当前页面、关闭当前页面和关闭当前页面并携带参数。
首先,navigator的默认方式打开新的页面,等效于在view标签中绑定点击事件。例如,如果在A页面中点击按钮打开B页面,可以使用navigator组件,设置url属性为B页面的路径,并设置open-type为"navigate"。
其次,redirect可以替换当前页面,其open-type取值为"redirect",类似于HTML中的a标签的跳转方式。
reLaunch则会重新加载当前页面,open-type取值为"reLaunch"。这种跳转方式会关闭所有页面,打开指定页面。
另外,navigator组件还支持关闭当前页面。在A页面中,可以直接使用navigator标签嵌套,设置open-type为"navigateBack",在点击时会关闭当前页面,返回上一层。
如果需要在关闭当前页面时携带参数,可以使用navigateBack方法,并设置delta参数。在B页面中,通过getCurrentPages()方法获取当前页面栈的信息,获取到上一个页面的page对象后,可以修改其数据,实现数据回传。
最后,解决微信小程序navigator点击无法跳转的问题。在开发过程中,经常会遇到页面跳转不成功的情况,这可能是由于在app.json中配置了TabBar,并且其中已经包含了路径。此时,在其他地方再次使用相同的路径进行跳转,不会发生跳转,也不会报错。解决方法是删除tabbar下的对应路径,然后再尝试跳转。