微信小程序使用navigator實現頁面跳轉功能

Posted on by

前言

在微信小程序開發中，navigator 用來實現頁面路由功能，比如 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 是我頁面綁定的參數，在對應的方法中通過 currentTarget.dataset.index 方式獲取

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

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

然後 在目標頁面中的 onLoad 方法中可以獲取這個參數

  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 關閉當前頁面 並攜帶參數

A頁面通過wx.navigateTo跳入到B頁面，然後B頁面執行wx.navigateBack返回到A頁面時候傳給A頁面參數

A頁面中定義接收

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    param: undefined,
  },

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

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

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

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

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

完畢

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

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

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

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

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

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

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

發現無法跳轉,並且也不報錯,就很奇怪

後來發現微信小程序開發中如果之前在app.json中設置瞭TabBar並且其中list中已有路徑,那麼在其它地方就不能再使用，使用不報錯,但是也無效,不會發生跳轉。

將tabbar下的pages/shoplist/shoplist路徑對應的對象刪除之後,再在index頁面中點擊navigator,就可以跳轉到想要的頁面瞭

總結

到此這篇關於微信小程序使用navigator實現頁面跳轉功能的文章就介紹到這瞭,更多相關小程序navigator頁面跳轉內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：