鸿蒙开发笔记

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

原视频地址：黑马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 = 30build() {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 = 30build() {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 = 30build() {Row() {Column() {Button("+").onClick(() => {this.w += 10})Button("-").onClick(() => {this.w -= 10})}.width('100%')}.height('100%')}
}

Slider

代码案例

@Entry
@Component
struct Index {@State w: number = 30build() {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 = 30build() {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}
}

效果如下