本文章是根据黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战
该视频真的非常适合有点了解前端的小伙伴学习，里面有很多最基础的东西。
有前端经验，react经验的小伙伴看这个视频就非常的容易理解，直接看以下的笔记，认真过一遍就可以了。
以下是我的练习仓库：
HarmonyOS-learn: 对HarmonyOS的基础学习记录 (gitee.com)
https://gitee.com/saro-d/harmonyOS-learn
后续将持续更新该视频的笔记
ArkTs
// 打印
console.log('你好，我第一次来','黑马');
// 变量
let firstDay:string = '他们吵起来了'
firstDay = '看视频吵起来的'
// 常量
const commoy:string ='这是个常量，不可修改'
// 数组
const names:string[] = ['小红','小明','笑话']
// 函数
function fn(val:number){
console.log('你好，我是函数', val)
}
fn(2)
// 箭头函数
const jianTouFn = (val:string)=>{
console.log('你好，我是箭头函数', val)
}
jianTouFn('箭头函数1')
// 对象
interface perObj{
name:string,
age:number,
statue:boolean,
sing:()=>void,
say:(val:string)=>string
}
const person:perObj = {
name:'大大',
age:18,
statue:false,
sing:() => {
console.log('唱歌了')
},
say:(val:string) => {
return val
}
}
person.sing()
console.log('对象名',person.name)
console.log('对象说话',person.say('你好'))
// 联合类型
let res:string | number |boolean = '优'
res = 100
res = false
let gender:'man'|'woman'|'no' = 'no' // 值已经被约束
// 枚举类型
enum ColorEnum{
Red='红色',
Black='黑色'
}
let sayColor:ColorEnum=ColorEnum.Red
console.log('颜色',sayColor)
ArkUI
组件：容器组件，基础组件
根组件只有一个，所以最外层需要用Column容器组件包裹
struct Index {
build() {
Column(){
Text('小说简介')
Row(){
Text('都市')
Text('言情')
Text('生活')
Text('男频')
}
}
}
}组件字体属性方法
字体颜色
struct Index {
build() {
Column(){
Text('小说简介')
.margin(10)
.fontSize(24)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Pink)
Row(){
Text('都市')
.fontSize(20)
.fontColor(Color.Green)
Text('言情')
.margin(10)
.fontColor(Color.White)
Text('生活')
.fontSize(20)
.margin(10)
.fontColor(Color.Blue)
Text('男频')
.fontColor(Color.White)
}
.margin(10)
}
.width('100%')
.backgroundColor('#afb1b3')
}
}文字溢出省略号，行高
Column(){
Text('鸿蒙开发初体验')
.width('100%')
.fontSize(24)
.fontWeight(FontWeight.Bold)
Text('文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高文字溢出省略号，行高')
.width('100%')
.textOverflow({
overflow:TextOverflow.Ellipsis
})
.maxLines(2)
.lineHeight(30)
}
图片组件使用
// 图片
Column(){
Row(){
Text('网络图片 ')
Image('https://www.itheima.com/images/logo.png')
.width(200)
}
Column(){
Image($r('app.media.Img01'))
.width(200)
.margin(20)
Row(){
Image($r('app.media.img02')).width(50) .margin(10)
Text('网络图片')
}
}
.margin(20)
.width('100%')
}
输入框和按钮
@Entry
@Component
struct inputBtn {
build() {
Column({space:20}){
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
})
.type(InputType.Password)
Button('登录')
.width(100)
}
.width(300)
}
}登录页面练习
@Entry
@Component
struct Login {
build() {
Column({space:20}){
Image($r('app.media.img02')).width(100)
Column({space:20}){
TextInput({
placeholder:'请输入用户名'
})
TextInput({
placeholder:'请输入密码'
})
.type(InputType.Password)
Button('登录')
.width('100%')
}
Row({space:20}){
Text('前往注册')
Text('忘记密码')
}
}.padding(20)
}
}Svg图标
布局元素组成
内边距
外边距
边框
练习
@Entry
@Component
struct QQLogin {
@State user:string = '大王叫我来巡山'
build() {
Column(){
Image($r('app.media.img02')).width(100).borderRadius(50)
Text(this.user).margin({
top:20,
bottom:40
})
Column({space:15}){
Button('QQ登录')
.width('100%')
Button('微信登录')
.width('100%')
.backgroundColor('#dfdfdf')
.fontColor('#1e1e1e')
}
Row({space:20}){
Text('前往注册')
Text('忘记密码')
}.margin({
top:20
})
}.padding(20)
}
} 
圆角
特殊形状圆角
背景属性
背景图
背景图位置
背景图单位
默认单位是px
背景图尺寸
线性布局
主轴对齐
交叉轴对齐
自适应伸缩
得物卡片
@Entry
@Component
struct DeWuCard {
build() {
Column(){
Image($r('app.media.img02'))
.width('100%')
.height(250)
.borderRadius({
topLeft:10,
topRight:10
})
Text('今晚吃这个 | 每日艺术分享')
.width('100%')
.padding({
top:20,
right:10,
left:10,
bottom:20
})
.fontSize(20)
.fontWeight(FontWeight.Bold)
Row(){
Image($r('app.media.img02'))
.width(25)
.margin({
right:5
})
Text('插画师分享聚集地')
.layoutWeight(1)
Image($r('app.media.img02'))
.width(25)
.margin({
right:5
})
Text('2300')
.width(40)
}
.margin(10)
}
.width(300)
.height(360)
.backgroundColor(Color.Pink)
.borderRadius(10)
}
}京东登录案例
@Entry
@Component
struct JDLogin {
build() {
Column(){
Row(){
Image($r('app.media.cancel'))
.height(20)
Text('帮助')
}
.width('100%')
.height(30)
.justifyContent(FlexAlign.SpaceBetween)
Image($r('app.media.jdlogo'))
.width(200)
.margin({
top:50,
bottom:30
})
// 表单
Row(){
Text('国家/地址')
.fontColor('#666')
.height(16)
.layoutWeight(1)
Text('中国(+86)')
.fontColor('#666')
.height(16)
Image($r('app.media.ic_arrow_right'))
.fillColor('#666')
.height(16)
}
.backgroundColor('#fff')
.width('100%')
.padding(10)
.height(40)
.borderRadius(20)
Row(){
TextInput({
placeholder:'请输入手机号'
})
.placeholderColor('#666')
.height('100%')
.padding(0)
.backgroundColor('#fff')
}
.backgroundColor('#fff')
.width('100%')
.padding(10)
.height(40)
.borderRadius(20)
.margin({top:20,bottom:20})
// 条款
Row(){
Checkbox().width(10)
Text(){
Span('我已经阅读并同意')
Span('《京东隐私政策》《京东用户协议》')
.fontColor('#3274f6')
Span('未注册的手机号将自动创建京东账号')
}
.width('100%')
.fontSize(12)
.fontColor('#666')
}
.width('100%')
.margin({right:20,bottom:25})
.alignItems(VerticalAlign.Top)
Button('登录').width('100%').backgroundColor('#bf2838')
Row({space:25}){
Text('注册新用户')
.fontSize(14)
Text('账户密码登录')
.fontSize(14)
Text('无法登录')
.fontSize(14)
}
.margin({top:15})
// 其他
Blank()
Column(){
Text('其他登录方式')
.fontSize(14)
.height(22)
.fontColor('#666')
Row(){
Image($r('app.media.jd_huawei'))
.width(34)
Image($r('app.media.jd_wechat'))
.width(34)
Image($r('app.media.jd_weibo'))
.width(34)
Image($r('app.media.jd_QQ'))
.width(34)
}
.width('100%')
.padding(28)
.justifyContent(FlexAlign.SpaceBetween)
}
.height(100)
}
.padding(20)
.width('100%')
.height('100%')
.linearGradient({
angle:135,
direction:GradientDirection.RightBottom,
colors:[[0xb6d4d5,0.0],[0xebebeb,0.3],[0xf7e9e8,0.5],[0xffffff,1.0]]
})
}
}弹性布局
例子
@Entry
@Component
struct Login {
build() {
Flex({
direction:FlexDirection.Column,
justifyContent:FlexAlign.Center,
alignItems:ItemAlign.Center
}){
Text().width(100).height(100).backgroundColor(Color.Pink).border({
width:1,
color:Color.Black })
Text().width(100).height(100).backgroundColor(Color.Pink).border({
width:1,
color:Color.Black })
Text().width(100).height(100).backgroundColor(Color.Pink).border({
width:1,
color:Color.Black })
}.width('100%').height(600).backgroundColor(Color.Green)
}
}换行
Grid布局
例子：
间隙：
角标组件Badge
绝对定位和zIndex层级
@Entry
@Component
struct JDLogin {
build() {
Column(){
Text().width(100).height(100).backgroundColor(Color.Yellow).border({
width:1,
color:Color.Black })
.position({
x:50,
y:100
})
.zIndex(-1)
}
}
}层叠布局
B站卡片案例
@Entry
@Component
struct Login {
build() {
Column(){
Column(){
Stack({alignContent:Alignment.Bottom}){
Image($r('app.media.img02')).width('100%').height('100%')
.borderRadius({topLeft:20,topRight:20})
Row(){
Row({space:5}){
Image($r('app.media.jd_wechat')).width(16)
Text('288万').fontColor(Color.White)
}.margin({right:10})
Row({space:5}){
Image($r('app.media.jd_wechat')).width(16)
Text('288万').fontColor(Color.White)
}.layoutWeight(1)
// 除了写.layoutWeight(1)，也可以写
// Blank()
Text('4:33').fontColor(Color.White)
}.width('100%').height(30).alignItems(VerticalAlign.Center).padding({right:5,left:5})
}.width(300).height(160)
// 文字
Text('【凤凰传奇新歌】欧迎来到国风统治区:唢呐一响神曲《铁衣【凤凰传奇新歌】欧迎来到国风统治区:唢呐一响神曲《铁衣')
.lineHeight(20).textOverflow({overflow:TextOverflow.Ellipsis}).maxLines(2)
.padding(10)
Row(){
Text('19万点赞').backgroundColor('#fff1f0').fontColor('#c77a60').padding(5)
Image($r('app.media.jd_wechat')).width(16).margin({right:5})
}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding(10)
}.width(300).height(270).borderRadius(20).backgroundColor(Color.White)
}.width('100%').height('100%').backgroundColor('#f6f8fa')
}
}阶段综合-支付宝首页
@Entry
@Component
struct ZfbHome {
build() {
Stack({alignContent:Alignment.Bottom}){
Stack({alignContent:Alignment.Top}){
// 顶部搜索
Row(){
Column(){
Row(){
Text('重庆').fontColor(Color.White)
Image($r('app.media.top_down')).width(20).fillColor(Color.White)
}
Text('晴 2℃').fontColor(Color.White).fontSize(14)
}.height(33).alignItems(HorizontalAlign.Start)
Row(){
Image($r('app.media.top_sousuo')).width(20)
TextInput({
placeholder:'重庆交通一卡通'
}).placeholderColor('#666').layoutWeight(1)
Text('搜索').fontColor('#4c74ef').width(55).border({ width:{left:1},color:'#e9e9e9'}).textAlign(TextAlign.Center)
}.height(33).backgroundColor(Color.White).borderRadius(10)
.margin({left:12,right:12}).padding({left:10,right:10}).layoutWeight(1)
Image($r('app.media.top_add')).width(30).fillColor(Color.White)
}.width('100%').height(60).padding({left:10,right:10})
.backgroundColor('#6681ea').zIndex(2)
// 内容
Scroll(){
Column(){
Row(){
Column(){
Image($r('app.media.head_sao')).width(28)
Text('扫一扫').fontColor(Color.White)
}
Column(){
Image($r('app.media.head_shoufukuan')).width(28)
Text('收付款').fontColor(Color.White)
}
Column(){
Image($r('app.media.head_chuxing')).width(28)
Text('出行').fontColor(Color.White)
}
Colu
最低0.47元/天 解锁文章
扫一扫
813
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
