跳轉 · TUNA-daily

[TOC] ## 1. js跳轉 ### 1.1 wx.navigateTo(OBJECT) **保留當前頁面**，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。 ~~~ OBJECT 參數說明：參數類型必填說明 url String 是需要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2' success Function 否接口調用成功的回調函數 fail Function 否接口調用失敗的回調函數 complete Function 否接口調用結束的回調函數（調用成功、失敗都會執行） ~~~ 示例代碼： ~~~ wx.navigateTo({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } }) ~~~ 注意：目前頁面路徑最多只能十層。 ### 1.2 wx.redirectTo(OBJECT) **關閉當前頁面**，跳轉到應用內的某個頁面。如果跳回父頁面，則父頁面存在兩個，也就說需要在父頁面返回兩次，才能回到主頁面 ~~~ OBJECT 參數說明：參數類型必填說明 url String 是需要跳轉的應用內非 tabBar 的頁面的路徑，路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2' success Function 否接口調用成功的回調函數 fail Function 否接口調用失敗的回調函數 complete Function 否接口調用結束的回調函數（調用成功、失敗都會執行） ~~~ 示例代碼： ~~~ wx.redirectTo({ url: 'test?id=1' }) ~~~ ### 1.3 wx.reLaunch(OBJECT) 基礎庫 1.1.0 開始支持，低版本需做兼容處理 **關閉所有頁面**，打開到應用內的某個頁面。 ~~~ OBJECT 參數說明：參數類型必填說明 url String 是需要跳轉的應用內頁面路徑 , 路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔；如 'path?key=value&key2=value2'，如果跳轉的頁面路徑是 tabBar 頁面則不能帶參數 success Function 否接口調用成功的回調函數 fail Function 否接口調用失敗的回調函數 complete Function 否接口調用結束的回調函數（調用成功、失敗都會執行） ~~~ 示例代碼： ~~~ wx.reLaunch({ url: 'test?id=1' }) //test.js Page({ onLoad: function(option){ console.log(option.query) } }) ~~~ ### 1.4 wx.switchTab(OBJECT) 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面 ~~~ OBJECT 參數說明：參數類型必填說明 url String 是需要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑后不能帶參數 success Function 否接口調用成功的回調函數 fail Function 否接口調用失敗的回調函數 complete Function 否接口調用結束的回調函數（調用成功、失敗都會執行） ~~~ 示例代碼： ~~~ { "tabBar": { "list": [{ "pagePath": "index", "text": "首頁" },{ "pagePath": "other", "text": "其他" }] } } wx.switchTab({ url: '/index' }) ~~~ ### 1.5 wx.navigateBack(OBJECT) 關閉當前頁面，返回上一頁面或多級頁面。可通過 **getCurrentPages() ** 獲取當前的頁面棧，決定需要返回幾層。 ~~~ OBJECT 參數說明：參數類型默認值說明 delta Number 1 返回的頁面數，如果 delta 大于現有頁面數，則返回到首頁。 ~~~ 示例代碼： ~~~ // 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼 // 此處是A頁面 wx.navigateTo({ url: 'B?id=1' }) // 此處是B頁面 wx.navigateTo({ url: 'C?id=1' }) // 在C頁面內 navigateBack，將返回A頁面 wx.navigateBack({ delta: 2 }) ~~~ Tip tip: wx.navigateTo 和 wx.redirectTo 不允許跳轉到 tabbar 頁面，只能用 wx.switchTab 跳轉到 tabbar 頁面 #### 實例返回上一頁面，并刷新。利用onShow()生命周期函數。 A 頁面： ~~~ /** * 頁面的初始數據 */ data: { onLoadNum:0 //onload執行次數，避免因為onShow導致初始化時onLoad執行兩次 }, //加載數據，渲染頁面 onLoad: function(options) { var _this = this; console.log("onload....."); this.setData({ onLoadNum: this.data.onLoadNum +1 }); wx.request({ url: app.globalData.pubSiteUrl + 'user-information/get-information', method: 'GET', header: { 'Content-Type': 'application/json', 'Cookie': 'SESSION=' + wx.getStorageSync("sessionId") }, success: function(res) { if (res.data.code == 1) { _this.setData({ phone: res.data.user.phone, password: res.data.user.password }) } }, }) }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function() { if (this.data.onLoadNum == 1) { this.setData({ onLoadNum: this.data.onLoadNum + 1 }); return;// 第一次onload，不重復調用onload,但是增加1區別狀態 } else { this.onLoad(); // 重新加載 }; }, ~~~ B 子頁面 ~~~ wx.navigateBack(); // 退回A ~~~ ## 2. 頁面跳轉 1. 跳轉 navigator ：頁面連接 ~~~ <navigator class='content-btn' url='../safe_setting_bindmail/safe_setting_bindmail?type=1' > <button bind:click="handleClick">更改</button> </navigator> ~~~ url:跳轉路徑?參數1=value1&參數2=value2 2. 取值參數會傳給跳轉目標頁面的onLoad方法 ~~~ onLoad: function(options) { var opt = options.type; //獲取type參數值 ~~~