ux文件-框架-快应用

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

收起
自动换行
深色代码主题
复制
<template>
  <div class="container" onclick="press">
    <text class="{{title}}" style="font-size:14px;">Hello {{title}}</text>
  </div>
</template>
<style>
  .container{
    flex-direction: column;
    justify-items: center;
  }
  .title {
    color: red;
  }
</style>
<script>
  module.exports = {
    props:['title'],
    data:function () {
      return {
        title: 'World'
      }
    },
    press:function (e) {
      this.title = 'XXX'
    },
    onInit: function () {
      this.title = this.$app.$data.appName
    }
  }
</script>

开发过程中，如果有写好的开源组件库，可以直接引入使用，详细内容请参见“第三方组件库”。

app.ux

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

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

（1073+）在app.ux中可以定义样式，并且全局生效。

收起
自动换行
深色代码主题
复制
<script>
import util from './util.js'
module.exports = {
    /**manifest**/,
    util: util
}
</script>
<style>
.container {
  background-color: #f0f0f0;
}
text {
  color: #333;
}
</style>

ux文件

app.ux

相关链接

FAQ

案例