UX 文件

更新时间：2025/10/09 11:25:10

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

<script>
  import router from '@blueos.app.router'

  export default {
    // 页面级组件的数据模型
    data: {
      title: '示例页面',
    },
    routeDetail() {
      // 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
      router.push({
        uri: '/DemoDetail',
      })
    },
  }
</script>

<template>
  <!-- template里只能有一个根节点 -->
  <div class="flex flex-col justify-center items-center">
    <text class="text-4xl text-center">欢迎打开{{title}}</text>
    <!-- 点击跳转详情页 -->
    <input class="w-[550px] h-[86px] mt-[75px] rounded-[43px] bg-[#09ba07] text-3xl text-white" type="button" value="跳转到详情页" onclick="routeDetail" />
  </div>
</template>

<style>
@tailwind utilities;
</style>

复制代码

app.ux

当前app.ux编译后会包含manifest配置信息，所以请不要删除/**manifest**/的注释内容标识。

您可以在<script>中引入一些公共的脚本，并暴露在当前 app 的对象上，如下所示，然后就可以在页面 ux 文件的 ViewModel 中，通过this.$app.$def.util访问。

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

  export default {
    showMenu: util.showMenu,
    createShortcut: util.createShortcut,
    util,
  }
</script>

复制代码

manifest文件

style样式

app.ux