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

2020-08-08 15:23 更新

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

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

教程文檔對應的項目代碼文件：src/PageParams目錄

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

切換頁面

組件a可通過配置href屬性跳轉到應用內的頁面

示例如下： 

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

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

示例如下： 

<template>
  <div class="tutorial-page">
    <!-- 包含完整schema的uri -->
    <a href="tel:10086">調起電話</a>
    <a href="sms:10086">調起短信</a>
    <a href="mailto:example@xx.com">調起郵件</a>
    <!-- 打開webview加載網(wǎng)頁 -->
    <a  rel="external nofollow" target="_blank" >打開網(wǎng)頁</a>
  </div>
</template>

傳遞參數(shù)

通過組件a實現(xiàn)頁面切換時，可以通過'?key=value'的方式添加參數(shù)，支持參數(shù)為變量

示例如下： 

<template>
  <div class="tutorial-page">
    <!-- 添加參數(shù) -->
    <a href="/PageParams/receiveparams?key=Hello, world!">攜帶參數(shù)key1跳轉</a>
    <!-- 添加變量參數(shù) -->
    <a href="/PageParams/receiveparams?key={{title}}">攜帶參數(shù)key2跳轉</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 接口在使用前，需要先導入模塊

router.push(OBJECT) 支持的參數(shù) url 與組件 a 的 href 屬性完全一致

router.replace(OBJECT) 的支持的參數(shù) url 不支持調起電話、短信、郵件，其他與 push 一致

示例如下： 

<template>
  <div class="tutorial-page">
    <input class="btn" type="button" value="跳轉到接收參數(shù)頁面" onclick="routePagePush"></input>
    <input class="btn" type="button" value="跳轉到接收參數(shù)頁面，當前頁面無法返回" onclick="routePageReplace"></input>
    <input class="btn" type="button" value="返回上一頁" onclick="routePageBack"></input>
    <input class="btn" type="button" value="清空頁面記錄，僅保留當前頁面" 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>
  // 導入模塊
  import router from '@system.router'

  export default {
    onInit () {
      this.$page.setTitleBar({ text: '接口router切換頁面' })
    },
    routePagePush () {
      // 跳轉到應用內的某個頁面
      router.push({
        uri: '/PageParams/receiveparams'
      })
    },
    routePageReplace () {
      // 跳轉到應用內的某個頁面，當前頁面無法返回
      router.replace({
        uri: '/PageParams/receiveparams'
      })
    },
    routePageBack () {
      // 返回上一頁面
      router.back()
    },
    routePageClear () {
      // 清空所有歷史頁面記錄，僅保留當前頁面
      router.clear()
    }
  }
</script>

傳遞參數(shù)

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

示例如下： 

<template>
  <div class="tutorial-page">
    <input class="btn" type="button" value="攜帶參數(shù)跳轉頁面" onclick="routePagePushWithParams"></input>
    <input class="btn" type="button" value="攜帶參數(shù)跳轉頁面，當前頁面無法返回" 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>
  // 導入模塊
  import router from '@system.router'

  export default {
    data: {
      title: 'Hello, world!'
    },
    onInit () {
      this.$page.setTitleBar({ text: '接口router切換頁面并傳遞參數(shù)' })
    },
    routePagePushWithParams () {
      // 跳轉到應用內的某個頁面
      router.push({
        uri: '/PageParams/receiveparams',
        params: { key: this.title }
      })
    },
    routePageReplaceWithParams () {
      // 跳轉到應用內的某個頁面，當前頁面無法返回
      router.replace({
        uri: '/PageParams/receiveparams',
        params: { key: this.title }
      })
    }
  }
</script>

接收參數(shù)

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

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

注意：

  • protected 內定義的屬性，允許被應用內部頁面請求傳遞的數(shù)據(jù)覆蓋，不允許被應用外部請求傳遞的數(shù)據(jù)覆蓋
  • 若希望參數(shù)允許被應用外部請求傳遞的數(shù)據(jù)覆蓋，請在頁面的 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ù)的需求

示例如下：

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

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

在 app 中增加緩存的數(shù)據(jù)，并提供讀寫緩存數(shù)據(jù)的能力。app 實現(xiàn)代碼如下：

<script>

  export default {

    onCreate () {

      // 初始化 app 緩存的數(shù)據(jù)

      this.dataCache = {}

    },

    /**

     * 獲取 app 緩存的數(shù)據(jù)

     * @param key

     */

    getAppData (key) {

      return this.dataCache[key]

    },

    /**

     * 設置 app 緩存的數(shù)據(jù)

     * @param key

     * @param val

     */

    setAppData (key, val) {

      this.dataCache[key] = val

    }

  }

</script>

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

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

<template>

  <div class="tutorial-page">

    <a href="/PageParams/returnParams/pageb">跳轉到頁面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 中，當頁面隱藏時，設置 app 緩存數(shù)據(jù)，寫入?yún)?shù)。頁面 B 實現(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>

總結

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


以上內容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號