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

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

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

▍默认提供的tabBar跳转

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

{
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        }, {
          "pagePath": "pages/logs/logs",
          "text": "日志"
        }]
      }
    }

▍页面路由

1、只有<navigator></navigator>标签，如：

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

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

2、<navigator></navigator>标签上附有redirect属性，如：

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

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

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

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

3.1、wx.navigateTo：普通跳转

/** demo.js **/
    Page({
      goto: function() {
        wx.navigateTo({
          // 此处url写跳转目标页面的相对路径
          url: "../demo1/demo1"
        })
      }
    })

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

3.2、wx.redirectTo：重定向

/** demo.js **/
    Page({
      goto: function() {
        wx.redirectTo({
          // 此处url写跳转目标页面的相对路径
          url: "../demo1/demo1"
        })
      }
    })

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

3.3、wx.navigateBack：页面返回

/** demo.js **/
    Page({
      goto: function() {
        // 页面返回
        wx.navigateBack({
          // delta指往前返回几个页面
          delta: 2
        })
      }
    })