@Components

链接 links - typescript: 1. 文档 Docs; 2. 演练场 Playground

基本组件

基础组件
分类	说明
Text
Button
Image
Slider
TextInput
LoadingProgress

Resource

资源引用类型，用于设置组件属性的值

将资源文件（字符串、图片、音频等）统一存放于resources目录下，便于开发者统一维护

app 代表应用内 resources 目录中定义的资源；type 代表资源类型（或资源的存放位置），可以取 "color"、"float"、"string"、"plural"、"media"；name 代表资源命名，由开发者定义资源时确定

定义：在float.json中定义Button的宽高和字体大小

{
  "float": [
    {
      "name": "button_width",
      "value": "300vp"
    },
    {
      "name": "button_height",
      "value": "40vp"
    },
    {
      "name": "login_fontSize",
      "value": "18fp"
    }
  ]
}

引用："$r('app.type.name')"

Button('submit')
  .width($r('app.float.button_width'))
  .height($r('app.float.button_height'))
  .fontSize($r('app.float.login_fontSize'))

Tips

类似HTML5的全局变量 :root

软代码 vs 硬代码

容器组件

容器组件
分类	说明
Column
Row
Flex
Grid	Grid GridItem
List	List ListItem
Tab	Tab TabContent
Swiper
Divider
Stack

媒体组件

媒体组件
分类	说明
Video

绘制组件

绘制组件
分类	说明

网络组件

网络组件
分类	说明
Web

画布组件

画布组件
分类	说明

自定义组件

使用 @component 自定义一个组件

使用 struct 定义其结构

为自定义组件指定名称

使用 build方法描述自定义组件UI

自定义组件和使用它的组件通常在不同的文件中；为了方便使用，通常需要导出export，也便于模块化开发

组件的生命周期

1.AboutToAppear

2.AboutToDisappear

3.onPageShow

4.onPageHide

5.onBackPress

返回true，不进行页面返回，由页面自己处理返回逻辑

返回false，默认；由系统处理返回逻辑