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

鸿蒙开发笔记

article 2024/9/21 1:59:42

最近比较火，本身也是做前端的，就抽空学习了下。对前端很友好

原视频地址：黑马b站鸿蒙OS视频

下载安装跟着视频或者文档就可以了。如果你电脑上安装的有node，但是开发工具显示你没安装，不用动咱们的node，直接在开发工具里面点下载安装就行了

测试是否都安装成功，点击help，让后点击第一个，会弹出开发环境是否完整的测试

如果都是对号，则环境没有问题，如果有❌，后面下载对应的即可

设置汉化，跟idea是一样的，安装插件即可，找到setting，点击会弹出面板

在面板中找到plugin,搜索Chinese,然后勾选，点击应用，再点击确定，会弹出让你重进的选项，点击即可

首页

@Entry // 标记当前组件是入口组件
@Component // 标记是自定义组件
struct Index { // 自定义组件：可复用的UI单元
  @State w: number = 100 // @State用来修饰变量，值发生变化会触发ui刷新

  build() { // UI描述：内部以声明方式描述UI结构
    Row() { // 内置组件：布局类，用来控制行
      Column() { // 内置组件：布局类，用来控制列
        Text("你好 鸿蒙") // 内置组件：文本
          .fontColor("#f00") // 样式修改
          .fontWeight(600)
      }
      .width('100%')
    }
    .height('100%')
  }
}

点右面的预览器即可查看效果

组件使用

Image

代码案例

@Entry
@Component
struct Index {
  @State w: number = 30
  @State h: number = 30

  build() {
    Row() {
      Column() {
        Image($r('app.media.icon'))
          .width(this.w)
          .height(this.h)
          .interpolation(ImageInterpolation.High) // 防锯齿
      }
      .width('100%')
    }
    .height('100%')
  }
}

注意：如果我们使用网络照片，就需要开通网络设置。就需要在module.json5文件中配置网络权限

附官网链接：访问控制授权申请

只需要在module.json5文件中加上配置即可

"requestPermissions":[
      {
        "name": "ohos.permission.INTERNET"
      }
    ],

Text

上面的base文件夹中的element文件夹里的string.json文件中，存放的就是后备的内容。如果地区都匹配不上，则就会使用这个里面的
如果能正常匹配到地区，则就会使用匹配到地区里的string.json中声明的内容。

Text中如果使用本地资源，那么就可以做国际化了

例如我们在en_US文件夹中的string.json中写入一个键值对

爆红是因为在默认的里面没有配置对应的键值对

我们在base>>element>>string.json中配置对应的键值对

提示没有在zh_CN>>element>>string.json中配置。我们接着配置

都配置完后，就发现不报红了

然后Text就可以使用本地资源了

页面效果

可以看到内容显示了出来。我们再切换一下美国地区

可以看到，显示的就是en_US中我们配置的内容。用这个来实现国际化，方便了很多

TextInput

就是html中的input

代码案例

@Entry
@Component
struct Index {
  @State w: number = 30

  build() {
    Row() {
      Column() {
        Text($r('app.string.width_label'))
          .fontSize(12)
        TextInput({ placeholder: '请输入图片宽度' })
          .width(200)
          .onChange(val => { // 事件，每次输入值都会触发
            this.w = +val // 通过 加 运算符把字符型转为数字型
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Button

代码案例

@Entry
@Component
struct Index {
  @State w: number = 30

  build() {
    Row() {
      Column() {
        Button("+")
          .onClick(() => {
            this.w += 10
          })
        Button("-")
          .onClick(() => {
            this.w -= 10
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

Slider

代码案例

@Entry
@Component
struct Index {
  @State w: number = 30

  build() {
    Row() {
      Column() {
        // 图片
        Image($r('app.media.icon'))
          .width(this.w)
          .interpolation(ImageInterpolation.High) // 防锯齿

        // 文本
        Text($r('app.string.width_label'))
          .fontSize(12)
        TextInput({ placeholder: '请输入图片宽度' })
          .width(200)
          .onChange(val => { // 事件，每次输入值都会触发
            this.w = +val // 通过 加 运算符把字符型转为数字型
          })

        // 按钮
        Button("+")
          .onClick(() => {
            this.w += 10
          })
        Button("-")
          .onClick(() => {
            this.w -= 10
          })

        // 滑块
        Slider({
          min: 0,
          max: 200,
          value: this.w,
          step: 20
        }).width('90%')
          .showTips(true)
          .onChange(val => {
            this.w = +val
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

布局

布局分为行和列，分别对应 Row 和 Column 。行和列都有自己的主轴和测轴(也就是交叉轴)

格式：

Row({ space: xx }) { // ... } // 行

Column({ space: xx }) { // ... } // 列

对齐方式

主轴和测轴都有对齐方式，具体的对齐方式跟flex布局的大差不差

主轴对齐方式

justifyContent(FlexAlign.具体的对齐方式) // Row和Column都一样

测轴对齐方式

alignItems(VerticalAlign.具体的对齐方式) // 这个是Row的

alignItems(HorizontalAlign.具体的对齐方式) // 这个是Column的

案例代码

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column({ space: 20 }) {
        Text("item1")
        Text("item2")
        Text("item3")
        Text("item4")
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Center)
      .alignItems(HorizontalAlign.Center)
    }
    .height('100%')
  }
}

对齐方式图解

主轴（justifyContent）对齐方式（默认start）

行（Row）和列（Column）的主轴都是用的 justifyContent

测轴对齐方式（默认center）

行（Row）的测轴都是用的 VerticalAlign
列（Column）的测轴都是用的 HorizontalAlign

了解基本的布局之后，我们就可以对上面的代码进行改造，让其变的更好看一点

@Entry
@Component
struct Index {
  @State w: number = 30

  build() {
    Row() {
      Column() {
        // 2. 让图片处于一个容器中，不然放大或者缩小都会影响下面的元素
        Row() {
          Image($r('app.media.icon'))
            .width(this.w)
            .interpolation(ImageInterpolation.High) // 防锯齿
        }.width(300)
        .height(300)
        .backgroundColor('#ccc') // 方便看清区域
        .justifyContent(FlexAlign.Center) // 只需要设置主轴即可，测轴默认就是center

        // 3. 让文本和输入框处于一行，且有个上下的外边距
        Row() {
          Text($r('app.string.width_label'))
            .fontSize(12)
          TextInput({ placeholder: '请输入图片宽度', text: this.w + '' })
            .width(200)
            .onChange(val => { // 事件，每次输入值都会触发
              if(+val <= 2000) {
                this.w = +val // 通过 加 运算符把字符型转为数字型
              } else {
                this.w = 200
              }
            })
        }.width('100%')
        .justifyContent(FlexAlign.SpaceAround) // 设置主轴对齐方式
        .margin(10) // 设置外边距

        // 4. 让两个按钮处于一行
        Row() {
          Button("+")
            .onClick(() => {
              this.w += 10
            })
          Button("-")
            .onClick(() => {
              this.w -= 10
            })
        }.width('100%')
        .justifyContent(FlexAlign.SpaceEvenly)
        .margin('0 0 10 0')

        // 滑块
        Slider({
          min: 0,
          max: 200,
          value: this.w,
          step: 20
        }).width('90%')
          .showTips(true)
          .onChange(val => {
            this.w = +val
          })
      }
      .width('100%')
    }
    .height('100%')
    .alignItems(VerticalAlign.Top) // 1. 行需要顶格，设置测轴对齐方式为Top
  }
}

效果如下