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

微信小程序没有<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
    })
  }
})