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

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枚举说明

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" ] } ] } ] 
5、在全局配置oh-package中配置依赖的第三方应用与在模块中配置oh-package中配置的第三方应用有什么区别,对包体积会有影响吗?

第三方库依赖配置在全局中和配置在模块中是否对包体大小有影响?

全局配置oh-package中配置依赖的第三方应用是在整个项目中都可以使用的,而在模块中配置oh-package中配置的第三方应用是只在该模块中可以使用的。因此,全局配置会影响整个项目的包体积,而模块中配置只会影响该模块的包体积。

相关推荐
小满zs几秒前
React第二十章(useMemo)
前端·javascript·react.js
赵大仁2 分钟前
Tailwind CSS:现代 CSS 框架的优雅之选
前端·javascript·vue.js·前端框架·css3·html5·scss
GIS学姐嘉欣23 分钟前
25考研希望渺茫,工作 VS 二战,怎么选?
前端·学习·考研·gis
二川bro32 分钟前
图片叠加拖拽对比展示效果实现——Vue版
前端·vue.js
russle33 分钟前
android app构建时排除指定类
android·前端·chrome
愚愚是个大笨蛋38 分钟前
自定义VUE指定,实现鼠标悬停显示提示面板,离开元素或面板后面板消失
前端·javascript·vue.js
CSNMD39 分钟前
VueRouter之HelloWorld
前端·javascript·vue.js
Smileyqp沛沛40 分钟前
gz、zip等压缩文件postman成功下载但是前端项目中下载解压失败
前端·测试工具·postman
xcLeigh42 分钟前
HTML5实现好看的新年春节元旦网站源码
前端·html·html5
李游Leo44 分钟前
自学记录鸿蒙API 13:Calendar Kit日历功能从学习到实践
学习·华为·harmonyos