双非大学生自学鸿蒙5.0零基础入门到项目实战 -《基础篇》

• 个人首页： VON

• 鸿蒙系列专栏： 鸿蒙开发小型案例总结

• 综合案例 ：鸿蒙综合案例开发

• 鸿蒙6.0：从0开始的开源鸿蒙6.0.0

• 文章所属专栏：鸿蒙5.0零基础入门到项目实战

前言

今天开始5.0的学习，想系统的去学习一下5.0，这几天调研了一下网上的教程，还是感觉黑马的教程比较好，真正实现了从0到1，虽然说ai比较好用，但我感觉还是要系统的去学一下5.0，同时开始入驻各种鸿蒙相关的社区，真正意义上开启从0开始的鸿蒙之路，这次是5.0版本的从0开始。本次专栏是以0基础开始的学习记录，感兴趣的双非大学生们随时可以学习

黑马程序员教程

大家学习的时候可以和我一样做一个时间表，可以直观的看出自己学多长时间

实践

我这里使用的是API17，如果有想一起学习的朋友们可以和我对标一下版本，软件的安装我就不详细去说明了，希望大家可以顺利打开自己的Hello World

1、基础配置

可以先设置一下我们的背景图

这里的透明度设置为15即可

成品展示

2、基础入门

项目的基础架构如下图
这些是项目自动生成的代码，我们可以改造下，将不必要的都删掉就行了

3、变量和类型

概念

基础数据类型还是我们常用的几个，命名格式和ts一样

测试

来验证一下这三种类型

4、数组

概念

这里也和其他语言类似

测试

我这里测试的是字符串类型，当然其他类型也是大同小异，用于保存同类型的变量

5、对象

概念

对象：一次存储多个不同类型的数据，和数组最大的区别就是存储类型的多样

测试

我这里就以我的个人主页来测试下

6、函数

概念

函数：使用函数封装代码，提升代码的复用性

测试

7、箭头函数

概念

测试

其实箭头函数和普通函数在计算这些简单问题的时候并看不出什么显著区别，下面是一些简单的区分

ArkTS 中箭头函数与普通函数的区别
性能差异：箭头函数通常更轻量（无原型链），但在高频创建场景中可能产生更多内存占用（每个实例持有一个新函数）。普通函数在原型上共享，适合需要复用的场景。
使用场景建议

• 需要词法 this 时选择箭头函数（如事件处理器）
• 需要动态 this 或构造函数时选择普通函数
• 短回调函数优先使用箭头函数提升可读性

前七节代码总览

// string : 字符串
let name : string = "VON"
console.log('文章的作者是：',name);// number : 数字类型
let count : number = 3319
console.log('粉丝数：',count)// boolean : 布尔型
let isStu : boolean = true
console.log('是大学生吗？',isStu)// 数组
let title : string[] = ["下标0","下标1","下标2","下标3"]
console.log("数组：", title)
console.log("下标0", title[0])
console.log("下标0", title[1])
console.log("下标0", title[2])// 对象
// 接口
interface CSDN {name : string,VisitNum : number,FansNum : number
}
// 自定义对象
let VON : CSDN = {name : "VON",VisitNum : 202734,FansNum : 3319
}
console.log("作者：",VON )
console.log("作者名字：",VON.name)
console.log("作者浏览量：",VON.VisitNum)
console.log("作者粉丝数：",VON.FansNum)// 函数
function salary(base:number,Performance:number,Businesstrip:number) {return base+Performance+Businesstrip
}let s1 : number = salary(1000,2000,3000)
console.log("工资：", s1)let s2 : number = salary(10000,20000,30000)
console.log("工资：", s2)// 箭头函数
let Perimeters = (r : number) => {return 2*3.14*r
}console.log("圆周长：",Perimeters(5))
console.log("圆周长：",Perimeters(10))
console.log("圆周长：",Perimeters(15))

8、组件基础语法

概念

测试

这里的基础组件有Column和Row，分别是竖、横排列

这里为了让大家看的更加直观，我用汉字来代替

9、通用属性

概念

测试

可以看到基础属性可以给Text也可以给Row

这里的颜色是枚举值，可以直接通过“.”来使用

10、文本属性

概念

测试

这里的文字属性其实还有很多，大家可以进行自己探索

这里看到有个课后小练习，带着大家去实现下

代码

@Entry
@Component
struct Index {build() {Column(){Text("在千年侗寨，感受乡村全面振兴的力量").fontSize(18).width("100%")Text("新华社新闻").fontSize(14).fontColor("#999").width("100%")Text("持续扩大对象开放").fontSize(18).width("100%")Text("央视新闻").fontSize(14).fontColor("#999").width("100%")}}
}

11、图像组件

概念

测试

这里注意下图片的存放路径，网络图片直接用链接就行

代码

@Entry
@Component
struct Index {build() {Column(){// 本地图片Image($r('app.media.my')).width(200)// 网络图片Image('https://i-blog.csdnimg.cn/direct/40600f6661f84f589abdb9c1add2266c.png#pic_center').width(200)}}
}

12、内外边距

概念

测试

应该可以看出来这里的内外边距吧

代码

@Entry
@Component
struct Index {build() {Column(){Button('登录').width('100%')Button('注册').width('100%').backgroundColor(Color.Red).margin({top:10,bottom:20})}.backgroundColor(Color.Gray).padding({left:10,bottom:20,top:30,right:40})}
}

13、border属性

概念

测试

代码

@Entry
@Component
struct Index {build() {Column() {Text('+ 状态').width(100).height(60).backgroundColor(Color.Blue).textAlign(TextAlign.Center).border({width:5, // 边框宽度color:Color.Brown, // 边框颜色style:BorderStyle.Dashed, // 边框类型radius:20 // 圆角})}}
}

总结

黑马的基础课果然是0基础的课程，完全不需要任何的语言基础，一口气看到了案例那里，感觉没有什么难度，如果大家想0基础学习的话推荐黑马的课程，其实现在也是很迷茫，不知道到底学哪个语言，就先学着基础语法吧，先过一遍基础语法，主要还是后期整体大项目的学习，这些基础就快速过一遍了。