UX 文件
更新时间：
APP、页面和自定义组件均通过 ux 后缀文件编写，ux 后缀文件由 template 模板、style 样式和javascript 代码 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 '@blueos.app.router'
export default {
// 页面级组件的数据模型
data: {
title: '示例页面',
},
routeDetail() {
// 跳转到应用内的某个页面，router用法详见：文档->接口->页面路由
router.push({
uri: '/DemoDetail',
})
},
}
</script>复制代码
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>复制代码