微信小程序的路由与页面栈

落日映苍穹つ 2023-06-11 04:28 23阅读 0赞

路由就是根据不同的URL显示不同的内容或者页面，也就是跳转页面。

#### 一、切换路由 ####

页面大体分为两种，一种是tabbar页面，一种是非tabbar页面。tabbar页面就是在 `app.json` 的 tabBar 字段定义的页面，每个页面底部会有tabbar，其余都为非tabbar页面。  
**tabbar 示例：**

![美团底部tabbar][tabbar]

美团底部tabbar

小程序切换路由的方式有：  
（1）wx.switchTab(Object object)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。  
（2）wx.reLaunch(Object object)：关闭所有页面，打开到应用内的某个页面。  
（3）wx.redirectTo(Object object)：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。  
（4）wx.navigateTo(Object object)：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。  
这四种都是页面跳转API，参数有：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>url</td> 
   <td>string</td> 
   <td></td> 
   <td>是</td> 
   <td>需要跳转的 tabBar 页面的路径，路径后不能带参数。</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
  <tr> 
   <td><font>events (navigateTo) </font></td> 
   <td><font>Object</font></td> 
   <td></td> 
   <td><font>否</font></td> 
   <td><font>页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。</font></td> 
  </tr> 
 </tbody> 
</table>

示例：

wx.redirectTo({ 
      url: 'test?id=1' //调用页面路由带的参数可以在目标页面的onLoad中获取。
    })

（5）wx.navigateBack(Object object)：关闭当前页面，返回上一页面或多级页面。

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>必填项</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>delta</td> 
   <td>number</td> 
   <td>1</td> 
   <td>否</td> 
   <td>返回的页面数，如果 delta 大于现有页面数，则返回到首页。</td> 
  </tr> 
  <tr> 
   <td>success</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用成功的回调函数</td> 
  </tr> 
  <tr> 
   <td>fail</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用失败的回调函数</td> 
  </tr> 
  <tr> 
   <td>complete</td> 
   <td>function</td> 
   <td></td> 
   <td>否</td> 
   <td>接口调用结束的回调函数（调用成功、失败都会执行）</td> 
  </tr> 
 </tbody> 
</table>

示例：

wx.navigateBack({ 
      delta: 2
    })

#### 二、页面栈 ####

小程序的页面进行堆栈，以栈的形式维护了当前的所有页面。使用`wx.navigateTo()`跳转页面的时候保留了当前页面，即页面入栈，使用`wx.navigateBack()`可回退页面，即页面出栈。小程序中页面栈最多 **十层** 。  
**路由和页面栈的联系：**

<table> 
 <thead> 
  <tr> 
   <th>路由方式</th> 
   <th>触发时机</th> 
   <th>页面栈表现</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>初始化</td> 
   <td>小程序打开的第一个页面</td> 
   <td>新页面入栈</td> 
  </tr> 
  <tr> 
   <td>打开新页面</td> 
   <td>调用 API wx.navigateTo，使用组件<code>&lt;navigator open-type="navigateTo"/&gt;</code></td> 
   <td>新页面入栈</td> 
  </tr> 
  <tr> 
   <td>页面重定向</td> 
   <td>调用 API wx.redirectTo，使用组件 <code>&lt;navigator open-type="redirectTo"/&gt;</code></td> 
   <td>当前页面出栈，新页面入栈</td> 
  </tr> 
  <tr> 
   <td>页面返回</td> 
   <td>调用 API wx.navigateBack，使用组件<code>&lt;navigator open-type="navigateBack"&gt;</code>，用户按左上角返回按钮</td> 
   <td>页面不断出栈，直到目标返回页</td> 
  </tr> 
  <tr> 
   <td>Tab 切换</td> 
   <td>调用 API wx.switchTab，使用组件 <code>&lt;navigator open-type="switchTab"/&gt;</code>, 用户切换 Tab</td> 
   <td>页面全部出栈，只留下新的 Tab 页面</td> 
  </tr> 
  <tr> 
   <td>重加载</td> 
   <td>调用 API wx.reLaunch，使用组件<code>&lt;navigator open-type="reLaunch"/&gt;</code></td> 
   <td>页面全部出栈，只留下新的页面</td> 
  </tr> 
 </tbody> 
</table>

**获取当前页面栈：**  
`getCurrentPages();`获取当前页面栈，数组中第一个元素为首页，最后一个元素为当前页面。  
示例：

var pagesList=getCurrentPages(); //获取到的是一个数组
    pagesList[pagesList.length-1];//当前页面（对象）
    pagesList[pagesList.length-2];//上一个页面（对象）

**注意：**

*  navigateTo, redirectTo 只能打开非 tabBar 页面。
 *  switchTab 只能打开 tabBar 页面。
 *  reLaunch 可以打开任意页面。
 *  不要尝试修改页面栈，会导致路由以及页面状态错误。
 *  不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

#### 三、实际应用 ####

（1）在当前页面选择返回上一页面显示选择结果。

<button type="primary" bindtap="toSelect">请选择</button>
    <text>您当前选择的是：{
       {value}}</text>
    
    
    <radio-group class="radio-group" bindchange="radioChange">
        <radio class="radio" wx:for-items="{ {items}}" wx:key="name" value="{ {item.name}}" checked="{ {item.checked}}">
            <text>{
       {item.value}}</text>
        </radio>
    </radio-group>

//js
    //A页面
    Page({ 
      data: { 
        value:"",
      },
      toSelect(){ 
        wx.navigateTo({ 
          url: '/pages/pageB/pageB', //跳转到B页面
        })
      },
    })
    
    //B页面
    Page({ 
      data: { 
        items: [
          {  name: '美国', value: '美国' },
          {  name: '中国', value: '中国' },
          {  name: '巴西', value: '巴西' },
          {  name: '日本', value: '日本' },
          {  name: '英国', value: '英国' },
          {  name: '法国', value: '法国' },
        ]
      },
      radioChange: function (e) { 
        var value = e.detail.value;
        var pagesList=getCurrentPages();
        var prevPage=pagesList[pagesList.length-2];
        prevPage.setData({ 
          value // 这里是需要传递的参数值
        })
      }
    })

(2) 执行上个页面的方法。

var pagesList=getCurrentPages();
    var prevPage=pagesList[pagesList.length-2];
    prevPage.test(); //test()是上个页面的方法

[tabbar]: /images/20230531/5ec0383e375747b399d84d8328567a13.png