小程序如何跳轉到不同頁面

⑵ 微信小程序---tabBar&頁面跳轉

1、tabBar

在app.json文件中添加tabBar節點。tabBar是小程序客戶端底部或頂部tab欄的實現。

（1）tabBar相關屬性

color：tab上的文字默認顏色，僅支持十六進制顏色。

selectedColor：tab上的文字選中時的顏色，僅支持十六進制顏色。

backgroundColor：tab的背景色，僅支持十六進制顏色。

borderStyle：tabbar上邊框的顏色， 僅支持 black / white。

position：tabBar的位置，默認值是: bottom，僅支持 bottom / top。當 position 為 top 時，不顯示 icon。

custom：自定義tabBar。

"tabBar": {

    "color": "#000000",

    "selectedColor": "#336699",

    "backgroundColor": "#ffffff",

    "borderStyle": "black",

    "position": "bottom"

  }

（2）list

list：tab的列表。

list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。

pagePath：頁面路徑，必須在pages 中先定義。

text：tab 上按鈕文字。

iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。selectedIconPath：選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。

    "list": [

      {

        "text": "首頁",

        "pagePath": "pages/index/index",

        "iconPath": "assets/icon/home.png",

        "selectedIconPath": "assets/icon/home2.png"

      },

      {

        "text": "列表",

        "pagePath": "pages/list/list",

        "iconPath": "assets/icon/list.png",

        "selectedIconPath": "assets/icon/list2.png"

      }

]

2、頁面跳轉

（1）跳轉普通頁面

方法① navigator組件

 <!-- 跳轉到普通頁，可以通過返回按鈕返回 -->

 <navigator url="../detail/detail">到詳情頁</navigator>

方法② navigateTo()方法

navigateTo()方法，用於跳轉普通頁面。

<view bindtap="gotoDetail">到詳情頁</view>

gotoDetail(){

    //使用全局api跳轉，navigateTo()方法，用於跳轉普通頁面

    wx.navigateTo({

      url: '../detail/detail',

    })

   }

（2）跳轉tabBar頁面

方法① navigator組件

如果要使用navigator組件跳轉tabBar頁面，需要設置open-type="switchTab"。

 <!-- 跳轉到tabBar頁面，不可以通過返回按鈕返回。因為跳轉到指定的tabBar頁面後，會關閉其他所有頁面 -->

<navigator url="../list/list" open-type="switchTab">到列表頁</navigator>                                                                                      

方法② switchTab()方法

switchTab()方法，用於跳轉tabBar頁面。

  <view bindtap="gotoList">到列表頁</view>

gotoList(){

    wx.switchTab({

      url: '../list/list',

    })

  }

⑶ 微信小程序怎樣實現一個頁面裡面有兩個頁面切換

1、首先打開微信開發者工具。

⑷ 微信小程序頁面常用的5種跳轉方法

為了不讓用戶在使用小程序時造成困擾，微信小程序規定頁面路徑只能是 五層 ，所以需盡量避免多層級的交互方式。 而頁面跳轉則涉及到多個頁面層級。

保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。

需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；

如 'path?key=value&key2=value2'

eg:

wx.navigateTo({

    url:'test?id=1'

})

這種跳轉方式默認有返回按鈕，返回到上一個頁面

關閉當前頁面，跳轉到應用內的某個頁面。

需要跳轉的應用內非 tabBar 的頁面的路徑，路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；

如 'path?key=value&key2=value2'

eg:

wx.redirectTo({

    url:'test?id=1'

})

這種跳轉方式默認有返回按鈕，返回到上一個頁面的再上一層

需要跳轉的應用內頁面路徑 , 路徑後可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；

如 'path?key=value&key2=value2'，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數

eg:

wx.reLaunch({

    url:'test?id=1'

})

這種跳轉方式默認沒有返回按鈕，不需要默認返回按鈕的頁面就可以使用這個api了

需要跳轉的 tabBar 頁面的路徑（需在 app.json 的  tabBar  欄位定義的頁面），路徑後不能帶參數

{

    "tabBar": {

        "list": [{

            "pagePath":"index",

            "text":"首頁"

        },{

            "pagePath":"other",

            "text":"其他"

        }]

    }

}

wx.switchTab({

url:'/index'

})

我們需要調轉到tabbar定義的頁面的時候，就需要這個api了。踩過這個坑的人就知道，除了這個api，其他的都不能跳轉到tabar定義過的頁面

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages()) 獲取當前的頁面棧，決定需要返回幾層。

⑸ taro 微信小程序：五種跳轉方式

微信小程序用wx. xxx trao用taro.xxx

1.switchTab：只能跳轉到tabBar配置頁面（寫在app.json里tabbar的路徑url)

2.重定向：關閉當前頁面，跳轉到應用內的某個頁面（不能是app.json里tabbar的路徑）

3.保留當前頁面，跳轉到應用內的某個頁面（不能是app.json里tabbar的路徑），一般用於頁面之間的跳轉

4.關閉所有頁面，打開到應用內的某個頁面，一般用於注冊頁面，切換賬號

5.返回上一級頁面（delta：返回的頁面數，如果 delta 大於現有頁面數，則返回到首頁，默認值為1）