免費(fèi)AI編程助手
W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
快應(yīng)用 頁(yè)面切換及參數(shù)傳遞
了解如何打開(kāi)頁(yè)面、回退，并傳遞來(lái)回參數(shù)
通過(guò)本節(jié)，你將學(xué)會(huì)：
教程文檔對(duì)應(yīng)的項(xiàng)目代碼文件：src/PageParams目錄
通過(guò)組件a切換頁(yè)面和傳遞參數(shù)
切換頁(yè)面
組件a可通過(guò)配置href屬性跳轉(zhuǎn)到應(yīng)用內(nèi)的頁(yè)面
示例如下：
<template>
<div class="tutorial-page">
<!-- 以'/'開(kāi)頭的應(yīng)用內(nèi)頁(yè)面的路徑 -->
<a href="/PageParams/receiveparams">跳轉(zhuǎn)到接收參數(shù)頁(yè)面</a>
<!-- 以非'/'開(kāi)頭的應(yīng)用內(nèi)頁(yè)面的名稱 -->
<a href="PageParams/receiveparams">跳轉(zhuǎn)到接收參數(shù)頁(yè)面</a>
<!-- 特殊的,如果uri的值是'/',則跳轉(zhuǎn)到path為'/'的頁(yè),沒(méi)有則跳轉(zhuǎn)到首頁(yè)-->
<a href="/">跳轉(zhuǎn)到首頁(yè)</a>
</div>
</template>此外，組件a還提供調(diào)起電話、短信、郵件的功能和加載網(wǎng)頁(yè)的能力
示例如下：
<template>
<div class="tutorial-page">
<!-- 包含完整schema的uri -->
<a href="tel:10086">調(diào)起電話</a>
<a href="sms:10086">調(diào)起短信</a>
<a href="mailto:example@xx.com">調(diào)起郵件</a>
<!-- 打開(kāi)webview加載網(wǎng)頁(yè) -->
<a rel="external nofollow" target="_blank" >打開(kāi)網(wǎng)頁(yè)</a>
</div>
</template>傳遞參數(shù)
通過(guò)組件a實(shí)現(xiàn)頁(yè)面切換時(shí)，可以通過(guò)'?key=value'的方式添加參數(shù)，支持參數(shù)為變量
示例如下：
<template>
<div class="tutorial-page">
<!-- 添加參數(shù) -->
<a href="/PageParams/receiveparams?key=Hello, world!">攜帶參數(shù)key1跳轉(zhuǎn)</a>
<!-- 添加變量參數(shù) -->
<a href="/PageParams/receiveparams?key={{title}}">攜帶參數(shù)key2跳轉(zhuǎn)</a>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
margin-top: 75px;
font-size: 30px;
color: #09ba07;
text-decoration: underline;
}
</style>
<script>
export default {
data: {
title: "Hello, world!"
},
onInit () {
this.$page.setTitleBar({ text: '組件a切換頁(yè)面并傳遞參數(shù)' })
}
}
</script>通過(guò)接口router切換頁(yè)面和傳遞參數(shù)
切換頁(yè)面
router 接口在使用前，需要先導(dǎo)入模塊
router.push(OBJECT) 支持的參數(shù) url 與組件 a 的 href 屬性完全一致
router.replace(OBJECT) 的支持的參數(shù) url 不支持調(diào)起電話、短信、郵件，其他與 push 一致
示例如下：
<template>
<div class="tutorial-page">
<input class="btn" type="button" value="跳轉(zhuǎn)到接收參數(shù)頁(yè)面" onclick="routePagePush"></input>
<input class="btn" type="button" value="跳轉(zhuǎn)到接收參數(shù)頁(yè)面，當(dāng)前頁(yè)面無(wú)法返回" onclick="routePageReplace"></input>
<input class="btn" type="button" value="返回上一頁(yè)" onclick="routePageBack"></input>
<input class="btn" type="button" value="清空頁(yè)面記錄，僅保留當(dāng)前頁(yè)面" onclick="routePageClear"></input>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn {
width: 550px;
height: 86px;
margin-top: 75px;
border-radius: 43px;
background-color: #09ba07;
font-size: 30px;
color: #ffffff;
}
</style>
<script>
// 導(dǎo)入模塊
import router from '@system.router'
export default {
onInit () {
this.$page.setTitleBar({ text: '接口router切換頁(yè)面' })
},
routePagePush () {
// 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
router.push({
uri: '/PageParams/receiveparams'
})
},
routePageReplace () {
// 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，當(dāng)前頁(yè)面無(wú)法返回
router.replace({
uri: '/PageParams/receiveparams'
})
},
routePageBack () {
// 返回上一頁(yè)面
router.back()
},
routePageClear () {
// 清空所有歷史頁(yè)面記錄，僅保留當(dāng)前頁(yè)面
router.clear()
}
}
</script>傳遞參數(shù)
router 接口的參數(shù) params 可配置頁(yè)面跳轉(zhuǎn)時(shí)需要傳遞的參數(shù)
示例如下：
<template>
<div class="tutorial-page">
<input class="btn" type="button" value="攜帶參數(shù)跳轉(zhuǎn)頁(yè)面" onclick="routePagePushWithParams"></input>
<input class="btn" type="button" value="攜帶參數(shù)跳轉(zhuǎn)頁(yè)面，當(dāng)前頁(yè)面無(wú)法返回" onclick="routePageReplaceWithParams"></input>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
.btn {
width: 550px;
height: 86px;
margin-top: 75px;
border-radius: 43px;
background-color: #09ba07;
font-size: 30px;
color: #ffffff;
}
</style>
<script>
// 導(dǎo)入模塊
import router from '@system.router'
export default {
data: {
title: 'Hello, world!'
},
onInit () {
this.$page.setTitleBar({ text: '接口router切換頁(yè)面并傳遞參數(shù)' })
},
routePagePushWithParams () {
// 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面
router.push({
uri: '/PageParams/receiveparams',
params: { key: this.title }
})
},
routePageReplaceWithParams () {
// 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，當(dāng)前頁(yè)面無(wú)法返回
router.replace({
uri: '/PageParams/receiveparams',
params: { key: this.title }
})
}
}
</script>接收參數(shù)
現(xiàn)在，開(kāi)發(fā)者已經(jīng)掌握了通過(guò)組件 a 和接口 router 在頁(yè)面之間傳遞參數(shù)的方法，如何接收參數(shù)呢？
其實(shí)很簡(jiǎn)單，組件 a 和接口 router 傳遞的參數(shù)的接收方法完全一致：在頁(yè)面的 ViewModel 的protected屬性中聲明使用的屬性
注意：
- protected 內(nèi)定義的屬性，允許被應(yīng)用內(nèi)部頁(yè)面請(qǐng)求傳遞的數(shù)據(jù)覆蓋，不允許被應(yīng)用外部請(qǐng)求傳遞的數(shù)據(jù)覆蓋
- 若希望參數(shù)允許被應(yīng)用外部請(qǐng)求傳遞的數(shù)據(jù)覆蓋，請(qǐng)?jiān)陧?yè)面的 ViewModel 的 ?
public 屬性? 中聲明使用的屬性
示例如下：
<template>
<div class="tutorial-page">
<text>page</text>
<!-- template中顯示頁(yè)面?zhèn)鬟f的參數(shù) -->
<text>{{key}}</text>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<script>
export default {
data: {
key: ''
},
onInit () {
this.$page.setTitleBar({ text: '接收參數(shù)' })
// js中輸出頁(yè)面?zhèn)鬟f的參數(shù)
console.info('key: ' + this.key)
}
}
</script>回傳參數(shù)
開(kāi)發(fā)者可能會(huì)遇到需要在頁(yè)面之間回傳參數(shù)的需求
示例如下：
假設(shè)存在頁(yè)面 A 和頁(yè)面 B ，先從頁(yè)面 A 跳轉(zhuǎn)至頁(yè)面 B，然后從頁(yè)面 B 返回到頁(yè)面 A 時(shí)，需要傳遞參數(shù)
此時(shí)，組件 a 和接口 router 傳參不能滿足需求，可以借助于 app 級(jí)別的對(duì)象：this.$app.$data
在 app 中增加緩存的數(shù)據(jù)，并提供讀寫(xiě)緩存數(shù)據(jù)的能力。app 實(shí)現(xiàn)代碼如下：
<script>
export default {
onCreate () {
// 初始化 app 緩存的數(shù)據(jù)
this.dataCache = {}
},
/**
* 獲取 app 緩存的數(shù)據(jù)
* @param key
*/
getAppData (key) {
return this.dataCache[key]
},
/**
* 設(shè)置 app 緩存的數(shù)據(jù)
* @param key
* @param val
*/
setAppData (key, val) {
this.dataCache[key] = val
}
}
</script>
頁(yè)面 A 和頁(yè)面 B 通過(guò) app 緩存數(shù)據(jù)傳遞參數(shù)：
在頁(yè)面 A 中，當(dāng)頁(yè)面顯示時(shí)，讀取 app 緩存數(shù)據(jù)，獲取參數(shù)。頁(yè)面 A 實(shí)現(xiàn)代碼如下：
<template>
<div class="tutorial-page">
<a href="/PageParams/returnParams/pageb">跳轉(zhuǎn)到頁(yè)面B</a>
<text>{{msg}}</text>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
a {
margin-top: 75px;
font-size: 30px;
color: #09ba07;
text-decoration: underline;
}
</style>
<script>
export default {
private: {
msg: ''
},
onInit () {
this.$page.setTitleBar({ text: '頁(yè)面A' })
},
onShow () {
// 頁(yè)面被切換顯示時(shí)，從數(shù)據(jù)中檢查是否有頁(yè)面B傳遞來(lái)的數(shù)據(jù)
const data = this.$app.getAppData('dataFromB')
if (data && data.destPageName === 'pageA') {
// 獲取回傳給本頁(yè)面的數(shù)據(jù)
this.msg = data.params && data.params.msg
}
}
}
</script>
在頁(yè)面 B 中，當(dāng)頁(yè)面隱藏時(shí)，設(shè)置 app 緩存數(shù)據(jù)，寫(xiě)入?yún)?shù)。頁(yè)面 B 實(shí)現(xiàn)代碼如下：
<template>
<div class="tutorial-page">
<text>頁(yè)面B</text>
<input style="width: 450px;" placeholder="請(qǐng)輸入回傳給頁(yè)面A的信息" onchange="updateMsg"/>
</div>
</template>
<style>
.tutorial-page {
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
<script>
export default {
private: {
msg: ''
},
onInit () {
this.$page.setTitleBar({ text: '頁(yè)面B' })
},
onHide () {
// 頁(yè)面被切換隱藏時(shí)，將要傳遞的數(shù)據(jù)對(duì)象寫(xiě)入
this.$app.setAppData('dataFromB', {
destPageName: 'pageA',
params: {
msg: this.msg
}
})
},
updateMsg (evt) {
// 更新input輸入的信息文本
this.msg = evt.text
}
}
</script>總結(jié)
掌握頁(yè)面切換和參數(shù)傳遞，開(kāi)發(fā)者就能游刃有余的開(kāi)發(fā)多頁(yè)面應(yīng)用了
- 內(nèi)容錯(cuò)誤
- 更新不及時(shí)
- 鏈接錯(cuò)誤
- 缺少代碼/圖片示列
- 太簡(jiǎn)單/步驟待完善
- 其他
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話：173-0602-2364|舉報(bào)郵箱：jubao@eeedong.com
更多建議：