源码文件

APP，页面和自定义组件均通过 ux 文件编写，ux 文件由template 模板、style 样式和script 脚本3 个部分组成，一个典型的页面 ux 文件示例如下：

  1. <template>
  2.   <!-- template里只能有一个根节点 -->
  3.   <div class="demo-page">
  4.     <text class="title">欢迎打开{{title}}</text>
  5.     <!-- 点击跳转详情页 -->
  6.     <input class="btn" type="button" value="跳转到详情页" onclick="routeDetail">
  7.   </div>
  8. </template>
  10. <style>
  11.   .demo-page {
  12.     flex-direction: column;
  13.     justify-content: center;
  14.     align-items: center;
  15.   }
  17.   .title {
  18.     font-size: 40px;
  19.     text-align: center;
  20.   }
  22.   .btn {
  23.     width: 550px;
  24.     height: 86px;
  25.     margin-top: 75px;
  26.     border-radius: 43px;
  27.     background-color: #09ba07;
  28.     font-size: 30px;
  29.     color: #ffffff;
  30.   }
  31. </style>
  33. <script>
  34.   import router from '@system.router'
  36.   export default {
  37.     // 页面级组件的数据模型，影响传入数据的覆盖机制：private内定义的属性不允许被覆盖
  38.     private: {
  39.       title: '示例页面'
  40.     },
  41.     routeDetail () {
  42.       // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
  43.       router.push ({
  44.         uri: '/DemoDetail'
  45.       })
  46.     }
  47.   }
  48. </script>

app.ux

当前app.ux编译后会包含manifest配置信息（可以在npm run build之后查看文件内容），所以请不要删除/manifest/的注释内容标识。

您可以在<script>中引入一些公共的脚本，并暴露在当前 app 的对象上，如下所示，然后就可以在页面 ux 文件的 ViewModel 中，通过this.$app.util访问。 如果您希望捕获应用运行时异常, 可以在<script>中添加 onError 函数。当 app 运行发生异常时，异常信息将会通过 onError 回调通知您。

<script>
  /**
   * 应用级别的配置，供所有页面公用
   */
  import util from './util'

  export default {
    showMenu: util.showMenu,
    createShortcut: util.createShortcut

    onError(err) {
        console.log(`error message=${err.message}, stack=${err.stack}`)
    }
  }
</script>