鸿蒙开发常见错误

Iconfont 图标融合至 HarmonyOS

github.com/jyear/-ohos… www.npmjs.com/package/oho…

配置文件 项目根目录下创建

module.exports = {
    "iconURL": "https://at.alicdn.com/t/c/font_41236761_db46qb9qzg.js",
    "save_dir": "./entry/src/main/ets/components/iconfont"
}

项目根目录下执行命令

npx ohos-iconfont

注意这个是 NPM 的包，直接通过 NPX 执行

表单获取数据

错误写法

@Component
export struct Input{
  @Link @Watch('onCountUpdated') value:string;
  @Prop placeholder:string;
  type:InputType = InputType.Normal;
##handlerChangeValue(val:string){
##  console.log(val)
##    this.value = val;
##}
  onCountUpdated(val):void{
  }
  build(){
    TextInput({placeholder:this.placeholder})
      .type(this.type)
      .placeholderColor('rgb(132, 143, 172)')
      .backgroundColor(Color.Transparent)
      .border({width:1,color:'rgb(223, 232, 246)'})
      .borderRadius(8)
      .padding({left:20,right:20,top:12,bottom :12})
##    .onChange(this.handlerChangeValue)
  }
}

会报的错误是

03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Lifetime: 0.000000s
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Js-Engine: ark
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]page: pages
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Error message: Obj is not a Valid object
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Cannot get SourceMap info, dump raw stack:
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]Stacktrace:
03-18 12:25:27.094 30180-22659822 E C03900/Ace: [Engine Log]    at handlerChangeValue (entry

下面是正确的

方法一

@Component
export struct Input{
  @Link @Watch('onCountUpdated') value:string;
  @Prop placeholder:string;
  type:InputType = InputType.Normal;
  handlerChangeValue(val:string){
    console.log(val)
      this.value = val;
  }
  onCountUpdated(val):void{
  }
  build(){
    TextInput({placeholder:this.placeholder})
      .type(this.type)
      .placeholderColor('rgb(132, 143, 172)')
      .backgroundColor(Color.Transparent)
      .border({width:1,color:'rgb(223, 232, 246)'})
      .borderRadius(8)
      .padding({left:20,right:20,top:12,bottom :12})
      .onChange((val:string)=>{
        this.handlerChangeValue(val)
      })
  }
}

方法二

@Component
export struct Input{
  @Link @Watch('onCountUpdated') value:string;
  @Prop placeholder:string;
  type:InputType = InputType.Normal;
  onCountUpdated(val):void{
  }
  build(){
    TextInput({placeholder:this.placeholder})
      .type(this.type)
      .placeholderColor('rgb(132, 143, 172)')
      .backgroundColor(Color.Transparent)
      .border({width:1,color:'rgb(223, 232, 246)'})
      .borderRadius(8)
      .padding({left:20,right:20,top:12,bottom :12})
      .onChange((val:string)=>{
        this.value = val;
      })
  }
}

静态资源加载

图片等资源的加载

不可以使用$r 中间为变量的写法，而要直接将其提取出去

scroll 与 Column 结合 导致 不发生滚动问题

下面的例子中 Column添加了宽高 100%,导致的，需要将其删除

import AuthGuard from '../components/AuthGuard'
import Header from '../components/Header'
import CategoryComp from '../components/Home/Category'
import Hot from '../components/Home/GoodService'
import SwiperHome from '../components/SwiperHome'

@Entry
@Component
struct Index {
  private scrollerForScroll: Scroller = new Scroller() // 导航头

  build() {

    Stack({ alignContent: Alignment.Top }) {
      Column() {
      }
      .height(180)
      .width('100%')
      .backgroundColor($r('app.color.primary'))


      Scroll(this.scrollerForScroll) {
        Column({ space: 10 }) {
          Header()
          SwiperHome()
          AuthGuard()
          CategoryComp()
          CategoryComp()
          CategoryComp()
          CategoryComp()
        }
        .width("100%").height("100%")
        .padding({ left: 10, right: 10 })
      }
      .width("100%").height("100%")

    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.blockBackground'))
  }
}

微信小程序的 rpx 对应 HarmonyOS 中的 lpx 只不过它们要求的设计宽度不一样，但是可以改成一样

{
  "src": [
    .....
  ],
  "window": {
    "designWidth": 750
  }
}

这里把 desingwidth 改成 750 即可

最小高度，最大高度

通用属性的constraintSize可以设置这个四个属性。

Text('constraintSize')   
 .width('90%')   
 .constraintSize({   
 minWidth: 0,   
 maxWidth: 100,   
 minHeight: 0,   
 maxHeight: 100   
 })