网络图片
Image（‘https：//............）
本地图片
你要把图片放在指定的目录里
main---->resources---->base---->media
Image($r('app.media.product))

6）给容器之间加间隔，可以下面这样写，这也是与html不一样的地方，方便了很多

如何调整组件之间的距离？
给外层容器组件加 { space: 数字 }Column({space:20}){
Text()
Button()
}
这样text和button就会有20px的间隔

7）圆角，正圆和胶囊

  Column() {// 1. 正圆 （头像）Image($r('app.media.cat')).width(100).height(100).borderRadius(50)// 2. 胶囊按钮 (左右半圆)Text('今天还没打卡呦~').width(240).height(60).borderRadius(30).backgroundColor(Color.Pink).margin({ top: 20 })}.padding(20)

8）背景多了一些新的东西

 // backgroundImagePosition// 1. 传入对象, 设置位置坐标，背景图片的左顶点//    { x: 坐标值, y: 坐标值 }//    注意：坐标值的单位，和宽高的默认单位不同的，显示出来大小会不同//// 2. Alignment 枚举，设置一些特殊的位置（中央、左顶点...）//    Center  TopStart左顶点 TopEnd右顶点 BottomEnd右下...Text().width(300).height(200).backgroundColor(Color.Pink).backgroundImage($r('app.media.flower')).backgroundImagePosition({x: 400,y: 300}).backgroundImagePosition(Alignment.BottomEnd)}.padding(20)

9）这里引出来一个新的单位，不是px，是vp
px转换为vp的方法vp2px

 Text().width('300vp').height('200vp').backgroundColor(Color.Pink).backgroundImage($r('app.media.flower')).backgroundImagePosition({x: vp2px(150),y: vp2px(100)})}.padding(20)

10）主轴对齐方式（column和row都可以为主轴），这里和flex差不多，它这里面也还可以引入flex，grid

    Column() {Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 }).margin(5)Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 }).margin(5)Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })}.width('100%').height('100%').backgroundColor('#ccc')// 设置排布主方向的对齐方式（主轴）// 1. Start  （排布主方向）主轴起始位置对齐// 2. Center  主轴居中对齐// 3. End     主轴结束位置对齐// 4. SpaceBetween 贴边显示，中间的元素均匀分布间隙// 5. SpaceAround 间隙环绕  0.5  1  1  1  0.5 的间隙分布，靠边只有一半的间隙// 6. SpaceEvenly 间隙均匀环绕，靠边也是完整的一份间隙// justifyContent(枚举FlexAlign)  ctrl+p  cmd+p// .justifyContent(FlexAlign.Center)// .justifyContent(FlexAlign.SpaceBetween)// .justifyContent(FlexAlign.SpaceAround).justifyContent(FlexAlign.SpaceEvenly)

11）交叉轴对齐方式

build() {// Column 交叉轴的对齐方式（水平往右）// alignItems(HorizontalAlign.Start)  Center EndColumn() {Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 }).margin({ top: 5, bottom: 5 })Text().width(200).height(100).backgroundColor(Color.Pink).border({ width: 2 })}.alignItems(HorizontalAlign.End).width('100%').height('100%').backgroundColor('#ccc')

12）layoutWeight 自适应伸缩: 按照[份数权重]，分配[剩余空间]

    Column() {// layoutWeight 自适应伸缩: 按照[份数权重]，分配[剩余空间]Row() {Text('左侧').layoutWeight(1).height(40).backgroundColor(Color.Pink)Text('右侧固定').width(80).height(40).backgroundColor(Color.Orange)}.width(300).height(40).backgroundColor('#fff')Row() {Text('老大').layoutWeight(1).height(40).backgroundColor(Color.Gray)Text('老二').layoutWeight(2).height(40).backgroundColor(Color.Orange)Text('老三').layoutWeight(3).height(40).backgroundColor(Color.Pink)Text('小宝').width(50).height(40).backgroundColor(Color.Brown)}.width(300).height(40).backgroundColor('#fff').margin({ top: 30 })}.padding(10).width('100%').height('100%').backgroundColor('#ccc')

13）flex

  // Flex默认主轴水平往右，交叉轴垂直往下 → Row// 1. 主轴方向//    direction: FlexDirection.Row / Column// 2. 主轴对齐方式//    justifyContent: FlexAlign.SpaceAround// 3. 交叉轴对齐方式//    alignItems: ItemAlign.Stretch / Start / Center / End// 单行或者单列的情况，优先还是使用线性布局（本质基于Flex设计的，且还做了性能优化）// Flex布局：伸缩布局。当子盒子的总和溢出父盒子，默认进行压缩显示。// 4. 换行 wrap//    FlexWrap.Wrap 换行//    FlexWrap.NoWrap 不换行Flex({wrap: FlexWrap.Wrap}) {Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })Text().width(80).height(80).backgroundColor(Color.Pink).border({ width: 1, color: Color.Blue })}.width(300).height(300).backgroundColor('#5f9a5c')

14）绝对定位和zindex

   // position绝对定位：可以控制组件位置，可以实现层叠效果// 语法：// .position({//   x: 50,//   y: 50// })// 特点：// 1. 相对于父组件左顶点进行偏移（调整位置）// 2. 原本的位置不占了，且可以任意调整位置，不影响其他元素// 后面的组件明显层次更高，会盖住前面的组件// 需求：不动结构的情况下，调整组件的层级 .zIndex(数字)Column() {Text('大儿子').width(80).height(80).backgroundColor(Color.Green).zIndex(3)Text('二儿子定位').width(80).height(80).backgroundColor(Color.Yellow).position({x: 50,y: 50}).zIndex(4)Text('三儿子').width(80).height(80).backgroundColor(Color.Orange).zIndex(2)}.width(300).height(300).backgroundColor(Color.Pink)

15）层叠布局

 // 层叠布局Stack({alignContent: Alignment.Bottom}) {Text('大儿子').width(250).height(250).backgroundColor(Color.Green).zIndex(3)Text('二儿子').width(150).height(150).backgroundColor(Color.Orange).zIndex(4)Text('三儿子').width(50).height(50).backgroundColor(Color.Yellow).zIndex(5)}.width(300).height(600).backgroundColor(Color.Pink)

下面是前端的一个综合示例：B站-视频卡片

@Entry
@Component
struct Index {build() {Column() {// b站视频卡片Column() {// 1. 上面图片区域（层叠布局）Stack({ alignContent: Alignment.Bottom }) {Image($r('app.media.bz_img')).borderRadius({topLeft: 10,topRight: 10})Row() {Row({ space: 5 }){Image($r('app.media.bz_play')).width(14).fillColor(Color.White)Text('288万').fontSize(12).fontColor(Color.White)}.margin({ right: 10 })Row({ space: 5 }){Image($r('app.media.bz_msg')).width(14).fillColor(Color.White)Text('8655').fontSize(12).fontColor(Color.White)}Blank()Text('4:33').fontSize(12).fontColor(Color.White)}.height(24).padding({ left: 5, right: 5 }).width('100%')}.width('100%').height(125)// 2. 底部文字区域Column() {Text('【凤凰传奇新歌】欢迎来到国风统治区：唢呐一响神曲《铁衣流派推广曲》').fontSize(13).lineHeight(16).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(2)Row() {Text('19万点赞').fontSize(10).fontColor('#e66c43').backgroundColor('#fef0ef').padding(5).borderRadius(2)Image($r('app.media.bz_more')).width(14)}.margin({ top: 6 }).width('100%').justifyContent(FlexAlign.SpaceBetween)}.padding(5)}.width(200).height(200).backgroundColor(Color.White).borderRadius(10).margin({ top: 10 })}.width('100%').height('100%').backgroundColor('#ccc')}
}

4.上面说了一些前端的部分，下面说一下后端部分

1）字符串拼接+模板字符串的用法

用``还有${}
// let hobby: string = '打拳'
// console.log('简介信息', `姓名: ${name}, 年纪: ${age}岁, 爱好: ${hobby}`)

2)一些js的基础知识

1）数字转字符串
// 将数字转字符串, toString()  toFixed()
// 1. 数据.toString() 原样转字符串
console.log('toString:', money.toString())// 2. 数据.toFixed(保留几位小数)  四舍五入
console.log('toFixed:', money.toFixed())
console.log('toFixed:', money.toFixed(2))
2）点击事件还是onclickText('我是文本').onClick(() => {// 弹个框AlertDialog.show({message: '你好~ 我是文本组件'})})

3）鸿蒙多了一个状态变量

普通变量：只能在初始化时渲染，后续将不会再刷新。
状态变量：需要装饰器装饰，改变会引起 UI 的渲染刷新 （必须设置 类型 和 初始值）
struct Index {// 组件内的[普通变量] this.xxxmyAge: number = 18// 组件内的[状态变量] this.xxx@State myMsg: string = 'hello 黑马'build() {Column() {Text(myName).onClick(() => {myName = '貂蝉'console.log('myName', myName)})Text(this.myAge.toString()).onClick(() => {this.myAge = 200console.log('myAge', this.myAge)})Text(this.myMsg).onClick(() => {this.myMsg = '你好 状态'})}}
}

简单后端的例子：抽卡

// 定义接口 (每个列表项的数据结构)
interface ImageCount {url: stringcount: number
}// 0 1 2 3 4 5
// [0,1) * 6  =>  [0,6)
// 求随机数: Math.random
// 向下取整: Math.floor
// console.log('随机数', Math.floor(Math.random() * 6))@Entry
@Component
struct Index {// 随机的生肖卡序号 0-5@State randomIndex: number = -1 // 表示还没开始抽// 基于接口, 准备数据@State images: ImageCount[] = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]// 控制遮罩的显隐@State maskOpacity: number = 0 // 透明度@State maskZIndex: number = -1 // 显示层级// 控制图片的缩放@State maskImgX: number = 0 // 水平缩放比@State maskImgY: number = 0 // 垂直缩放比// 控制中大奖遮罩的显隐@State isGet: boolean = false@State arr: string[] = ['pg', 'hw', 'xm'] // 奖池@State prize: string = '' // 默认没中奖build() {Stack() {// 初始化的布局结构Column() {Grid() {ForEach(this.images, (item: ImageCount, index: number) => {GridItem() {Badge({count: item.count,position: BadgePosition.RightTop,style: {fontSize: 14,badgeSize: 20,badgeColor: '#fa2a2d'}}) {Image($r(item.url)).width(80)}}})}.columnsTemplate('1fr 1fr 1fr').rowsTemplate('1fr 1fr').width('100%').height(300).margin({ top: 100 })Button('立即抽卡').width(200).backgroundColor('#ed5b8c').margin({ top: 50 }).onClick(() => {// 点击时, 修改遮罩参数, 让遮罩显示this.maskOpacity = 1this.maskZIndex = 99// 点击时, 图片需要缩放this.maskImgX = 1this.maskImgY = 1// 计算随机数 Math.random()  [0,1) * (n + 1)this.randomIndex = Math.floor(Math.random() * 6)})}.width('100%').height('100%')// 抽卡遮罩层 (弹层)Column({ space: 30 }) {Text('获得生肖卡').fontColor('#f5ebcf').fontSize(25).fontWeight(FontWeight.Bold)Image($r(`app.media.img_0${this.randomIndex}`)).width(200)// 控制元素的缩放.scale({x: this.maskImgX,y: this.maskImgY}).animation({duration: 500})Button('开心收下').width(200).height(50).backgroundColor(Color.Transparent).border({ width: 2, color: '#fff9e0' }).onClick(() => {// 控制弹层显隐this.maskOpacity = 0this.maskZIndex = -1// 图像重置缩放比为 0this.maskImgX = 0this.maskImgY = 0// 开心收下, 对象数组的情况需要更新, 需要修改替换整个对象// this.images[this.randomIndex].count++this.images[this.randomIndex] = {url: `app.media.img_0${this.randomIndex}`,count: this.images[this.randomIndex].count + 1}// 每次收完卡片, 需要进行简单的检索, 判断是否集齐// 需求: 判断数组项的count, 是否都大于0, 只要有一个等于0,就意味着没集齐let flag: boolean = true // 假设集齐// 验证是否集齐for (let item of this.images) {if (item.count == 0) {flag = false // 没集齐break // 后面的没必要判断了}}this.isGet = flag// 判断是否中奖了, 如果是 需要抽奖if (flag) {let randomIndex: number = Math.floor(Math.random() * 3)this.prize = this.arr[randomIndex]}})}.justifyContent(FlexAlign.Center).width('100%').height('100%')// 颜色十六进制色值,如果是八位,前两位,就是透明度.backgroundColor('#cc000000')// 设置透明度.opacity(this.maskOpacity).zIndex(this.maskZIndex)// 动画 animation, 当我们元素有状态的改变,可以添加animation做动画.animation({duration: 200})// 抽大奖的遮罩层if (this.isGet) {Column({ space: 30 }) {Text('恭喜获得手机一部').fontColor('#f5ebcf').fontSize(25).fontWeight(700)Image($r(`app.media.${this.prize}`)).width(300)Button('再来一次').width(200).height(50).backgroundColor(Color.Transparent).border({ width: 2, color: '#fff9e0' }).onClick(() => {this.isGet = falsethis.prize = ''this.images = [{ url: 'app.media.bg_00', count: 0 },{ url: 'app.media.bg_01', count: 0 },{ url: 'app.media.bg_02', count: 0 },{ url: 'app.media.bg_03', count: 0 },{ url: 'app.media.bg_04', count: 0 },{ url: 'app.media.bg_05', count: 0 }]})}.justifyContent(FlexAlign.Center).width('100%').height('100%').backgroundColor('#cc000000')}}}
}

5.轮播swiper组件

最简单的例子Column() {// Swiper 轮播组件的基本使用// 1. Swiper 包内容// 2. Swiper 设尺寸Swiper() {Text('1').backgroundColor(Color.Orange)Text('2').backgroundColor(Color.Yellow)Text('3').backgroundColor(Color.Brown)}.width('100%').height(100)Swiper() {Image($r('app.media.ic_swiper_xmyp01'))Image($r('app.media.ic_swiper_xmyp02'))Image($r('app.media.ic_swiper_xmyp03'))Image($r('app.media.ic_swiper_xmyp04'))}.width('100%').height(150)}
常见属性.loop(true) // 开启循环.autoPlay(true) // 自动播放.interval(5000) // 自动播放间隔.vertical(true) // 纵向
// 定制小圆点// .indicator(false).indicator(Indicator.dot().itemWidth(20).itemHeight(20).color(Color.Black).selectedItemWidth(25).selectedItemHeight(25).selectedColor(Color.White))
完整代码
@Entry
@Component
struct Index {build() {Column() {// 1. Swiper轮播容器 (填入内容)Swiper() {Image($r('app.media.1')).objectFit(ImageFit.Cover)Image($r('app.media.2')).objectFit(ImageFit.Cover)Image($r('app.media.3')).objectFit(ImageFit.Cover)Image($r('app.media.4')).objectFit(ImageFit.Cover)Image($r('app.media.5')).objectFit(ImageFit.Cover)}// 2. 设置尺寸.width('100%').height('100%')// 3. 定制方向和小圆点.vertical(true) // 纵向轮播.indicator(Indicator.dot() // 小圆点样式.color(Color.White).selectedColor(Color.Orange))}}
}

6.@Extend-扩展组件(样式,事件)

@Extend(Text)
function textExtend(color: ResourceColor, txt: string) {
.textAlign(TextAlign.Center)
.backgroundColor(color)
.fontColor(Color.White)
.fontSize(30)
.onClick(() => {
AlertDialog.show({
message: txt
})
})
}
Text('1')
.textExtend(Color.Red, '轮播图1')

7.@Styles: 抽取通用属性、事件

// 1. 全局定义
@Styles function commonStyles() {
.width(100)
.height(100)
.onClick(()=>{ })
}
@Component
struct FancyDemo {
// 2. 在组件内定义@Styles setBg() {
.backgroundColor(this.Color)
}
builder(){
Text().commonStyles()
.setBg()
}
}

8.@Builder：自定义构建函数（结构、样式、事件）

类似于vue里面的混入（Mixins）

// 全局 Builder
@Builder
function navItem(icon: ResourceStr, txt: string) {Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: '点了' + txt})})
}@Entry
@Component
struct BuilderDemo {@State message: string = '@Builder';@BuildernavItem(icon: ResourceStr, txt: string) {Column({ space: 10 }) {Image(icon).width('80%')Text(txt)}.width('25%').onClick(() => {AlertDialog.show({message: '点了' + txt + this.message})})}build() {Column({ space: 20 }) {Text(this.message).fontSize(30)Row() {Row() {navItem($r('app.media.ic_reuse_01'), '阿里拍卖')navItem($r('app.media.ic_reuse_02'), '菜鸟')this.navItem($r('app.media.ic_reuse_03'), '巴巴农场')this.navItem($r('app.media.ic_reuse_04'), '阿里药房')}}}.width('100%').height('100%')}}

9.滚动容器 Scroll

@Entry
@Component
struct Index {build() {Column() {// 如果希望内容溢出, 能够滚动Scroll() {Column({ space: 10 }) {ForEach(Array.from({ length: 10 }), (item: string, index) => {Text('测试文本' + (index + 1)).width('100%').height(100).textAlign(TextAlign.Center).backgroundColor(Color.Orange).fontSize(20).fontColor(Color.White).borderRadius(10)})}.padding(10).width('100%')}.width('100%').height(400).scrollable(ScrollDirection.Vertical) // 设置滚动方向.scrollBar(BarState.Auto) // On一直显示 Off一直隐藏 Auto滑动显示.scrollBarColor(Color.Blue) // 滚动条颜色.scrollBarWidth(5) // 滚动条宽度.edgeEffect(EdgeEffect.Spring) // 滑动效果}}
}

10.容器组件 Tabs

@Entry
@Component
struct Index {build() {Tabs({ barPosition: BarPosition.Start }) {TabContent() {Text('首页内容') // 有且只能一个子组件}.tabBar('首页') // 配置导航TabContent() {Text('推荐内容') // 有且只能一个子组件}.tabBar('推荐')TabContent() {Text('发现内容') // 有且只能一个子组件}.tabBar('发现')TabContent() {Text('我的内容') // 有且只能一个子组件}.tabBar('我的')}.vertical(false) // 调整导航水平或垂直.scrollable(false) // 是否开启手势滑动.animationDuration(0) // 点击滑动的动画时间}
}@Entry
@Component
struct Index {titles: string[] = ['首页','关注','热门','军事','体育','八卦','数码','财经','美食','旅行']build() {// 生成10个面板 → 10个小导航Tabs() {ForEach(this.titles, (item: string, index) => {TabContent() {Text(`${item}内容`)}.tabBar(item)})}// barMode属性, 可以实现滚动导航栏.barMode(BarMode.Scrollable)}
}