微信小程序頁面跳轉方法和攜帶參數詳解
阿新 • • 發佈：2018-06-01
nload 使用 名稱 屬性 這一 模板語言 UNC 方法 rec 1.頁面跳轉方式
(1)標簽跳轉
open-type的屬性值對應api裏的用法即wx.的用法
(3)wx.switchTab 方法跳轉只適用於調轉到設置了tabbar的頁面
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 }
微信小程序頁面跳轉方法和攜帶參數詳解