【每日学点鸿蒙知识】组件封装通用方法、callback和await性能对比、Web组件下拉刷新、hsp包报错、WebView圆角

1、HarmonyOS 自定义的组件如何封装一些通用的属性和方法，例如 Java 中的继承？

export  class  Animal{
  name:string
  age:string
  constructor(name:string,age:string) {
    this.name = name
    this.age = age
  }
}

export  class Person extends Animal{
  reading:string
  constructor(reading:string,name:string,age:string) {
    super(name,age)
    this.reading = reading
  }

}

2、HarmonyOS callback和await哪个性能好？

回调函数（callback）
- 优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。）
- 缺点：多个回调函数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦合度太高，不利于代码的可维护。不能用 try catch 捕获错误，不能 return
Promise
- 优点：将嵌套的回调函数作为链式调用,解决了回调地狱的问题
- 缺点：无法取消 Promise ，错误需要通过回调函数来捕获
Async/await
async 函数是 generator 和 promise 实现的一个自动执行的语法糖，它内部自带执行器，当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动执行。
- 优点：代码清晰，不用像 Promise 写一大堆 then 链，处理了回调地狱的问题
- 缺点：await 将异步代码改造成同步代码，如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

3、HarmonyOS Web组件怎么添加下拉刷新？

可参考以下demo:

import web_webview from '@ohos.web.webview';
import { PullToRefresh } from '@ohos/pulltorefresh';

@Entry
@Component
struct WebPage {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State dataArray: Array<string> = []
  private scroller: Scroller = new Scroller();

  @Builder
  getContentView() {
    Column() {
      Web({ src: 'http://www.huawei.com', controller: this.controller })
    }
    .width('100%')
    .height('100%')
  }

  build() {
    Scroll(this.scroller) {
      PullToRefresh({
        // 必传项，列表组件所绑定的数据,不是列表传个空数据
        data: $dataArray,
        // 必传项，需绑定传入主体布局
        scroller: this.scroller,
        // 必传项，自定义主体布局
        customList: () => {
          // 一个用@Builder修饰过的UI方法,web组件定义在此@Builder
          this.getContentView();
        },
        // 可选项，下拉刷新回调
        onRefresh: () => {
          return new Promise<string>((resolve, reject) => {
            setTimeout(() => {
              resolve('')
              // this.controller.loadUrl('https://www.huawei.com')
            }, 1000);
          });
        },
      })
        .width('100%')
        .height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

4、依赖hsp出包，hsp使用debug包时正常，使用release包时，报错versionname不一致？

hsp要求versionname、releaseType与hap完全一致，请开发者关注。

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/in-app-hsp-V5#约束限制

5、HarmonyOS WebView 圆角设置失效？

Web组件在某些场景下我们不会全屏显示，且给左上角右上角设置圆角不会生效。可以用下面的demo来进行验证。

import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';

@Entry
@Component
struct Page2 {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  @State progress: number = 0;
  @State src: string = 'https://www.huawei.com/u/bmmain/helpsale/evaluate?random=1000&channel=BM_0933&needHideHead=3&cateId=101&type=B&plainSceneId=B2COld2New&modelId=125986&brandId=10532&modelName=%E5%8D%8E%E4%B8%BA%20Mate%2060%20Pro&skip2NextUrl=https%3A%2F%2Fm.zhuanzhuan.com%2Fzlj%2Fold_for_new_service_h5%2Fvaluation%3FneedHideHead%3D3%26needNewWebview%3D1%26serviceIds%3D%26productId%3D1779861808894005248%26metric%3D%26from%3Dc2b%26isUserEval%3D1';
  ;

  build() {
    Column() {
      Row().height('30%')
      Stack() {
        Web({ src: this.src, controller: this.controller })
          .borderRadius({ topLeft: 100, topRight: 100, bottomLeft: 0, bottomRight: 0 })
          .javaScriptAccess(true)
          .domStorageAccess(true)
          .onProgressChange((event) => {
            this.progress = event?.newProgress || 0;
            // console.log(`progress: ${this.progress}`);
          })
          .height('100%')
        Column({ space: 20 }) {
          Text(`progress: ${this.progress}`).fontSize(30).fontColor(Color.Black)
          Button('loadUrl')
            .onClick(() => {
              try {
                this.controller.setCustomUserAgent("zzVersion/8.18.20 zzT/16 zzDevice/1_44.0_3.0 zzApp/58ZhuanZhuan");
                const customUa = this.controller.getCustomUserAgent();
                const ua = this.controller.getUserAgent();
                console.log(`customUa: ${customUa}, ua: ${ua}`);
              } catch (error) {
                let e: business_error.BusinessError = error as business_error.BusinessError;
                console.error(`ErrorCode: ${e.code},  Message: ${e.message}`);
              }
            })
        }
      }
      .height('70%')
    }.backgroundColor(Color.Black)
  }
}

设置clip为true可以实现。关于clip参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5