微信小程序頁面跳轉方法和攜帶參數詳解

1.頁面跳轉方式

 

 

(1)標簽跳轉

 

open-type的屬性值對應api里的用法即wx.的用法

 

1 <navigator url="/page/navigate/navigate?title=navigate" open-type="switchTab" hover-class="navigator-hover">跳轉到新頁面</navigator>

 

 

(2)wx.navigateTo 方法跳轉

 

此方法能夠從跳轉的頁面會回到當前頁面

 

1 wx.navigateTo({
2 url: 'pages/a/a'
3 })

 

 

 

 

---

 

(3)wx.switchTab 方法跳轉只適用於調轉到設置了tabbar的頁面

 

1 wx.switchTab({
2 url: 'pages/index/index'
3 })

 

 

(4)wx.redirectTo 方法跳轉會關閉當前頁面跳轉到某個頁面

 

1 wx.redirectTo({
2 url: 'pages/a/a'
3 })

 

 

(5)wx.reLaunch 方法跳轉會關閉所有打開的頁面，跳轉到某個頁面

 

1 wx.reLaunch({
2 url: 'pages/a/a'
3 })

 

(6)wx.navigateBack 方法返回到父頁面 ，可以多級返回

 

1 // 此處是A頁面
2 wx.navigateTo({
3 url: 'B?id=1'
4 })

 

 

1 // 此處是B頁面
2 wx.navigateTo({
3 url: 'C?id=1'
4 })

 

1  
2 // 在C頁面內 navigateBack，將返回A頁面
3 wx.navigateBack({
4 delta: 2 //跳轉的級數
5 })

 

 

2.頁面跳轉攜帶參數(以傳遞兩個參數為例)

 

攜帶參數的跳轉分兩個方面，一方面是本頁面傳遞參數，另一方是跳轉頁面接收參數，我就拿前兩種方式作為例子

 

1.標簽跳轉攜帶參數

 

 

a頁面

1 //a.wxml 頁面傳遞
2 <navigator url="/pages/b/b?id=1&tu='a.jpg' " hover-class="none">
3 跳轉到b
4 <navigator>

 

b頁面

 

1 //b.js 頁面接收參數
2 onLoad: function (options) {       //options用於接收上個頁面傳遞過來的參數
3 var that = this;
4 that.setData({                             //this.setData的方法用於把傳遞過來的id轉化成小程序模板語言
5 b_id: options.id,     //id是a頁面傳遞過來的名稱，a_id是保存在本頁面的全局變量   {{b_id}}方法使用
6 b_tu: options.tu,
7 })
8 }

 

 

2.wx.navigateTo跳轉攜帶參數

 

a頁面

1 //a.wxml 綁定跳轉函數
2 <view  bindtap='tapLogin' >
3 立即登錄
4 </view>

 

 

 1 //a.js 跳轉函數
 2 tapLogin:function() {
 3 //這一步是為了把模板語言轉化成js語言
 4 var id=that.data.id; 
 5 var tu = that.data.id
 6  
 7 wx.navigateTo({
 8 url: '/pages/b/b?id=' + 1 + "&tu=" + 'a.jpg'
 9 });
10  
11 },

 

 

b頁面

1 //b.js 頁面接收參數
2  onLoad: function (options) {       //options用於接收上個頁面傳遞過來的參數
3  var that = this;
4  that.setData({                             //this.setData的方法用於把傳遞過來的id轉化成小程序模板語言
5 b_id: options.id,     //id是a頁面傳遞過來的名稱，a_id是保存在本頁面的全局變量   {{b_id}}方法使用
6  b_tu: options.tu,
7  })
8  }