閱讀(7k) 書簽贊(0) 我要糾錯

快應(yīng)用頁面切換及參數(shù)傳遞

2020-08-08 15:23 更新

了解如何打開頁面、回退，并傳遞來回參數(shù)

通過本節(jié)，你將學(xué)會：

通過組件a切換頁面和傳遞參數(shù)
通過接口router切換頁面和傳遞參數(shù)
接收參數(shù)
回傳參數(shù)

教程文檔對應(yīng)的項(xiàng)目代碼文件：src/PageParams目錄

通過組件a切換頁面和傳遞參數(shù)

切換頁面

組件a可通過配置href屬性跳轉(zhuǎn)到應(yīng)用內(nèi)的頁面

示例如下：

<template>
  <div class="tutorial-page">
    <!-- 以'/'開頭的應(yīng)用內(nèi)頁面的路徑 -->
    <a href="/PageParams/receiveparams">跳轉(zhuǎn)到接收參數(shù)頁面</a>
    <!-- 以非'/'開頭的應(yīng)用內(nèi)頁面的名稱 -->
    <a href="PageParams/receiveparams">跳轉(zhuǎn)到接收參數(shù)頁面</a>
    <!-- 特殊的,如果uri的值是'/',則跳轉(zhuǎn)到path為'/'的頁,沒有則跳轉(zhuǎn)到首頁-->
    <a href="/">跳轉(zhuǎn)到首頁</a>
  </div>
</template>

此外，組件a還提供調(diào)起電話、短信、郵件的功能和加載網(wǎng)頁的能力

示例如下：

<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>
    <!-- 打開webview加載網(wǎng)頁 -->
    <a  rel="external nofollow" target="_blank" >打開網(wǎng)頁</a>
  </div>
</template>

傳遞參數(shù)

通過組件a實(shí)現(xiàn)頁面切換時，可以通過'?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切換頁面并傳遞參數(shù)' })
    }
  }
</script>

通過接口router切換頁面和傳遞參數(shù)

切換頁面

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ù)頁面" onclick="routePagePush"></input>
    <input class="btn" type="button" value="跳轉(zhuǎn)到接收參數(shù)頁面，當(dāng)前頁面無法返回" onclick="routePageReplace"></input>
    <input class="btn" type="button" value="返回上一頁" onclick="routePageBack"></input>
    <input class="btn" type="button" value="清空頁面記錄，僅保留當(dāng)前頁面" 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切換頁面' })
    },
    routePagePush () {
      // 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
      router.push({
        uri: '/PageParams/receiveparams'
      })
    },
    routePageReplace () {
      // 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，當(dāng)前頁面無法返回
      router.replace({
        uri: '/PageParams/receiveparams'
      })
    },
    routePageBack () {
      // 返回上一頁面
      router.back()
    },
    routePageClear () {
      // 清空所有歷史頁面記錄，僅保留當(dāng)前頁面
      router.clear()
    }
  }
</script>

傳遞參數(shù)

router 接口的參數(shù) params 可配置頁面跳轉(zhuǎn)時需要傳遞的參數(shù)

示例如下：

<template>
  <div class="tutorial-page">
    <input class="btn" type="button" value="攜帶參數(shù)跳轉(zhuǎn)頁面" onclick="routePagePushWithParams"></input>
    <input class="btn" type="button" value="攜帶參數(shù)跳轉(zhuǎn)頁面，當(dāng)前頁面無法返回" 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切換頁面并傳遞參數(shù)' })
    },
    routePagePushWithParams () {
      // 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面
      router.push({
        uri: '/PageParams/receiveparams',
        params: { key: this.title }
      })
    },
    routePageReplaceWithParams () {
      // 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，當(dāng)前頁面無法返回
      router.replace({
        uri: '/PageParams/receiveparams',
        params: { key: this.title }
      })
    }
  }
</script>

接收參數(shù)

現(xiàn)在，開發(fā)者已經(jīng)掌握了通過組件 a 和接口 router 在頁面之間傳遞參數(shù)的方法，如何接收參數(shù)呢？

其實(shí)很簡單，組件 a 和接口 router 傳遞的參數(shù)的接收方法完全一致：在頁面的 ViewModel 的protected屬性中聲明使用的屬性

注意：

protected 內(nèi)定義的屬性，允許被應(yīng)用內(nèi)部頁面請求傳遞的數(shù)據(jù)覆蓋，不允許被應(yīng)用外部請求傳遞的數(shù)據(jù)覆蓋
若希望參數(shù)允許被應(yīng)用外部請求傳遞的數(shù)據(jù)覆蓋，請?jiān)陧撁娴?ViewModel 的 ?public 屬性? 中聲明使用的屬性

示例如下：

<template>
  <div class="tutorial-page">
    <text>page</text>
    <!-- template中顯示頁面?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中輸出頁面?zhèn)鬟f的參數(shù)
      console.info('key: ' + this.key)
    }
  }
</script>

回傳參數(shù)

開發(fā)者可能會遇到需要在頁面之間回傳參數(shù)的需求

示例如下：

假設(shè)存在頁面 A 和頁面 B ，先從頁面 A 跳轉(zhuǎn)至頁面 B，然后從頁面 B 返回到頁面 A 時，需要傳遞參數(shù)

此時，組件 a 和接口 router 傳參不能滿足需求，可以借助于 app 級別的對象：this.$app.$data

在 app 中增加緩存的數(shù)據(jù)，并提供讀寫緩存數(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>

頁面 A 和頁面 B 通過 app 緩存數(shù)據(jù)傳遞參數(shù)：

在頁面 A 中，當(dāng)頁面顯示時，讀取 app 緩存數(shù)據(jù)，獲取參數(shù)。頁面 A 實(shí)現(xiàn)代碼如下：

<template>
  <div class="tutorial-page">
    <a href="/PageParams/returnParams/pageb">跳轉(zhuǎn)到頁面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: '頁面A' })
    },
    onShow () {
      // 頁面被切換顯示時，從數(shù)據(jù)中檢查是否有頁面B傳遞來的數(shù)據(jù)
      const data = this.$app.getAppData('dataFromB')
      if (data && data.destPageName === 'pageA') {
        // 獲取回傳給本頁面的數(shù)據(jù)
        this.msg = data.params && data.params.msg
      }
    }
  }
</script>

在頁面 B 中，當(dāng)頁面隱藏時，設(shè)置 app 緩存數(shù)據(jù)，寫入?yún)?shù)。頁面 B 實(shí)現(xiàn)代碼如下：

<template>
  <div class="tutorial-page">
    <text>頁面B</text>
    <input style="width: 450px;" placeholder="請輸入回傳給頁面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: '頁面B' })
    },
    onHide () {
      // 頁面被切換隱藏時，將要傳遞的數(shù)據(jù)對象寫入
      this.$app.setAppData('dataFromB', {
        destPageName: 'pageA',
        params: {
          msg: this.msg
        }
      })
    },
    updateMsg (evt) {
      // 更新input輸入的信息文本
      this.msg = evt.text
    }
  }
</script>

總結(jié)

掌握頁面切換和參數(shù)傳遞，開發(fā)者就能游刃有余的開發(fā)多頁面應(yīng)用了

以上內(nèi)容是否對您有幫助：

← 快應(yīng)用 slot組件

快應(yīng)用事件綁定 →

寫筆記

我要補(bǔ)充

快應(yīng)用 頁面切換及參數(shù)傳遞

通過組件a切換頁面和傳遞參數(shù)

切換頁面

傳遞參數(shù)

通過接口router切換頁面和傳遞參數(shù)

切換頁面

傳遞參數(shù)

接收參數(shù)

回傳參數(shù)

總結(jié)

快應(yīng)用頁面切換及參數(shù)傳遞