uni-app 頁面配置和跳轉（一）

今天看Dcloud官網更新了個uni-app，聽說一套代碼三端發佈（Android,iOS,微信小程序），果斷一試。

uni.navigateTo(OBJECT)
保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack能夠返回到原頁面。

OBJECT參數說明

參數 類型 必填 說明
url String 是 須要跳轉的應用內非 tabBar 的頁面的路徑 , 路徑後能夠帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不一樣參數用&分隔；如 'path?key=value&key2=value2'，path爲下一個頁面的路徑，下一個頁面的onLoad函數可獲得傳遞的參數
success Function 否 接口調用成功的回調函數
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執行）
示例

uni.navigateTo({

url: 'test?id=1&name=uniapp'

});
// test.vue
export default {

onLoad: function (option) { //option爲object類型，會序列化上個頁面傳遞的參數
    console.log(option.id); //打印出上個頁面傳遞的參數。
    console.log(option.name); //打印出上個頁面傳遞的參數。
}

}
注意：目前頁面路徑最多隻能十層。

uni.redirectTo(OBJECT)
關閉當前頁面，跳轉到應用內的某個頁面。

OBJECT參數說明

參數 類型 必填 說明
url String 是 須要跳轉的應用內非 tabBar 的頁面的路徑，路徑後能夠帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不一樣參數用&分隔；如 'path?key=value&key2=value2'
success Function 否 接口調用成功的回調函數
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執行）
示例

uni.redirectTo({

url: 'test?id=1'

});
uni.reLaunch(OBJECT)
關閉全部頁面，打開到應用內的某個頁面。

OBJECT參數說明

參數 類型 必填 說明
url String 是 須要跳轉的應用內頁面路徑 , 路徑後能夠帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不一樣參數用&分隔；如 'path?key=value&key2=value2'，若是跳轉的頁面路徑是 tabBar 頁面則不能帶參數
success Function 否 接口調用成功的回調函數
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執行）
示例

uni.reLaunch({

url: 'test?id=1'

});
export default {

onLoad: function (option) {
    console.log(option.query);
}

}
uni.switchTab(OBJECT)
跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面。

OBJECT參數說明

參數 類型 必填 說明
url String 是 須要跳轉的 tabBar 頁面的路徑（需在 app.json 的 tabBar 字段定義的頁面），路徑後不能帶參數
success Function 否 接口調用成功的回調函數
fail Function 否 接口調用失敗的回調函數
complete Function 否 接口調用結束的回調函數（調用成功、失敗都會執行）
示例

pages.json

{
"tabBar": {

"list": [{
  "pagePath": "index",
  "text": "首頁"
},{
  "pagePath": "other",
  "text": "其餘"
}]

}
}
other.vue

uni.switchTab({

url: 'index'

});
uni.navigateBack(OBJECT)
關閉當前頁面，返回上一頁面或多級頁面。可經過 getCurrentPages() 獲取當前的頁面棧，決定須要返回幾層。

OBJECT參數說明

參數 類型 必填 說明
delta Number 1 返回的頁面數，若是 delta 大於現有頁面數，則返回到首頁。
示例

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
uni.navigateTo({

url: 'B?id=1'

});

// 此處是B頁面
uni.navigateTo({

url: 'C?id=1'

});

// 在C頁面內 navigateBack，將返回A頁面
uni.navigateBack({

delta: 2

});