教程 其他 框架 组件 接口

源码文件

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

<template>
  <!-- template里只能有一个根节点 -->
  <div class="demo-page">
    <text class="title">欢迎打开{{title}}</text>
    <!-- 点击跳转详情页 -->
    <input class="btn" type="button" value="跳转到详情页" 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 {
    // 页面级组件的数据模型,影响传入数据的覆盖机制:private内定义的属性不允许被覆盖
    private: {
      title: '示例页面'
    },
    routeDetail () {
      // 跳转到应用内的某个页面,router用法详见:文档->接口->页面路由
      router.push ({
        uri: '/DemoDetail'
      })
    }
  }
</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>

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容