【每日学点鸿蒙知识】组件封装通用方法、callback和await性能对比、Web组件下拉刷新、hsp包报错、WebView圆角
1、HarmonyOS 自定义的组件如何封装一些通用的属性和方法，例如 Java 中的继承？
export class Animal{name:stringage:stringconstructor(name:string,age:string) {this.name = namethis.age = age}
}export class Person extends Animal{reading:stringconstructor(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();@BuildergetContentView() {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组件定义在此@Builderthis.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#%E7%BA%A6%E6%9D%9F%E9%99%90%E5%88%B6
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