鸿蒙小技巧

1.子调用父的方法

子组件

父组件

2.使用emitter实现孙子传爷

孙子组件

import emitter from '@ohos.events.emitter';

    let event: emitter.InnerEvent = {
              eventId: 1,
              priority: emitter.EventPriority.HIGH
            };

            let eventData: emitter.EventData = {
              data: {
                "state": true,
                "item": JSON.stringify(this.item)
              }
            };

            // 孙子组件发送事件
            emitter.emit(event, eventData);

 爷爷组件

  aboutToAppear(): void {
   

    let event: emitter.InnerEvent = {
      eventId: 1
    };

    let callback = (eventData: emitter.EventData): void => {
      if (eventData && eventData.data) {

        this.item = JSON.parse(eventData.data.item)
        this.isShow = eventData.data.state
      }
    };

    // 爷爷组件监听事件
    emitter.on(event, callback);
  }

3.@Observed和@ObjectLink应用

@Observed
class Person {
  age: number = 18
  son: Son = new Son()
}

@Observed
class Son {
  weight: number = 300
}

@Component
struct MyButton {
  @ObjectLink
  son: Son

  build() {
    Column() {
      Button('son的weight' + this.son.weight)
        .onClick(() => {
          // this.son.weight++
        })

    }

  }
}

@Entry
@Component
struct Index {
  @State
  person: Person = new Person()

  build() {
    Column() {
      MyButton({
        son: this.person.son
      }).onClick(() => {
        // this.person.son.weight++
      })
      Button('Personde age' + this.person.age)
        .onClick(() => {
          this.person.age++
        })
    }

  }
}

 getContext(this).eventHub使用

触发

 getContext(this).eventHub.emit(this.feedData.feedBase?.id, 'updateRelationship', res.data.relationship)

接收

 getContext(this).eventHub.on(‘eventname’， （） => {})

销毁

getContext(this).eventHub.off(this.feedId)

5.鸿蒙加载web组件

import { HeaderComponent } from '../../view/MainBody/HeadCommon';
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

// 图片公用样式
@Styles
function RowPublicStyle() {
  .height(60)
  .border({ width: { bottom: 1 }, color: $r('app.color.global_9EA') })
  .width('100%')

}


@Component
export struct SecureCom {
  @State message: string = '我是设置页面'
  @StorageProp('topHeight')
  topHeight: number = 20
  @Link showSecureCom: boolean
  @State showWeb: boolean = false
  controller: webview.WebviewController = new webview.WebviewController();
  loginToken: string | undefined = AppStorage.get('loginToken')
  baseUrl = AppStorage.get<ServerData>('serverConfig')?.socialServerUrl || SOCIAl_BASE_URL
  build() {
    NavDestination() {
      Stack() {
        Column() {
          HeaderComponent({
            layoutMode: 2,
            title: '账号与安全',
            onBack: () => {
              this.showSecureCom = false
            }

          })
            .padding({ left: 11, right: 11 })
          Column() {

     

            Row() {
              Row() {

                Text('注销账户')
                  .fontSize($r('app.integer.text_size_13'))
                  .fontColor($r('app.color.quire_fontColor_Black_28'))
              }

              Image($r('app.media.rightArrows'))
                .fillColor($r('app.color.global_3333'))
                .width('5')
                .height(10)
            }
            .justifyContent(FlexAlign.SpaceBetween)
            .RowPublicStyle()
            .onClick(() => {
          //设置cookie
           webview.WebCookieManager.configCookieSync('https:xxxxx',
                `loginToken=${this.loginToken}`);
              this.showWeb = true
            })

            Button('fetchCookieSync')
              .onClick(() => {
                try {
                 //获取cookie
                  let value =
                    webview.WebCookieManager.fetchCookieSync('https:xxxxx');
                  console.log("fetchCookieSync oooooooooooooooooooooo = " + value);
                  
                } catch (error) {
                  console.error(`ErrorCodeoooooooooooooooooooooo: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
                }
              })
          }
          .width('100%')
          .height(357)
          .borderRadius(12)
          .backgroundColor($r('app.color.global_White_solid'))
          .padding({
            left: 22, right: 22
          })

        }
        .width('100%')
        .height('100%')
        .padding({ top: this.topHeight })

        if (this.showWeb) {
          Column() {
            Web({
              src: `https:xxxxx`,
              controller: this.controller
            })
              .domStorageAccess(true) //涉及web本地存储权限
          }
          .width('100%')
          .height('100%')
        }
      }
    }
    .hideTitleBar(true)

  }
}

设置cookie

        webview.WebCookieManager.configCookieSync('https:xxxxxx',
                `loginToken=${this.loginToken}`);

获取cookie

let value =webview.WebCookieManager.fetchCookieSync('https:xxxxxx');

webview是默认未开启文档对象模型存储接口 所以web的storage没法用 想要它有空开启这个

 Web({ src: 'www.example.com', controller: this.controller })
        .domStorageAccess(true)
    }