ArkTS总结 – 前端知识圈

自定义组件

示例

@Component
struct myComponent{
    ...
    build(){
        ....
    }
    ...
}

自定义页面

@Entry /*表示页面的默认入口,一个页面有且只有一个*/
@Component
struct IndexPage{
    ...
    build(){...}
    ...
}

组件生命周期

方法	注释
aboutToAppear	创建自定义组件之后,build 之前调用. 可用来初始化页面的赋值
aboutToDisappear	销毁周期,注释变量如(定时器)

示例

@Component
struct MyComponent{
    aboutTOAppear(){console.log("组件初始化")}
    aboutTODisppear(){console.log("组件销毁")}
}

页面生命周期

方法	注释
onPageShow()	页面显示监听
onPageHide()	进入后台监听
onBackPagess(){return false}	页面返回监听,可设置返回值; 返回 true 表示自定义返回逻辑, 返回 flase 表示由系统返回逻辑

示例

@Component
struct MyComponent{
    /*组件的生命周期同样试用*/
    aboutTOAppear(){console.log("组件初始化")}
    aboutTODisppear(){console.log("组件销毁")}

    /*页面生命周期*/
    onPageShow(){console.log("页面显示")}
    onPageHide(){console.log("监听到进入后台")}
    onBackPagess(){true flase}
}

动态渲染

条件渲染

colunm(){
    if(true){
        Text("渲染张三")
    }else{
        Text("渲染李四")
    }
}

循环渲染

ForEach(A,B,C）该方法接受三个参数，A：必须是数组，循环渲染的数据源；B：子组件生成的模版； C：键值对生成器（和v-for中的key属性思想一致）

示例

ForEach([1,2,3],(item,index)=>{
    Text(item)
},(item,index)=>index)

状态管理

@State 状态管理,组件内的状态管理,当状态发生改变会自动更新视图

@Prop 父组件单向同步到子组件

@Link 父子组件可双向更新,子组件也可以直接更新父组件的状态

@watch 监听某个状态的变化, 和 vue 中的 watch 函数一致

@Consume 可以跨级监听这个某个状态，前提时变量命名必须和 @Provide 一致

@Provide 可声明某个状态可以被任意组件监听

父传子

通过 @State 和 @Link 两个装饰器联合使用，可以建立父子组件的双向数据绑定；和前端框架不同的是，子组件也可以直接改变 @Link 的状态同步到父组件的 @State 中

父组件示例

import { MyComponent } from "../Component/MyComponent";
@Entry
@Component
struct Index{
    @State name:string = "张三";
    @State age:number = 18;
    @Provide provideIndex:number = 0;
    build(){
        Row(){
            Column(){
                MyComponent({
                    name:$name,
                    age:this.age,
                    doc:"一段描述",
                })
            }
        }
    }
}

自组件示例

@Component
export struct  MyComponent{
  @Link @Watch("onNameChange") name:string /*建立父子组件的双向数据绑定*/
  @Props age:number
  @Consume provideIndex:number;
  prviate doc:string /*用于父组件传给子组件的值,不是双向数据绑定,类似于 vue 的 props 方式*/

  onNameChange(){
      console.log(`他这个名字发生变化了${this.name}`)
  }

  build(){
    Text(this.name).fontSize(40)
  }
}

应用程序入口 UIAbility

类似于小程序的分包操作，每个 UiAbility 可以看成一个单独的应用，可以与同一个主应用通信, (可以实现vuex的作用)

文件层级

entyability
    ----pages   
        ---- a页面
        ---- b页面

路由跳转

import router from "@ohos.router"

/*跳转并传参*/
router.pushUrl({
    url:"page/xxx",
    params:{key:value}
})

/*接受参数*/
@State src:string = router.getParams()?.["key"]

/*返回路由*/
router.back()

UIAbility 生命周期

生命周期文件在 xxxability/Xxxability.ts 的位置

onCreate() /*UIbility创建完成时触发，可以用于定义变量等后续的展示*/
    |
    |
windowStageCreate() /*设置UI页面加载 windowState 事件订阅（失焦、获焦、可见、不可见）*/
    |
    |
Foreground() /*UIAbility处于前台触发*/
Background() /*UIAbility处于后台触发*/
    |
    |
windowStageDestroy() /*UIAbility销毁之前进入回调*/
    |
    |
Destroy() /*UIABility销毁时触发*/

UIAbility组件与UI的数据同步

整体使用了 emitBus 思想

在 Ability 文件中

export default class EntryAbility extends UIAbility {
    func1(...data){/*要处理的业务逻辑*/}

    onCreate(want,launch){
        /*获取eventHub*/
        let eventhub = this.context.eventHub;
        /*执行订阅操作*/
        eventhub.on('event1', this.func1);
    }

}

在UI层使用

import common from '@ohos.app.ability.common';

@Entry
@Component
struct Index{
     private context = getContext(this) as common.UIAbilityContext;

    build(){
        Column(){
            Row(){
                Button("测试emitBus").onclick(()=>{
                    this.context.eventHub.emit('event1');
                })
            }
        }
    }
}

使用 globalThis 数据同步

globalThis是ArkTS引擎实例内部的一个全局对象，引擎内部的UIAbility/ExtensionAbility/Page都可以使用

在 Ability 进行设置全局属性

export default class EntryAbility extends UIAbility {
    onCreate(want, launch) {
        globalThis.entryAbilityWant = want;
        // ...
    }
}

在UI层或逻辑层使用

struct Index{
    entryAbilityStore = globalThis.entryAbilityWant;
    // ...
}

HTTP请求

需要获取权限 module.json5 文件中配置

"requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      }
]

按照官网的描述

import http from "@ohos.net.http"
let httpRequest = http.createHttp()
/*订阅请求头*/
httpRequest.on("headersReceive",(header)=>{})

/*发起请求*/
let response = httpRequest.request(url,{
    method:http.RequestMethod.GET, /*请求方式*/
    extraData:{},/*post方式的请求体*/
    connectTimeout:number,/*连接超时时间*/
    readTimeout:number,/*读取超时时间*/
    header:{}/*请求头*/
})

/*处理响应*/
response.then((value)=>{
    value.reponseCode /*状态码*/
    value.result /*数据*/
    value.header /*请求头信息*/
    value.cookies /*cookies信息*/
})

示例：封装一个 http 类，用于请求

import http from "@ohos.net.http"

export function Axios(url:string):Promise<any>{
  let httpRequest = http.createHttp();

  let responsePromise = httpRequest.request(
    url,
    {
      method:http.RequestMethod.GET
    }
  )

  return responsePromise.then((value)=>{
    return value
  })

}

实现类中使用

Button("Axios").onClick((event: ClickEvent) => {
    Axios("http://114.115.218.92:3004/getTagList").then((data)=>{
        console.log(`${data.result}`) /*鸿蒙编辑器只能打印字符串，而且没有network网络监听*/
    })
})

用户首选项数据存储

在 Ability 文件下初始化 Preferences 实例

import dataPreferences from '@ohos.data.preferences';
onCreate(want, launchParam){
    try{
      dataPreferences.getPreferences(this.context,"myStore",(err,preferences)=>{
        if(err){console.error("报错了");return}
        console.info("-----------------------------------------------------")
        console.info("Preferences 加载成功")
        /*使用 globalThis 方式可以让全局应用公用该属性*/
        globalThis.entryAbilityPreferences = preferences;
      })
    }catch (error){
      console.error("报错了")
    }
}

封装一下 Preferences 让他具备 localStorage 的使用体验；创建 utils\storage.ets 文件

export default  class Storage{
  entryAbilityPreferences;
  constructor() {
    this.entryAbilityPreferences = globalThis.entryAbilityPreferences;
  }
  /*设置*/
  setItem(key:string,value:string|number|boolean){
    this.entryAbilityPreferences.has(key,(err, val)=>{
      if(err){console.error("set调用失败");return}
      if(val){console.error("key名已存在")}else{
        try{
          this.entryAbilityPreferences.put(key,value)
          this.entryAbilityPreferences.flush()
        }catch (err){
          console.error("put方法报错了")
        }
      }
    })
  }
  /*查找*/
  getItem(key:string,defaultVal:string|number|boolean):Promise<string|number|boolean>{
    return new Promise((resolve,reject)=>{
      this.entryAbilityPreferences.get(key,defaultVal,(err,val)=>{
        if(err){reject("报错了")}
        resolve(val as string|number|boolean);
      })
    })
  }
  /*删除*/
  delItem(key:string){
    this.entryAbilityPreferences.delete(key)
  }
}

使用

import Storage from "../utils/storage"
@Entry
@Component
export struct Optimize {

  storage = new Storage();

  build() {
    Column(){
      Row(){
        Button("写入测试").onClick((event: ClickEvent) => {
          this.storage.setItem("name","张三")
        })
      }
      .width("100%")
      .padding(20)

      Row(){
        Button("读取测试").onClick(async (event: ClickEvent) => {
          let reslut = await this.storage.getItem("name","张三");
          console.log("------------------------------")
          console.log(`${reslut}`)
        })
      }
      .width("100%")
      .padding(20)

      Row(){
        Button("删除测试").onClick((event: ClickEvent) => {
          this.storage.delItem("name");
        })
      }
      .width("100%")
      .padding(20)
    }
  }
}