【每日学点鸿蒙知识】子窗口方向、RichEdit不居中、本地资源缓存给web、Json转对象丢失方法、监听状态变量数组中内容改变

1、HarmonyOS 应用新建子窗口设置显示方向未生效？

子窗口getPreferredOrientation获取到的是横向设置没问题，但是ui显示还是纵向的

直接设置主窗口的方向即可。参考demo：

复制代码

import window from '@ohos.window';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Text('反向横屏')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(async ()=>{

            try {
              const topWindow = await window.getLastWindow(getContext(this));
              console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(topWindow));
              await topWindow.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED);
              console.info('Succeeded in setting window orientation.');
            } catch (error) {
              console.error('Failed to obtain or set the top window. Cause: ' + JSON.stringify(error));
            }
            /*window.getLastWindow(getContext(this),(err,win)=>{
              win.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED)
            })*/
          })

        Text("竖屏")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .onClick(async ()=>{
            try {
              const topWindow = await window.getLastWindow(getContext(this));
              console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(topWindow));
              await topWindow.setPreferredOrientation(window.Orientation.PORTRAIT);
              console.info('Succeeded in setting window orientation.');
            } catch (error) {
              console.error('Failed to obtain or set the top window. Cause: ' + JSON.stringify(error));
            }
            /*window.getLastWindow(getContext(this),(err,win)=>{
              win.setPreferredOrientation(window.Orientation.PORTRAIT)
            })*/
          })

      }
      .width('100%')
    }
    .height('100%')
  }
}

2、HarmonyOS RichEditor 内容不居中显示？

参考代码：

复制代码

RichEditor({ controller: this.controllerRich})
  .width('100%')
  .height(40)
  .layoutWeight(1)
  .borderRadius(10)
  .backgroundColor(Color.Red)
  .margin({ top: 20 ,left:14,bottom:5})
  .key('RichEditor')
  .id('id')
  .placeholder('平台提倡文明用语，请温柔发言哦~',{font:{size:12},fontColor:'#999999'})
  .defaultFocus(true)
  .onReady(() => {
    this.controllerRich.addTextSpan("0123456789\n", {
      style: {
        fontColor: Color.Pink,
        fontSize: "32",
      },
      paragraphStyle: {
        textAlign: TextAlign.Center,
        leadingMargin: 16
      }
    })
  })

3、HarmonyOS injectOfflineResources与precompileJavaScript区别？

相较于precompileJavaScript， injectOfflineResources也是指的把本地资源文件作为缓存给web使用吗？底层实现有区别吗？哪种性能会更好一些？

injectOfflineResources：将本地离线资源注入到内存缓存中，以提升页面首次启动速度；precompileJavaScript：预编译JavaScript生成字节码缓存或根据提供的参数更新已有的字节码缓存；这两个接口无论从用途、定义还是底层实现都完全是两个接口，前者是将资源注入到内存缓存，后者是将js编译成字节码缓存，性能上也没有可比性；参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#ZH-CN_TOPIC_0000001930676933__precompilejavascript12

4、HarmonyOS 在ArkTS中，想要将JSON 转为Class后，Class 中的function 方法丢失了？

语法问题，JSON.parse() 方法返回的是一个普通对象，而不是 DataBean 类的实例。不包含类定义的任何方法。需要在将 JSON 数据转换为 DataBean 实例时，手动创建类的实例，并将 JSON 对象的属性赋值给类的实例。参考：

复制代码

class DataBean {
  code = -1;
  msg = '';

  isOK() {
    return this.code === 0;
  }

  // 静态方法，从 JSON 字符串创建 DataBean 实例
  static fromJson(jsonString: string): DataBean {
    const jsonData:ESObject = JSON.parse(jsonString);
    const dataBean = new DataBean();
    dataBean.code = jsonData.code;
    dataBean.msg = jsonData.msg;
    return dataBean;
  }
}

let json = '{"code":0,"msg":"success"}';
let dataBean = DataBean.fromJson(json);
console.log("test",dataBean.msg); // success
console.log("test",dataBean.isOK()); // true，

5、HarmonyOS 使用@state装饰器，监听Array数组对象中的属性，如果不通过增删改的方式想监听属性，有没有最佳实践？

可以通过@Observed装饰器和@ObjectLink装饰器嵌套类对象属性变化参考链接：

https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-observed-and-objectlink-V5#对象数组

demo:

复制代码

@Observed
class InnerMessageVo {
  id?: number;
  readState?: boolean;

  constructor(id: number, readState: boolean) {
    this.id = id;
    this.readState = readState;
  }
}

@Component
struct ViweA {
  @ObjectLink a: InnerMessageVo;

  build() {
    Row() {
      Text(`${this.a.readState}`)
    }
  }
}

@Entry
@Component
struct Index {
  @State arr1: InnerMessageVo[] = [new InnerMessageVo(1, false), new InnerMessageVo(2, false)]

  build() {
    Row() {
      Column() {
        List() {
          ForEach(this.arr1, (item: InnerMessageVo, index: number) => {
            ViweA({ a: this.arr1[index] })
          })
          ListItem() {
            Button('change')
              .onClick(() => {
                console.log('false');
                this.arr1[1].readState = true
              })
          }
        }
      }
      .width('100%')
    }
    .height('100%')
  }
}