鸿蒙实训笔记

第一天

 #初始化一个新的NPM项目(根据提示操作)

npm init

#安装TSC、TSLint和NodeJS的类型声明

npm install -s typescript tslint @types/node

在根目录中新建一个名为tsconfig.json的文件，然后在代码编辑器中打开，写入下述内容：

{
  "compilerOptions": {
    "target": "es2016",     // 检查无效代码时尽量严格。该选项强制所有代码都正确声明了类型。
    "module": "commonjs",   // TSC把代码编译成哪个模块系统(CommonJS、SystemJS、ES2015等)
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,         // 检查无效代码时尽量严格。该选项强制所有代码都正确声明了类型。
    "skipLibCheck": true,
    "outDir": "dist"        // TSC把生成的JavaScript代码放在哪个文件夹中
  },
  "include": [
    // TSC在哪个文件夹中寻找TypeScript文件
    "src"
  ]
}

终端输入tsc(把ts文件编译成js文件)，dist文件夹下出现xx.js文件，然后输入node .\dist\xx.js，输出xx.js的结果

alt + insert  快捷键

第二天

alt + 左键 

进入所选中的代码里面查看具体信息。

column和row

column和row决定组件是垂直还是水平放置

width和height

@Entry
@Component  //装饰器
//@Component表示自定义组件，@Entry表示该自定义组件为入口组件，@State表示组件中的状态变量，状态变量变化会触发UI刷新。
struct Index
{
  @State message: string = 'Hello'
  @State num:number = 0

  build()  //定义和描述组件UI结构的核心
  {
    Column()
    {
      Text(this.message + `${this.num}`) //反单引号才有用
        .width("400%")
        .height(100)
      Text(`${this.message} ${this.num}`)
        .width(100)
        .height(100);

      //边距
      //内边距padding，外边距margin
      Text("padding")
        .border({width:2})
        .padding({top:50,left:40,bottom:100,right:30})
      //.padding(20)  上下左右都是20
      Text("margin")
        .margin({top:100})
        .margin({top:10,right:50,bottom:50,left:10})

      //背景色
      Text("backgroundcolor")
        .backgroundColor(Color.Blue)
        .backgroundColor('#ff38925c')
      //.backgroundColor('#')

      //边框
      Text("边框")
        .borderWidth(5)
        .borderStyle(BorderStyle.Dotted)
          //边框半径
        .borderRadius(200)
          //单独设置某个方向的
        .borderColor({top:Color.Red})
        .borderWidth({bottom:1})

      Button("click me")
        .onClick(()=>
        {
          this.message = "hello"
          this.num++
        })
    }
  }
}

width(0) 没有

width(10)只有中间的一小竖条存放信息

width(50)可以把hello显示在一行里，居中

width(100)起始位置稍微往左移了一些

width(400)部分已经离开屏幕看不见了

width("100%")  顶格

height(0)没有

height(10)Hello只显示上半部分

height(20)Hello可以全部显示

height(x)(x >= 20)应该是距离上下边界都x距离

height("100%")  整个屏幕都只显示这个元素

width的百分比参数会影响其他所有元素的位置

@Entry
@Component
struct caogao
{
  @State message: string = 'Hello'
  @State num:number = 0
  build()
  {
    Column()
    {
      Text(`${this.message} ${this.num}`)
        .width(100)
    }
  }
}

写最简洁的代码，width(60)就可以全部显现，之后不断加参数，一点变化也没有，和上述代码得出结论完全不同。并且还始终顶格，上述代码居中

加点东西

Column()
    {
      Text(`${this.message} ${this.num}`)
        .width(50)
      Text(this.message + `${this.num}`) //反单引号才有用
        .width("100%")
        .height(100)
    }

上面的Text居中，下面的Text顶格

把新加的Text去掉，上面的Text就变回顶格了

在column ()下，可能会喜欢让你都居中。但是单独写

Text(`${this.message} ${this.num}`)

为什么就会顶格呢？如果有其他元素的代码存在，他就会去居中，这是为什么？

暂时得出的结论：只写一个元素，都会顶格，写两个以上元素，他们会居中对齐。

padding和margin

Image组件参数

必填

src 图片的数据源,支持本地图片和网络图片

不支持跨包跨模块调用该Image组件,建议使用$r方式来管理需全局使用的图片资源。

属性

alt     加载时显示的占位图，支持本地图片
objectFit   设置图片的缩放类型。默认值: ImageFit.Cover
    ImageFit.Cover  放大图片以适应容器,可能会裁剪
    ImageFit.Contain缩放图片以适应容器,可能存在空白
    ImageFit.Fill   图片拉伸以填充容器,可能会出现失真
    ScaleDown   图片按比例缩小以适应边界,但是不会放大图片
    Auto    自适应显示
    None    不进行任何缩放操作,即使图片溢出容器也不会被裁剪或缩放
objectRepeat    设置图片的重复样式。默认值: ImageRepeat.NoRepeat
    ImageRepeat.NoRepeat    不重复图片
    ImageRepeat.X   横向重复图片
    ImageRepeat.Y   纵向重复图片
    ImageRepeat.XY  横纵重复图片
interpolation   设置图片的插值效果,即减轻低清晰度图片在放大显示的时候出现的锯齿问题，仅针对图片放大插值
    Low、Medium、High
renderMode  设置图片渲染的模式
    imageRenderMode.Original    原图渲染
    imageRenderMode.Template    只保留灰度
sourceSize  设置图片裁剪尺寸，将原始图片解码成pixelMap,指定尺寸的图片
matchTextDirection  设置图片是否跟随系统语言方向
fitOriginalSize     图片组件尺寸未设置时，是否原尺寸显示
fillColor   填充颜色，仅对svg图片生效,默认false
autoResize  对图源做resize操作，默认true
syncLoad    设置是否同步加载图片,默认false
copyOption  设置图片是否可复制，SVG图片不支持复制
colorFilter 设置图片颜色滤镜效果

事件

onComplete(({width,height,componentWidth,componentHeight}) => {})   图片成功加载时触发
onError({componentWidth,componentHeight} => {}) 图片加载出现异常时触发
onFinish(() => {})  当加载的源文件为带动效的svg图片时,当svg动效播放完成时触发

网络图片申请权限

justifycontent

width有时候也要设置，不然有可能无法实现两边分散，只能居中挨在一起