#华为星计划# -从前端角度学HarmonyOS基础篇，适合前端转鸿蒙学习

、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.生命周期

1. Create状态，在UIAbility实例创建时触发，系统会调用onCreate回调。可以在onCreate回调中进行相关初始化操作。

例如用户打开电池管理应用，在应用加载过程中，在UI页面可见之前，可以在onCreate回调中读取当前系统的电量情况，用于后续的UI页面展示

1. 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属性