APP，頁(yè)面和自定義組件均通過(guò)ux文件編寫(xiě)，ux文件由 template模板、style樣式 和 script腳本 3個(gè)部分組成，一個(gè)典型的頁(yè)面ux文件示例如下：

<template>
  <!-- template里只能有一個(gè)根節(jié)點(diǎn) -->
  <div class="demo-page">
    <text class="title">歡迎打開(kāi){{title}}</text>
    <!-- 點(diǎn)擊跳轉(zhuǎn)詳情頁(yè) -->
    <input class="btn" type="button" value="跳轉(zhuǎn)到詳情頁(yè)" onclick="routeDetail">
  </div>
</template>
<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .title {
    font-size: 40px;
    text-align: 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 {
    // 頁(yè)面級(jí)組件的數(shù)據(jù)模型，影響傳入數(shù)據(jù)的覆蓋機(jī)制：private內(nèi)定義的屬性不允許被覆蓋
    private: {
      title: '示例頁(yè)面'
    },
    routeDetail () {
      // 跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，router用法詳見(jiàn)：文檔->接口->頁(yè)面路由
      router.push ({
        uri: '/DemoDetail'
      })
    }
  }
</script>
    

app.ux

當(dāng)前app.ux編譯后會(huì)包含manifest配置信息（可以在npm run build之后查看文件內(nèi)容），所以請(qǐng)不要?jiǎng)h除/**manifest**/的注釋內(nèi)容標(biāo)識(shí)。

您可以在<script>中引入一些公共的腳本，并暴露在當(dāng)前 app 的對(duì)象上，如下所示，然后就可以在頁(yè)面 ux 文件的 ViewModel 中，通過(guò)this.$app.util訪問(wèn)。 如果您希望捕獲應(yīng)用運(yùn)行時(shí)異常, 可以在<script>中添加 onError 函數(shù)。當(dāng) app 運(yùn)行發(fā)生異常時(shí)，異常信息將會(huì)通過(guò) onError 回調(diào)通知您。

<script>
  /**
   * 應(yīng)用級(jí)別的配置，供所有頁(yè)面公用
   */
  import util from './util'
  export default {
    showMenu: util.showMenu,
    createShortcut: util.createShortcut
    onError(err) {
        console.log(`error message=${err.message}, stack=${err.stack}`)
    }
  }
</script>