【每日学点鸿蒙知识】Web组件安全区域、关于any问题、流式布局折叠效果、click 会触发两次回调问题、history 无效

1、HarmonyOS Web组件的安全区域的值不对，无法实现底部导航栏的避让？

需要加上一个meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />

2、HarmonyOS 为什么Map中类型不能使用any了，但是系统api能使用？

为什么Map中类型不能使用any了，但是系统api能使用？

目前在ts里可以用any unknown。目前系统api都是使用.d.ts格式，所以可以使用。当前 兼容ts，ets调用ts是不限制的。dts文件里的是ts代码ArkTS语法建议是明显参数类型推荐使用Map<string, string|number|boolen>。 如果确实有述求可以使用 EsObject代替any

3、HarmonyOS 流式布局折叠效果？

有没有控件，超过2行的不显示，最后一个显示个折叠箭头，点击箭头再展开剩余的行数

没有这样的控件，可以使用List实现，具体实现可以参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ohos-arkui-advanced-filter-V5

流式布局在HarmonyOS中可以通过flex布局实现，demo：

import measure from '@ohos.measure'
import display from '@ohos.display';

const childMaxWidth:number = 325 //为了方便后续计算，这里的宽度数值为px
let displayClass: display.Display | null = null;
let componentWidth:number = 0;
try {
  displayClass = display.getDefaultDisplaySync();
  componentWidth = displayClass.width
} catch (exception) {
  console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}
@Component
struct TextItem{
  @State message:string = ''
  @Prop fontSizeData:number
  build() {
    Text(this.message)
      .fontSize(this.fontSizeData)
      .margin({left:10,top:10})
      .backgroundColor('#c4c2cc')
      .constraintSize({maxWidth:childMaxWidth + 'px'})
      .maxLines(1)
      .textOverflow({overflow:TextOverflow.Ellipsis})
  }
}
@Entry
@Component
struct Index2 {
  @State @Watch('IndexChange')index:number = 0
  @State @Watch('textChange') message: string = ''
  @State FlexWidth: string = '80%';
  @State newIndex:number = 0;
  @State heightControl: number|string = 100;
  @State ButtonText:string = '∨';
  @State AllData:string[] = ['1','22','333','44444','55','666','7777','8888888888888','99','3434','5656','7878','141414141','68681']
  @State SomeData:string[] = []
  @State ShowData:string[] = []
  @State fontSizeData:number = 30
  @State AllWidth:number = 0
  @State textWidth:number = 0
  @State restrictWidth: number = 0;
  IndexChange(){
    if(this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)){
      this.newIndex = this.index
      console.log('text1 newIndex',this.newIndex)
      console.log('text1 change',this.newIndex)
    }
  }
  textChange(){
    let content:string = this.message
    this.textWidth = measure.measureText({
      textContent: content,
      fontSize: this.fontSizeData
    })
    if(this.textWidth > childMaxWidth){
      this.AllWidth += childMaxWidth
    }else{
      this.AllWidth += this.textWidth
    }
    console.log('text1 content',content)
    console.log('text1 Width',this.textWidth)

  }
  aboutToAppear(): void {
    if(componentWidth != 0){
      this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 1.3 * 0.01)
      console.log('text1 componentWidth',componentWidth)
      console.log('text1 restrictWidth',this.restrictWidth)
    }
    for(let i = 0;i < this.AllData.length;i++){
      this.message = this.AllData[i]
      this.index = i
    }
    console.log('text1 change newIndex',this.newIndex)
    this.SomeData = this.AllData.slice(0,this.newIndex+1)
    this.ShowData = this.SomeData
  }
  build() {
    Row() {
      Column() {
        Flex({wrap:FlexWrap.Wrap}){
          ForEach(
            this.ShowData,
            (item:string)=>{
              TextItem({message:item,fontSizeData:this.fontSizeData})
            }
          )
          Button(this.ButtonText)
            .onClick(()=>{
              if(this.heightControl === 100){
                this.heightControl = '100%'
                this.ButtonText = '^'
                this.ShowData = this.AllData
              }else{
                this.heightControl = 100
                this.ButtonText = 'v'
                this.ShowData = this.SomeData
              }
            })
            .width(40)
            .height(30)
            .margin({left:10,top:10})
        }.constraintSize({ maxHeight: this.heightControl })
        .border({width:1})
        .width(this.FlexWidth)
        .margin({left:'5%'})
        .clip(true)
      }
      .width('100%')
    }
    .height('100%')

  }
}

4、HarmonyOS h5页面swiper 5x/6x 版本在HarmonyOS环境下slide 的click 会触发两次回调问题？

swiper,js这个文件中有判断机型。但是没有判断HarmonyOS导致多注册了一次，这样点击事件就多执行一次。建议下载下来后加上HarmonyOS的判断，本地引用修改后的js。

if (Support.touch) {
  var passiveListener = touchEvents.start === 'touchstart' && Support.passiveListener && params.passiveListeners ? { passive: true, capture: false } : false;
  el.addEventListener(touchEvents.start, swiper.onTouchStart, passiveListener);
  el.addEventListener(touchEvents.move, swiper.onTouchMove, Support.passiveListener ? { passive: false, capture: capture } : capture);
  el.addEventListener(touchEvents.end, swiper.onTouchEnd, passiveListener);
  if (touchEvents.cancel) {
    el.addEventListener(touchEvents.cancel, swiper.onTouchEnd, passiveListener);
  }
  if (!dummyEventAttached) {
    doc.addEventListener('touchstart', dummyEventListener);
    dummyEventAttached = true;
  }
}
if (params.simulateTouch ) || (params.simulateTouch) {
  el.addEventListener('mousedown', swiper.onTouchStart, false);
  doc.addEventListener('mousemove', swiper.onTouchMove, capture);
  doc.addEventListener('mouseup', swiper.onTouchEnd, false);
}

5、HarmonyOS h5 window.history 无效？

先进入一个native页面，再连续打开多个h5页面，侧滑或者按物理返回键会直接回退到第一个native页面

如果是侧滑或返回上一个h5页面可以在组件的onBackPress生命周期种监听返回的手势。当用户点击返回按钮时触发，仅@Entry装饰的自定义组件生效。返回true表示页面自己处理返回逻辑，不进行页面路由；返回false表示使用默认的路由返回逻辑，不设置返回值按照false处理。参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-custom-component-lifecycle-V5#onbackpress

onBackPress() {
  if (this.controller.accessBackward()) {
    this.controller.backward()
    return true;
  }
  return false;
}