当前位置：首页 > article >正文

【每日学点鸿蒙知识】Web高度适配、变量声明规范、动画取消、签名文件、包体积优化相关

article 2025/1/2 1:03:22

1、HarmonyOS Web页面高度适配？

在Web页面设置高度100%时，发现和Web控件的高度不一致，这个需要设置什么可以达到页面高度和Web容器高度一致

目前只支持两种web布局模式，分别为Web布局跟随系统WebLayoutMode.NONE和Web基于页面大小的自适应网页布局WebLayoutMode.FIT_CONTENT。默认为WebLayoutMode.NONE模式。参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabcontent-V5#layoutmode10%E6%9E%9A%E4%B8%BE%E8%AF%B4%E6%98%8E

Web({ src: $rawfile('index.html'), controller: this.controller })
  .width(CommonConstants.WIDTH_OR_HEIGHT)
  .layoutMode(WebLayoutMode.FIT_CONTENT)

2、HarmonyOS ArkTS对于变量类型的声明有相关规范吗？

是否需要在变量声明时候加上变量类型，不同类型要求一致吗，比如：
let result = ''这里是否要求写成let result: string = ‘’
const TEST_RESULT = 'ok’是否要求写成const TEST_RESULT: string = ‘ok’
成员变量和临时变量有差异吗？

使用 let result = ‘’; 就可以，引擎会根据值来推导类型。let 和 const 是一样的，不论是什么类型的变量，都是可以自动推导的。

3、HarmonyOS animateTo或animation动画如何取消？

看了看文档好像没看到有相关的取消方法

如果你需要打断动画可以参考下这个demo，设置一个为0的动画去打断之前的动画。
参考demo：

@Component
@Entry
struct Index {
  @State clickNumber: number = 0;
  @State myScale: number = 1.0;
  uiContext: UIContext | undefined = undefined;
  imageIndex: number = 0
  aboutToAppear() {
    this.uiContext = this.getUIContext?.();
  }
  build() {
    Stack({ alignContent: Alignment.TopEnd }) {
      //木鱼图片
      Image($r('app.media.startIcon'))
        .zIndex(2)
        .width(200)
        .height(200)
        .margin({ top: 300, right: 130 })
        .scale({ x: this.myScale, y: this.myScale })// .clickEffect({level:ClickEffectLevel.LIGHT,scale:0.5})
        .onClick(() => {
          if (!this.uiContext) {
            return;
          }
          //设置一个显示动画为0的动画，去打断之前的动画
          animateTo({ duration: 0, iterations: 1}, () => {
            console.info('this.dur0xxx---', this.myScale)
            this.myScale = 1;
          })
          animateTo({ duration: 1500, iterations: 1 ,onFinish: () => {
            animateTo({ duration: 1500, iterations: 1}, () =>{
              console.info('this.dur2---', this.myScale)
              this.myScale = 1;
            })
          }}, () => {
            console.info('this.dur1---', this.myScale)
            this.myScale = 0.8;
          })
        })
    }.backgroundColor(Color.Black)
    .width('100%')
    .height('100%')
  }
}

4、如何在build-profile中配置debug模式使用一份签名文件，release模式使用另一份签名文件

工程级build-profile.json5文件中新增定制product，分别使用不同的签名证书，
1、配置签名文件

"signingConfigs": [ { "name": "default", "type": "HarmonyOS", "material": { "certpath": "", "storePassword": "", "keyAlias": "", "keyPassword": "", "profile": "b", "signAlg": "", "storeFile": "" } }, { "name": "useForRelease", "type": "HarmonyOS", "material": { "certpath": "", "storePassword": "", "keyAlias": "", "keyPassword": "", "profile": "b", "signAlg": "", "storeFile": "" } }, { "name": "useForDebug", "type": "HarmonyOS", "material": { "certpath": "", "storePassword": "", "keyAlias": "", "keyPassword": "", "profile": "b", "signAlg": "", "storeFile": "" } ]

2、配置

"products": [ { "name": "default", "signingConfig": "default", "compatibleSdkVersion": "5.0.0(12)", "runtimeOS": "HarmonyOS", }, { "name": "useForDebug", "signingConfig": "useForDebug", "compatibleSdkVersion": "5.0.0(12)", "runtimeOS": "HarmonyOS", }, { "name": "useForRelease", "signingConfig": "useForRelease", "compatibleSdkVersion": "5.0.0(12)", "runtimeOS": "HarmonyOS", } ],

右上角product按钮Product 选择useForDebug 来选择使用调试证书的hap ，选择useForRelease->apply 构建出来的APP 则使用发布证书。default 配置项勿删。

3、module中，applytoProducts 属性中增加useForDebug，useForRelease 两个参数 “modules”:

 [ { "name": "entry", "srcPath": "./entry", "targets": [ { "name": "default", "applyToProducts": [ "default", "default_debug", "default_realse" ] } ] } ]