微信小程序使用navigator實現(xiàn)頁面跳轉功能

更新時間：2022年08月19日 15:40:45 作者：早起的年輕人

本周學習了navigtor到導航組件,目前我想使用navigtor組件實現(xiàn)跳轉以及返回功能,下面這篇文章主要給大家介紹了關于微信小程序使用navigator實現(xiàn)頁面跳轉功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

在微信小程序開發(fā)中，navigator 用來實現(xiàn)頁面路由功能，比如 A頁面中點擊頁面打開B頁面

1 navigator 默認方式打開新的頁面

<navigator url="/pages/code1/navigator/bPage">
  <text>打開B頁面</text>
</navigator>

等效于

<navigator url="/pages/code1/navigator/bPage" open-type="navigate">
  <text>打開B頁面</text>
</navigator>

open-type 是指定了頁面跳轉的方式，默認是 navigate ，頁面層疊方式如下

對應的有點擊事件，在JS中打開頁面

<view bindtap="openNavigatorBPage" data-index='1'><text>打開B頁面</text></view>

在這里 data-index 是我頁面綁定的參數(shù)，在對應的方法中通過 currentTarget.dataset.index 方式獲取

如果我寫的是 data-id ，那么點擊事件中獲取方式為 currentTarget.dataset.id

  openNavigatorBPage:function (options) {
    //獲取綁定的參數(shù)
    let id = options.currentTarget.dataset.index;
    wx.navigateTo({
      url: '/pages/code1/navigator/bPage?id='+id,
    })
  },

然后在目標頁面中的 onLoad 方法中可以獲取這個參數(shù)

  onLoad: function (options) {
    let id = options.id;
  },

2 redirect 替換當前頁面

open-type 可取值為 redirect ，就是直接替換當前頁面

<!--類似a標簽  open-type 跳轉方式-->
<navigator url="/pages/code1/navigator/bPage" open-type="redirect">
  <text>打開B頁面</text>
</navigator>

對應的 js 方法為

 wx.redirectTo({
    url: '/pages/code1/navigator/bPage?id='+id,
  })

3 reLaunch 重新加載當前頁面

open-type 可取值為 reLaunch ，就是相當于是重新加載了一下當前頁面

<navigator url="/pages/code1/navigator/bPage" open-type="reLaunch">
  <text>打開B頁面</text>
</navigator>

對應的 js 方法為

 wx.reLaunch({
    url: '/pages/code1/navigator/bPage?id='+id,
  })

4 navigateBack 關閉當前頁面

可以直接在頁面中使用 navigator 標簽嵌套

<navigator open-type="navigateBack">
  <text>關閉頁面</text>
</navigator>

等效于

<view bindtap="closeBPage" data-index='1'>
  <text>關閉B頁面</text>
</view>

  closeBPage: function () {
    wx.navigateBack()
  },

5 navigateBack 關閉當前頁面并攜帶參數(shù)

A頁面通過wx.navigateTo跳入到B頁面，然后B頁面執(zhí)行wx.navigateBack返回到A頁面時候傳給A頁面參數(shù)

A頁面中定義接收

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    param: undefined,
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
    let param = this.data.param;
    if (param) {
      //有回傳參數(shù) 處理頁面業(yè)務邏輯
    }
  },
）；

  //打開B頁面
  openNavigatorBPage: function (options) {
    //獲取綁定的參數(shù)
    let id = options.currentTarget.dataset.index;
    wx.re({
      url: '/pages/code1/navigator/bPage?id=' + id,
    })
  },

在B頁面中，關閉B頁面的時候，設置回傳參數(shù)

closeBPage: function () {
    //getCurrentPages()函數(shù)是用來獲取當前頁面棧的實例，
    //返回的是一個按棧的順序排列的數(shù)組pages_arr,且數(shù)組中的第一項為首頁，最后一項為當前頁。
    //獲取當前頁面js里面的pages里的所有信息。
    let pages = getCurrentPages();
    //pages[pages.length - 2]是指的上一頁，然后獲取到上一個頁的page對象后直接執(zhí)行修改param的操作，這樣就實現(xiàn)了在B頁面修改A頁面數(shù)據(jù)的功能
    let prevPage = pages[pages.length - 2];
    prevPage.setData({
      param: 111, // 設置需要傳遞的參數(shù)

    })
    wx.navigateBack({
      delta: 1
    })
  },

完畢

補充：解決微信小程序navigator點擊無法跳轉的問題

最近在搞微信小程序時發(fā)現(xiàn)頁面跳轉不成功，也沒有報錯，最后查了很多資料終于解決了問題，浪費了很多時間,現(xiàn)將可能的原因和我的解決方案列出來供各位參考：

1、app.json里面是否配置了頁面，如果未配置,請在pages中添加。

2、跳轉路徑是否正確，盡量不要用相對路徑,使用絕對路徑’/pages/…’。

3、分清幾種跳轉的方式，特別是TabBar中要使用wx.switchTab。

4、（最坑的問題,我遇到的問題就是這個）如果之前在app.json中設置了TabBar并且其中l(wèi)ist中已有路徑,那么在其它地方就不能再使用，使用不報錯,但是也無效,不會發(fā)生跳轉。例如我在TabBar中的list中設置了一個pages/shoplist/shoplist路徑，而我想在index頁面中通過點擊一個navigator跳轉到/pages/shoplist/shoplist這個頁面,就不能進行跳轉.

**這是我的index頁面,我想點擊這個導航跳轉并傳遞參數(shù)到pages下面的shoplist頁面**