#HarmonyOs篇： 管理应用拥有的状态LocalStorage AppStorage
调测调优
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/system-debug-optimize-V5
hilog 日志
import { hilog } from ‘@kit.PerformanceAnalysisKit’;
hilog.info(0xFF00, “testTag”, “%{public}s World %{public}d”, “hello”, 3);
管理应用拥有的状态
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-application-state-management-V5
LocalStorage页面级UI状态存储
@LocalStorageProp这个与LocalStorage给定变量形成单向同步关系
@LocalStotageLink这个与LocalStorage给定变量形成单向双向关系
SubscribedAbstractProperty是HarmonyOs的一个核心工具
支持与 AppStorage 或 LocalStorage 中的属性建立单向或双向绑定。
AppStorage应用全局的UI状态存储
@StorageProp单向
@StorageLink双向
管理组件拥有的状态
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-component-state-management-V5
@State 组件内状态
@Prop 父子单向同步
@Link 父子双向同步
@Provide @Consume后代组件同步
@Component
struct Child {
@Consume num: number;
build() {
Column() {
Text(`num的值: ${this.num}`)
}
}
}
@Entry
@Component
struct Parent {
// 正确写法
@Provide num: number = 10;
build() {
Column() {
Text(`num的值: ${this.num}`)
Child()
}
}
}
== @Provide和@Consume，应用于与后代组件的双向数据同步，应用于状态数据在多个层级之间传递的场景。==双向同步的示例
@Component
struct ToDoItem {
// @Consume装饰的变量通过相同的属性名绑定其祖先组件ToDo内的@Provide装饰的变量
@Consume count: number;
build() {
Column() {
Text(`count(${this.count})`)
Button(`count(${this.count}), count + 1`)
.onClick(() => this.count += 1)
}
.width('50%')
}
}
@Component
struct ToDoList {
build() {
Row({ space: 5 }) {
ToDoItem()
ToDoItem()
}
}
}
@Component
struct ToDoDemo {
build() {
ToDoList()
}
}
@Entry
@Component
struct ToDo {
// @Provide装饰的变量index由入口组件ToDo提供其后代组件
@Provide count: number = 0;
build() {
Column() {
Button(`count(${this.count}), count + 1`)
.onClick(() => this.count += 1)
ToDoDemo()
}
}
}
@Observed @ObjectLink 深层次同步
自定义组件
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-builder-V5
@Builder—自定义构造函数
@LocalBuilder—维持组件父子关系
class ReferenceType {
paramString: string = '';
}
@Component
struct HelloComponent {
@Prop message: string;
build() {
Row() {
Text(`HelloComponent===${this.message}`);
}
}
}
@Entry
@Component
struct Parent {
@State variableValue: string = 'Hello World';
@LocalBuilder
citeLocalBuilder($$: ReferenceType) {
Row() {
Column() {
Text(`citeLocalBuilder===${$$.paramString}`);
HelloComponent({ message: $$.paramString });
}
}
}
build() {
Column() {
this.citeLocalBuilder({ paramString: this.variableValue });
Button('Click me').onClick(() => {
this.variableValue = 'Hi World';
})
}
}
}
子组件引用父组件的@LocalBuilder函数，传入的参数为状态变量，状态变量的改变不会引发@LocalBuilder方法内的UI刷新，原因是@Localbuilder装饰的函数绑定在父组件上，状态变量刷新机制是刷新本组件以及其子组件，对父组件无影响，故无法引发刷新。若使用@Builder修饰则可引发刷新，原因是@Builder改变了函数的this指向，此时函数被绑定到子组件上，故能引发UI刷新。
@BuilderParam
@BuilderParam装饰的方法只能被自定义构建函数（@Builder装饰的方法）初始化。
@Component
struct Child {
@Builder customBuilder() {};
@BuilderParam customBuilderParam: () => void = this.customBuilder;
build() {
Column() {
this.customBuilderParam()
}
}
}
@Entry
@Component
struct Parent {
@Builder componentBuilder() {
Text(`Parent builder `)
}
build() {
Column() {
Child({ customBuilderParam: this.componentBuilder })
}
}
}
@Styles—定义组件重用样式
// 全局
@Styles function functionName() { ... }
// 在组件内
@Component
struct FancyUse {
@Styles fancy() {
.height(100)
}
}
@Extend—定义扩展组件的样式
和@Styles不同，@Extend支持封装指定组件的私有属性、私有事件和自身定义的全局方法。
// @Extend(Text)可以支持Text的私有属性fontColor
@Extend(Text) function fancy () {
.fontColor(Color.Red)
}
// superFancyText可以调用预定义的fancy
@Extend(Text) function superFancyText(size:number) {
.fontSize(size)
.fancy()
}
@Extend，用于扩展原生组件样式。
@stateStyles—多态样式
focused：获焦态。
normal：正常态。
pressed：按压态。
disabled：不可用态。
selected10+：选中态
@Entry
@Component
struct StateStylesSample {
build() {
Column() {
Button('Button1')
.stateStyles({
focused: {
.backgroundColor('#ffffeef0')
},
pressed: {
.backgroundColor('#ff707070')
},
normal: {
.backgroundColor('#ff2787d9')
}
})
.margin(20)
Button('Button2')
.stateStyles({
focused: {
.backgroundColor('#ffffeef0')
},
pressed: {
.backgroundColor('#ff707070')
},
normal: {
.backgroundColor('#ff2787d9')
}
})
}.margin('30%')
}
}
@Require—校验构造传参
$$语法 内置组件双向同步
$$运算符为系统内置组件提供TS变量的引用，使得TS变量和系统内置组件的内部状态保持同步。
组件导航Navigation
pageTransition页面间转场
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/ts-page-transition-animation-V13#pagetransitionoptions%E5%AF%B9%E8%B1%A1%E8%AF%B4%E6%98%8E
PageTransitionEnter当页面自定义入场动效
PageTransitionExit当页面自定义出场动效
@ohos.promptAction (弹窗)
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-promptaction-V13
import { promptAction } from '@kit.ArkUI';
promptAction.showToast
showToast(options: ShowToastOptions): void
创建并显示文本提示框。
Blank
空白填充组件----具有自动填充剩余部分的能力。
UIAbility里面的生命周期介绍
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-app-ability-uiability-V13#uiabilityonforeground
onCreate–UIAbility实例处于完全关闭状态下被创建完成后进入该生命周期回调，执行初始化业务逻辑操作.
onWindowStageCreate–
router.pushUrl
目录在 应用框架—ArkUI—ArkTS API—UI界面
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-router-V5#routerpushurl9