快捷導(dǎo)航

微信小程序使用navigator實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能

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

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

前言
1 navigator 默認(rèn)方式打開(kāi)新的頁(yè)面
2 redirect 替換當(dāng)前頁(yè)面
3 reLaunch 重新加載當(dāng)前頁(yè)面
4 navigateBack 關(guān)閉當(dāng)前頁(yè)面
5 navigateBack 關(guān)閉當(dāng)前頁(yè)面并攜帶參數(shù)
補(bǔ)充：解決微信小程序navigator點(diǎn)擊無(wú)法跳轉(zhuǎn)的問(wèn)題
總結(jié)

前言

在微信小程序開(kāi)發(fā)中，navigator 用來(lái)實(shí)現(xiàn)頁(yè)面路由功能，比如 A頁(yè)面中點(diǎn)擊頁(yè)面打開(kāi)B頁(yè)面

1 navigator 默認(rèn)方式打開(kāi)新的頁(yè)面

<navigator url="/pages/code1/navigator/bPage">
  <text>打開(kāi)B頁(yè)面</text>
</navigator>

等效于

<navigator url="/pages/code1/navigator/bPage" open-type="navigate">
  <text>打開(kāi)B頁(yè)面</text>
</navigator>

open-type 是指定了頁(yè)面跳轉(zhuǎn)的方式，默認(rèn)是 navigate ，頁(yè)面層疊方式如下

對(duì)應(yīng)的有點(diǎn)擊事件，在JS中打開(kāi)頁(yè)面

<view bindtap="openNavigatorBPage" data-index='1'><text>打開(kāi)B頁(yè)面</text></view>

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

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

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

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

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

2 redirect 替換當(dāng)前頁(yè)面

open-type 可取值為 redirect ，就是直接替換當(dāng)前頁(yè)面

<!--類似a標(biāo)簽  open-type 跳轉(zhuǎn)方式-->
<navigator url="/pages/code1/navigator/bPage" open-type="redirect">
  <text>打開(kāi)B頁(yè)面</text>
</navigator>

對(duì)應(yīng)的 js 方法為

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

3 reLaunch 重新加載當(dāng)前頁(yè)面

open-type 可取值為 reLaunch ，就是相當(dāng)于是重新加載了一下當(dāng)前頁(yè)面

<navigator url="/pages/code1/navigator/bPage" open-type="reLaunch">
  <text>打開(kāi)B頁(yè)面</text>
</navigator>

對(duì)應(yīng)的 js 方法為

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

4 navigateBack 關(guān)閉當(dāng)前頁(yè)面

可以直接在頁(yè)面中使用 navigator 標(biāo)簽嵌套

<navigator open-type="navigateBack">
  <text>關(guān)閉頁(yè)面</text>
</navigator>

等效于

<view bindtap="closeBPage" data-index='1'>
  <text>關(guān)閉B頁(yè)面</text>
</view>

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

5 navigateBack 關(guān)閉當(dāng)前頁(yè)面并攜帶參數(shù)

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

A頁(yè)面中定義接收

Page({

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

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

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

在B頁(yè)面中，關(guān)閉B頁(yè)面的時(shí)候，設(shè)置回傳參數(shù)

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

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

完畢

補(bǔ)充：解決微信小程序navigator點(diǎn)擊無(wú)法跳轉(zhuǎn)的問(wèn)題

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

1、app.json里面是否配置了頁(yè)面，如果未配置,請(qǐng)?jiān)趐ages中添加。

2、跳轉(zhuǎn)路徑是否正確，盡量不要用相對(duì)路徑,使用絕對(duì)路徑’/pages/…’。

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

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

**這是我的index頁(yè)面,我想點(diǎn)擊這個(gè)導(dǎo)航跳轉(zhuǎn)并傳遞參數(shù)到pages下面的shoplist頁(yè)面**

發(fā)現(xiàn)無(wú)法跳轉(zhuǎn),并且也不報(bào)錯(cuò),就很奇怪

后來(lái)發(fā)現(xiàn)微信小程序開(kāi)發(fā)中如果之前在app.json中設(shè)置了TabBar并且其中l(wèi)ist中已有路徑,那么在其它地方就不能再使用，使用不報(bào)錯(cuò),但是也無(wú)效,不會(huì)發(fā)生跳轉(zhuǎn)。

將tabbar下的pages/shoplist/shoplist路徑對(duì)應(yīng)的對(duì)象刪除之后,再在index頁(yè)面中點(diǎn)擊navigator,就可以跳轉(zhuǎn)到想要的頁(yè)面了

總結(jié)

到此這篇關(guān)于微信小程序使用navigator實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)功能的文章就介紹到這了,更多相關(guān)小程序navigator頁(yè)面跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: