、ArkTS基础
1装饰器
1.1 @Component 装饰器
自定义组件
配合struct关键字
1.2 @Entry 装饰器
页面入口 页面首先呈现的@Entry装饰的组件,一个页面有且只有一个
1.3 @State装饰器
装饰的变量是组件内部的状态数据,当这些状态数据被修改时,将会调用所在组件的build方法进行UI刷新
1.4 @Link装饰器
装饰的变量可以和父组件的state变量形成双向数据绑定<br />Link变量不能在组件内部进行初始化<br />父组件的变量加上$ 表示传递的是引用 而不能用this。
1.5 @Builder装饰器
装饰的方法用于定义组件的声明式UI描述,在一个自定义组件内快速生成多个布局内容<br />来修饰一个函数,快速生成布局内容,从而可以避免重复的UI描述内容
1.6 @Prop装饰器
组件通信单向数据流,不需要要赋值
1.7 @Watch装饰器
@Link @Watch('onClickIndexChanged') clickIndex: number;
- 1.
复制
监听器,通过回调onClickIndexChanged 监听clickIndex 当clickIndex改变触发onClickIndexChanged方法
1.8 @Provide/@Consume装饰器
跨级双向绑定
@Provide('a') b: number = 0;
@Consume('a') c: number;
后代通过使用@Consume去获取父或上级@Provide提供的变量
1.8 @CustomDialog装饰器
修饰代码为自定义弹框 struct关键字 具体代码见组件管理
2.自定义组件
2.1生命周期
aboutToAppear() 创建<br />aboutToDisappear() 销毁
二、UIAbility
1.页面传参
import router from "@oho.router"
#传参
router.pushUrl({
url:"page/home"
params:{
id:1
}
})
#获取参数
router.getParams()?.["id"]
#返回
router.back()
#返回到指定页面
router.back({ url: 'pages/Index' });
2.生命周期
- Create状态,在UIAbility实例创建时触发,系统会调用onCreate回调。可以在onCreate回调中进行相关初始化操作。
例如用户打开电池管理应用,在应用加载过程中,在UI页面可见之前,可以在onCreate回调中读取当前系统的电量情况,用于后续的UI页面展示
- WindowStage用于管理窗口相关的内容,例如与界面相关的获焦/失焦、可见/不可见。
可以在onWindowStageCreate回调中,设置UI页面加载、设置WindowStage的事件订阅
在onWindowStageCreate(windowStage)中通过loadContent接口设置应用要加载的页面
例:正在打游戏的时候,有一个消息通知,游戏应用就从获焦切换到了失焦状态,消息应用切换到了获焦状态。对于消息应用,在onWindowStageCreate回调中,会触发获焦的事件回调,可以进行设置消息应用的背景颜色、高亮等操作。
...
onWindowStageCreate(windowStage: window.WindowStage) {
// 设置UI页面加载
...
windowStage.loadContent('pages/Index', (err, data) => {
...
});
}
...
3.Foreground和Background状态,分别在UIAbility切换至前台或者切换至后台时触发。<br />分别对应于onForeground回调和onBackground回调。<br />onForeground回调,在UIAbility的UI页面可见之前,即UIAbility切换至前台时触发。可以在onForeground回调中申请系统需要的资源,或者重新申请在onBackground中释放的资源。<br />onBackground回调,在UIAbility的UI页面完全不可见之后,即UIAbility切换至后台时候触发。可以在onBackground回调中释放UI页面不可见时无用的资源,或者在此回调中执行较为耗时的操作,例如状态保存等。
例如用户打开地图应用查看当前地理位置的时候,假设地图应用已获得用户的定位权限授权。在UI页面显示之前,可以在onForeground回调中打开定位功能,从而获取到当前的位置信息。
4.在UIAbility实例销毁之前,则会先进入onWindowStageDestroy回调,我们可以在该回调中释放UI页面资源。
例如在onWindowStageCreate中设置的获焦/失焦等WindowStage订阅事件
5.Destroy状态,在UIAbility销毁时触发。可以在onDestroy回调中进行系统资源的释放、数据的保存等操作
例如用户使用应用的程序退出功能,会调用UIAbilityContext的terminalSelf()方法,从而完成UIAbility销毁。或者用户使用最近任务列表关闭该UIAbility实例时,也会完成UIAbility的销毁。
3.UIAbility的启动模式
singleton(单实例模式)
当用户打开浏览器或者新闻等应用,并浏览访问相关内容后,回到桌面,再次打开该应用,显示的仍然是用户当前访问的界面。
multiton(多实例模式)
用户在使用分屏功能时,希望使用两个不同应用(例如备忘录应用和图库应用)之间进行分屏,也希望能使用同一个应用(例如备忘录应用自身)进行分屏。
例如微信和小程序单独分开 最近任务可以看到两个应用
<br /> specified(指定实例模式)
用户打开文档应用,从文档应用中打开一个文档内容,回到文档应用,继续打开同一个文档,希望打开的还是同一个文档内容;以及在文档应用中新建一个新的文档,每次新建文档,希望打开的都是一个新的空白文档内容
三、常用基础组件
使用资源引用类型
定义通用变量 entry/src/main/resources下的资源文件中
{
"string": [
{
"name": "login_text",
"value": "登录"
}
]
}
type代表资源类型(或资源的存放位置),可以取“color”、“float”、“string”、“plural”、“media”;name代表资源命名,由开发者定义资源时确定。
使用
$r('app.string.login_text')
1.Image
Image($r("app.media.icon"))
.width(100)
.height(100)
地址可以是网络图片 ,单需要在在module.json5文件中requestPermissions字段申明网络访问权限
{
"module" : {
"requestPermissions":[
{
"name": "ohos.permission.INTERNET"
}
]
}
}
2.Text
Text('HarmonyOS')
3.TextInput
TextInput({ placeholder: '请输入密码' })
.fontColor(Color.Blue)
.fontSize(20)
.placeholderColor(0x999999)
.placeholderFont({ size: 20, weight: FontWeight.Medium, family: 'cursive', style: FontStyle.Italic })
.type(InputType.Password) 密码框
- Normal:基本输入模式。支持输入数字、字母、下划线、空格、特殊字符
- Password:密码输入模式。
- Email:e-mail地址输入模式。
- Number:纯数字输入模式。
获取输入文本
TextInput({ placeholder: '请输入账号' })
.caretColor(Color.Blue)
.onChange((value: string) => {
this.text = value
})
4.Button
Button('登录', { type: ButtonType.Capsule, stateEffect: true })
第一个参数为按钮文字
按钮样式:
- Capsule:胶囊型按钮(圆角默认为高度的一半)。
- Circle:圆形按钮。
- Normal:普通按钮(默认不带圆角)。
点击事件为onClick
包含按钮图片:
Button({ type: ButtonType.Circle, stateEffect: true }) {
Image($r('app.media.icon_delete'))
.width(30)
.height(30)
}
.width(55)
.height(55)
.backgroundColor(0x317aff)
5.LoadingProgress
loading效果 全屏
LoadingProgress()
.color(Color.Blue)
.height(60)
.width(60)
6.Video
Video(value: {src?: string | Resource, currentProgressRate?: number | string |PlaybackSpeed, previewUri?: string |PixelMap | Resource, controller?: VideoController})
//使用本地文件案例
import mediaLibrary from '@ohos.multimedia.mediaLibrary';
async queryMediaVideo() {
let option = {
// 根据媒体类型检索
selections: mediaLibrary.FileKey.MEDIA_TYPE + '=?',
// 媒体类型为视频
selectionArgs: [mediaLibrary.MediaType.VIDEO.toString()]
};
let media = mediaLibrary.getMediaLibrary(getContext(this));
// 获取资源文件
const fetchFileResult = await media.getFileAssets(option);
// 以获取的第一个文件为例获取视频地址
let fileAsset = await fetchFileResult.getFirstObject();
this.source = fileAsset.uri
}
- src表示视频播放源的路径,可以支持本地视频路径和网络路径。网络地址需要在module.json5文件中requestPermissions字段申明网络访问权限(同图片),本地视频案例如上
- currentProgressRate表示视频播放倍速,其参数类型为number,取值支持0.75,1.0,1.25,1.75,2.0,默认值为1.0倍速
- previewUri表示视频未播放时的预览图片路径;
- controller表示视频控制器。
video属性
muted | 是否静音。默认值:false |
---|---|
autoPlay | 是否自动播放。默认值:false |
controls | 控制视频播放的控制栏是否显示。默认值:true,使用自定义控制器需要关闭 |
objectFit | 设置视频显示模式。默认值:Cover。六种模式Contain、Cover、Auto、Fill、ScaleDown、None |
loop | 是否单个视频循环播放。默认 |