4.1 ArkUI 方舟UI框架
巩固夯实弹性布局相关语法
父 display: flex justify-content: center align-items:center
父加display:flex 子flex1
基本结构
html head body .... ....
项目结构
h
xxxx.vue
<template><template> <script setup></script> <style lang="scss"></style>
xxxx.ets
@Entry // 路由访问 @Component // 他就是一个单独的页面 术语组件 （切记这个组件只能导出导入，不能通过路由单独访问） struct 组件名 { // 切记struct是固定格式 // 数据 // ... // 数据 build() { 这里面写布局代码 UI层 } }Column、Row 线性布局
@Entry @Component struct Index { build() { // 一、build中必须有一个根元素 // Text('学鸿蒙 找千锋1') // Text('学鸿蒙 找千锋2') // 二、Column包括的元素在垂直方向排列 // Column() { // Text('学鸿蒙 找千锋1') // Text('学鸿蒙 找千锋2') // } // 三、Row包括的元素在水平向排列 // Row() { // Text('学鸿蒙 找千锋1') // Text('学鸿蒙 找千锋2') // } // 四、子元素排列对齐方式属性 // - 主轴：子元素默认排列方向， 交叉轴垂直于主轴 // - 主轴：Column 垂直方向、Row 水平方向 // - .justifyContent() 主轴方向 // - .alignItems() 交叉轴方向 // Row() { // Text('学鸿蒙 找千锋1') // Text('学鸿蒙 找千锋2') // } // .justifyContent(FlexAlign.Center) // .alignItems(VerticalAlign.Center) } }Image
html 写标签/写属性
<img src="" width="" height="" />
arkts 写组件/写属性
Image(src: string|Resource) .width(100) .height(100) .broderRadius(10)
1 Image('互联网地址')
2 Image($r('app.media.test1'))
"requestPermissions": [ {"name": "ohos.permission.INTERNET"} ],Text
html 写标签
<span>hello</span> <div>hello</div> <h1>hello</h1>
arkts 写组件/写属性
Text(content: string) .fontSize(30) .fontColor('#000')TextInput
html 写标签
<input typet="text" placeholder="请输入内容" value="默认数据" />
arkts 写组件/写属性
TextInput( { 名字:数据, 名字:数据 } )
留心1：写的是花括号
留心2：名字:数据 多个之间逗号隔开 名字不是随便写的鸿蒙规定好了 具体有哪些后期带你看手册 今天快速入门
TextInput({placeholder?:"请输入内容", text?:"默认数据"}) .width('100%') .height(50) .backgroundColor('#000') .borderRadius(0)Button
html 写标签
<button>内容</button>
arkts 写组件/写属性
Button() { Image(图片).width() } Button(label?: ResourceStr) .width('100%') .height(50) .type(ButtonType.Normal) .onclick(() => { })知识点小结
一、简介 二、搭建开发环境 三、初探项目开发 =》 需求写京东商城商品详情页鸿蒙版 需要布局的一些语法 Column或者Row() { // 线性布局必须加宽度高度才可以设置对齐方式 Text(内容)...... Image(图片互联网地址) ets和resource同级module.json5 "requestPermissions": [ {"name": "ohos.permission.INTERNET"} ], Image(图片本地地址) $r('app.media.xxxxxx') TextInput().borderRadius(0) Button('各种按钮').type(ButtonType.Normal) } .fontSize/fontColor/fontWeight() .width/height/backgroundColor() .margin/padding/border() => .margin/padding(10) .margin({top:10,bottom:10}) => .border({ width: 1, style: BorderStyle.Dashed, color: Color.Red, }) => .border({ width: {top:2}, style: BorderStyle.Dashed, color: Color.Red, }) .其他属性()更多语法晚上手册挨个练习
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-common-components-button-V5
4.2 ArkTS 方舟编程语言
语法演变
ArkTS是HarmonyOS优选的应用高级开发语言。
ArkTS提供了声明式UI范式、状态管理支持等相应的能力，让开发者可以以更简洁、更自然的方式开发应用。
class 类名 { public 属性名:类型 = 数据 函数名() {} // .... }演变升级
@Entry 带路由的，没有这个后期只能导出使用 @Component 这是个组件 struct 组件名 { // 普通数据 public 属性名:类型 = 数据 // 响应式数据 -> 视图层build里面 this.响应式名 this.响应式名 = 数据 @State 属性名:类型 = 数据 函数名() {} // 这里面写结构、样式 build() { Text(内容) .css属性名() ... .事件类型小驼峰(处理函数 推荐写箭头函数) .onClick(() => { console.log('hello') }) } // .... }综合案例京东商品详情页收藏点击切换颜色
// # 商品详情页收藏思路 // 1 声明状态 collect 布尔类型 // 修饰符 属性名:类型 = 数据 // 2 视图判断 true黄色 false 灰色 // 3 加点击事件切换状态 @State collect:boolean = false
重点迁移说明
禁止使用对象字面量限制类型
class Data1Type { a: number = 0 b: number = 0 } // const data1: {a:number,b:number} = {a:1,b:2} const data1: Data1Type = { a: 1, b: 2 }学习问：interface和class类型限制有什么区别
回答：inteface仅仅类型限制 class可以赋值初始数据（留心class得设置默认值）
禁止使用解构赋值
// const {a,b} = {a:1,b:2} const obj = {a:1,b:2} const a = obj.a const b = obj.b禁用call、apply
function fn() { } fn.apply()禁止使用索引访问
interface ObjType { a:number b:number // [k:string]:number } const data: ObjType = { a:11, b:22 } console.log(data['a'])欢迎加入课程班级，考取鸿蒙认证：
https://developer.huawei.com/consumer/cn/training/classDetail/d43582bb30b34f548c16c127cb3be104?type=1?ha_source=hmosclass&ha_sourceId=89000248
