1 文件组织
1.1 应用资源
一个应用包含：描述项目配置信息的manifest文件，放置项目公共资源脚本的app.ux，多个描述页面/自定义组件的ux文件，典型示例如下：
应用根目录
|—— manifest.json
|—— app.ux
|—— Page1
| |—— page1.ux
|—— Page2
| |—— page2.ux
|—— Common
|—— ComponentA.ux
|—— ComponentB.ux
|—— xxx.png
其中Common目录下为公用的资源文件和组件文件，每个页面目录下存放各自页面私有的资源文件和组件文件，如：图片，CSS，JS等。
1.2 文件存储
在应用平台中是按分区来存储文件的，目前支持以下分区：
● Cache：一般用于存储缓存文件，比如通过fetch接口下载的文件会存储在该分区中，该分区中的文件可能因存储空间不够被系统删除。
● Files：一般用于存储比较小的永久文件，该分区中的文件由应用自己管理。
● Mass：一般用于存储比较大的文件，但该分区并不保证一直可用。
● Temp：表示从外部映射过来的临时文件，出于安全性考虑，临时文件是只读的，并且只能通过调用特定的API获取，比如media.pickVideo方法。另外临时文件的访问是临时的，应用重启后无法访问到临时文件，需要通过特定API重新获取。
另外应用资源也作为一个特殊的只读分区进行处理。
1.3 URI
URI用于标识应用资源和文件，组件和接口通过URI来访问应用资源和文件。
URI允许的字符正则表达式是[^\\s\"´:|*?<>\\\\]+（不包含引号），URI中不能出现..，URI支持目录结构，目录由斜线´/´分隔。
internal URI表示的是应用私有文件，即在指定internal URI时，无需指定应用标识，同一个internal URI对于不同的应用会指向不同的文件。
1.4 资源和文件访问规则internal URI表示的是应用私有文件，即在指定internal URI时，无需指定应用标识，同一个internal URI对于不同的应用会指向不同的文件。
应用资源路径分为绝对路径和相对路径，以"/"开头的路径表示绝对路径，比如 /Common/a.png，不以"/"开头的路径是相对路径，比如 a.png 和 ../Common/a.png 等。
应用资源文件分为代码文件和资源文件，代码文件是指 .js/.css/.ux 等包含代码的文件，其他文件则是资源文件，这类文件一般只当作数据来使用，比如图片、视频等。
1、在代码文件中，导入其他代码文件时，使用相对路径，比如：../Common/component.ux。
2、在代码文件中，引用资源文件（如：图片、视频等）时，一般情况下使用相对路径，比如： ./abc.png。
3、当代码文件需要被导入时，如果导入文件与被导入文件在同一个目录，被导入文件引用资源文件时可以使用相对路径，但如果不在同一目录，必须使用绝对路径，因为被导入文件编译时会被复制到导入文件中，编译后目录会发生变化。
比如 a.css 文件被 b.ux 导入，如果 a.css 与 b.ux 在同一个目录，a.css 引用资源文件时可以写相对路径：abc.png；如果不在同一个目录，必须写绝对路径：/Common/abc.png。
再比如当a.ux文件被b.ux文件导入时，如果 a.ux 与 b.ux 在同一个目录，a.ux 引用资源文件时可以写相对路径：a.png；如果不在同一个目录，a.ux 引用资源必须写绝对路径：/Common/abc.png。
在CSS中，与前端开发一致，使用url(PATH)的方式访问资源文件，如：url(/Common/abc.png)
1.5 deeplink规范
1.5.1 Android标准deeplink规范
提供标准的android deeplink入口用于拉起某个应用。
支持三种deeplink格式：
● http://hapjs.org/app//[path][?key=value]
● https://hapjs.org/app//[path][?key=value]
● hap://app/
注意：不同的厂商对该能力可能有不同限制，使用前请和相应厂商确认。
1.5.2 URL跳转配置
URL跳转配置是指在H5页面中可以通过调用接口跳转到应用，此方案依赖于系统ROM的适配，由于不能确保所有设备都支持从H5页面直接跳转拉起快应用，建议对应的H5页面需要做好fallback，在未能够拉起快应用的场景下仍然可以确保用户继续使用H5网页提供的服务。
在网页中嵌入以下js脚本地址，支持HTTP与HTTPS访问。
3.1 app.ux
当前app.ux编译后会包含manifest配置信息（可以在npm run build之后查看文件内容），所以请不要删除/**manifest**/的注释内容标识。
您可以在
4 页面与组件
4.1 template模板
类似HTML的标签语言，结合基础组件、自定义组件、事件，构建出页面的结构。
注意：模板中只能有1个根节点，如：div；请不要在下存在多个根节点，也不要使用block作为根节点
数据绑定
事件绑定
事件回调支持的写法（其中{{}}可以省略）：
● "fn"：fn为事件回调函数名（在
标签中的tid用于指定作为定义数组元素唯一Id的字段名，如果没有指定，则默认采用数组索引（$idx）作为唯一Id；tid的作用是为了元素节点重用，优化for循环的重绘效率。
例如 tid="id" 表示$item.id作为数组元素的唯一Id。
for循环支持的写法（其中{{}}可以省略）：
● "fn"：for="list"：list为数组对象，默认元素变量为$item。
● "for="value in list"：value为自定义的元素变量，默认元素索引为$idx。
● "for="(index,value) in list"：index为元素索引，value为元素变量。
注意：
● tid指定的数据属性必须存在，否则可能引起运行异常。
● tid指定的数据属性要保证唯一，如果发生重复，可能会造成性能问题。
条件渲染
分为2种：if/elif/else和show。它们的区别在于：if为false时，组件会从VDOM中移除，而show仅仅是渲染时不可见，组件依然存在于VDOM中；
if/elif/else节点必须是相邻的兄弟节点，否则无法通过编译。
show等同于display=none，目前只用于系统原生组件，对自定义组件不生效。自定义组件可以通过props传入参数，在自己内部使用show来控制是否可见。
逻辑控制块
可以使用
引入自定义组件
如果没有设置name属性，则默认采用src的文件名作为组件名。
src属性指定组件ux文件位置，可以省略.ux后缀。
注意：
● 组件名不区分大小写，默认统一采用小写。
● 通过(on|@)event1语法绑定自定义子组件的event1事件，触发事件childVm.$emit(´event1´, { params: ´传递参数´ })时执行父组件的方法：bindParentVmMethod1。
● 标签上声明事件名称采用-连接，不要使用驼峰式，来做响应与方法的关联，即：使用event-type1表示绑定eventType1事件。
插入自定义组件
组件中通过标签来定义子组件插入位置，例如：
组件com-a的模板定义为：
在页面使用组件comA，定义如下：
则在页面渲染时，组件comA变为：
4.2 Style样式
用于描述template模板的组件样式，决定组件应该如何显示。
样式布局采用CSS Flexbox（弹性盒）样式，针对部分原生组件，对 CSS 进行了少量的扩充以及修改。
为了解决屏幕适配问题，所有与大小相关的样式（例如width、font-size）均以基准宽度（默认750px）为基础，根据实际屏幕宽度进行缩放，例如width:100px，在1500px宽度屏幕上，width实际上为200px。
文件导入
支持2种导入外部文件的方式：
模板内部样式
支持使用style、class属性来控制组件的样式。
选择器
支持的选择器如下表所示。
| 选择器 | 样例 | 样例描述 |
| .class | .intro | 选择所有拥有 class="intro" 的组件。 |
| #id | #firstname | 选择拥有 id="firstname" 的组件。 |
| tag | div | 选择所有 div 组件。 |
| , | .a, .b | 选择所有class=“.a” 以及class=“.b”的组件。 |
| #id .class tag | .page .body text | 支持id，class，tag的后代选择器，也可以使用">"表示直接后代。 |
注意：选择器声明的变化可能会导致元素重新绘制。为了减少选择器变化引起的DOM更新数量，当前只支持：CSS声明的多个选择器中最后一个规则的变更对DOM的更新。
以上的代码示例，当我们把rowDesc变量从row-desc1变为row-desc2时是通知Native更新节点样式，但是如果把docBody变量从doc-body变为doc-body2，是不会通知DOM更新的。
因为doc-body不是最后一个选择器，非末尾的选择器变更有可能影响很多DOM元素，从而影响到渲染性能。
选择器优先级
当前样式的选择器的优先级计算保持与浏览器一致，是浏览器CSS渲染的一个子集（仅支持：inline，id，class，tag，后代，直接后代）
选择器优先级规则如下（假设多条CSS声明匹配到同一个元素div），应用在该元素上的CSS声明总体优先级是：inline > #id > .class > tag，这四大类匹配到该元素的多个CSS声明，如：#page .class-div和.page .class-div，其优先级按照各选择器的分数高低之和来比较。
ID 选择器的权值为10000 ，Class 类选择器的权值为100 ，Tag 标签选择器的权值为1，那么以下CSS声明计算分数为：
● #page的分数为：10000
● #page .class-div的分数为：10100
● #page .class-div text的分数为10101
● #page #body .container div text的分数为：20102
因此：
#page .class-div和.page .class-div比较，分数不一致，分数高优先级高；如果分数相同，则按照声明顺序：后者覆盖前者。
样式预编译
目前支持less，sass的预编译。
伪类
任何组件中，如果某个属性是boolean类型且默认值为false时，均可通过该属性名字来声明伪类，当属性变为true时伪类生效，例如所有组件的disabled属性、input组件的checked属性等。
另外部分组件会有其他形式的伪类支持，比如input组件可以通过主动调用focus方法，或者用户操作获得焦点，使得focus伪类生效，详情请参考各组件内部说明。
伪类写法举例：
Click
当组件的disabled属性变为true时，disabled伪类的样式生效，叠加到原有样式上，例子中background-color会从红色变成绿色。
支持的伪类如下：
| 名称 | 组件 | 效果 |
| :active | all | 在屏幕上按下生效，抬起失效。 Tabs下的子组件相当于click效果，抬起不会失效。 |
| :disabled | all | 组件disabled属性为true时生效 |
| :focus | input textarea | 组件获取focus时生效 |
| :checked | input(type="checkbox") switch | 组件checked属性为true生效 |
4.3 script脚本
用来定义页面数据和实现生命周期接口。
4.3.1 语法
支持ES6语法。
模块声明
可以通过import引入功能模块，在代码中调用模块方法（具体参看接口部分文档说明）。
import fetch from "@system.fetch"
也可以一次引入所有的模块，例如：
import system from "@system"
在代码中使用system.network来调用接口方法。
代码引用
JS代码引用推荐使用import来导入，例如：
import utils from ´../Common/utils.js´
4.3.2 对象
自定义数据
| 属性 | 类型 | 描述 |
| data deprecated | Object/Function | 页面的数据模型，能够转换为JSON对象；属性名不能以$或_开头，不要使用for, if, show, tid等保留字。如果是函数，返回结果必须是对象，在页面初始时回执行函数获取结果作为data的值。遗留使用，建议直接通过public替代，data与private，protected和public不能重合使用。 |
| private | Object/Function | 页面的数据模型，private段下的变量仅允许当前页面内代码更改其值。 |
| protected | Object/Function | 页面的数据模型，protected段下的变量也可以在当前应用的页面间跳转时通过参数传递更改其值。 |
| public | Object/Function | 页面的数据模型，public段下的变量还可以允许外部通过url的参数传递更改其值，即与原data属性行为一致。 |
| props | Array | 用于定义组件的公开属性列表（外部可见），可以通过 |
公共对象
| 属性 | 类型 | 描述 |
| $app | Object | 应用对象。 |
| $page | Object | 页面对象。 |
| $valid | Boolean | 页面对象是否有效。 |
| $visible | Boolean | 页面是否处于用户可见状态。 |
应用对象
可通过$app访问。
| 属性 | 类型 | 描述 |
| $def | Object | 使用this.$app.$def获取在app.ux中暴露的对象。 |
| $data | Object | 使用this.$app.$data获取在manifest.json的config.data中声明的全局数据。 |
页面对象
可通过$page访问。
| 属性 | 类型 | 描述 |
| action | String | 获取打开当前页面的action。仅在当前页面是通过filter匹配的方式打开时有效，否则为undefined。参见“manifest文件”。 |
| $data | String | 获取打开当前页面的uri。仅在当前页面是通过filter匹配的方式打开时有效，否则为undefined。参见“manifest文件”。 |
4.3.3 方法
数据方法
| 属性 | 类型 | 参数 | 描述 | ||||||||||||||||||||||||||||||||||||||||
| $set | Function | key: String value: Any | 添加数据属性，必须在onInit函数中使用，否则中数据绑定无法生效用法： this.$set(´key´,value) this.$vm(´id´).$set(´key´,value)$deleteFunctionkey: String删除数据属性，如果在onInit函数中使用，会导致中相应的数据绑定无法生效用法： this.$delete(´key´) this.$vm(´id´).$delete(´key´) 公共方法
事件方法
|
苏公安网备 32011402010933号