微信小程序（2）——页面跳转

蔚落 2022-05-19 02:13 515阅读 0赞

微信小程序没有标签，那么微信小程序是如何进行页面跳转的呢？

▍默认提供的tabBar跳转

仅需要按照规范配置即可生效，仅限于底部导航栏页面间的跳转，即app.json中的tabBar配置：

  1. {
  2.   "tabBar": {
  3.     "list": [{
  4.       "pagePath": "pages/index/index",
  5.       "text": "首页"
  6.     }, {
  7.       "pagePath": "pages/logs/logs",
  8.       "text": "日志"
  9.     }]
  10.   }
  11. }

▍页面路由

1、只有标签，如：

  1. /** demo.wxml **/
  2. <navigator url="../demo1/demo1">点我跳转至demo1页面</navigator>

点击后发生跳转，跳转至demo1页面，此时日志页面带有返回按钮，可返回至跳转前的页面。

2、标签上附有redirect属性，如：

  1. /** demo.wxml **/
  2. <navigator url="../demo1/demo1" redirect>点我跳转至demo1页面</navigator>

可跳转至demo1页面，但是通过重定向方法跳转的页面无法返回至跳转前的页面。

3、js跳转，有3种跳转方法，下面为每一种方法写一个js文件，但为了简便，就共用一个demo.wxml：

  1. /** demo.wxml **/
  2. <view>
  3.   <button type="default" ontap="goto">点击跳转</button>
  4. </view>

3.1、wx.navigateTo：普通跳转

  1. /** demo.js **/
  2. Page({
  3.   goto: function() {
  4.     wx.navigateTo({
  5.       // 此处url写跳转目标页面的相对路径
  6.       url: "../demo1/demo1"
  7.     })
  8.   }
  9. })

其效果类似于不带属性的标签。可返回至跳转前页面，即可返回至demo.wxml。

3.2、wx.redirectTo：重定向

  1. /** demo.js **/
  2. Page({
  3.   goto: function() {
  4.     wx.redirectTo({
  5.       // 此处url写跳转目标页面的相对路径
  6.       url: "../demo1/demo1"
  7.     })
  8.   }
  9. })

可跳转至demo1页面，但是通过重定向方法跳转的页面无法返回至跳转前的页面。

3.3、wx.navigateBack：页面返回

  1. /** demo.js **/
  2. Page({
  3.   goto: function() {
  4.     // 页面返回
  5.     wx.navigateBack({
  6.       // delta指往前返回几个页面
  7.       delta: 2
  8.     })
  9.   }
  10. })

发表评论

表情：
评论列表 （有 0 条评论，515人围观）

还没有评论，来说两句吧...

相关阅读