0基礎學習鴻蒙開發-HarmonyOS4

一、初識?

1. 開發工具

官網?開發-HarmonyOS NEXT鴻蒙應用開發平臺-華為開發者聯盟

2. ArkTS

二、TypeScript 基本語法

1.變量聲明

2. 條件控制

注意
在TypeScrips中·

????????空字符串·數字0、null、undefined 都坡認為是false

????????其它值則為true
if (num) {// num 非空執行
}

3. 循環迭代

4. 函數

5. 類和接口

6. 模塊化開發

三、快速入門

1. 創建項目

2. 結構信息

路由配置地址：

?3. 入門案例

@Entry
@Component
struct Index { //自定義組件  --可以復用的UI單元@State message: string = 'Hello World';build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold).fontColor('red').onClick(() => {this.message = '你好世界'})}.width('100%')}.height('100%')}
}

四、ArkUI 基礎組件

1. Image 組件

2. Text 組件

3. TextInput 文本輸框

數值轉字符串：?
????????數值.toFixed(0) --保留0位小數
字符串轉數值：? ? ? ??
????????parseInt(字符串) 

4. Button 按鈕

5. Slider 滑塊

6.?Column和Row

1）主軸?

2）交叉軸

7. 案例源碼

@Entry
@Component
struct Index { //自定義組件  --可以復用的UI單元@State message: string = 'HarmonyOS';@State imgWidth:number = 250;build() {Column() {//   圖片Row() {Image($rawfile('HarmonyOS.jpg')).width(this.imgWidth)  //默認單位 vp(虛擬像素).interpolation(ImageInterpolation.High) //處理圖片邊緣鋸齒.borderRadius(20) //邊框弧度}.width('100%').height(400).justifyContent(FlexAlign.Center)//   文本提示Row() {Text($r('app.string.width_label')).fontSize(20).fontWeight(FontWeight.Bold)// .toFixed(0) 數值轉字符串 保留0位小數TextInput({placeholder:'請輸入寬度',text:this.imgWidth.toFixed(0)}).width(250).type(InputType.Number).onChange((value:string) => {// console.log(value)// parseInt 字符轉數值this.imgWidth = parseInt(value)})}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding({left:15,right:15})// 分割線Divider().width('91%').color('red')//   按鈕Row(){Button('縮小').width(80).fontSize(20).onClick(() => {if (this.imgWidth >= 10) {this.imgWidth -= 10}})Button('放大').width(80).fontSize(20).type(ButtonType.Normal).onClick(() => {if (this.imgWidth <= 300) {this.imgWidth += 10}})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:20,bottom:20})//   滑塊Slider({min:10,max:310,value:this.imgWidth,step:10,style: SliderStyle.OutSet}).width('90%').borderColor('#36D').trackThickness(7).showTips(true).onChange((value)=> {this.imgWidth = value})}.width('100%').height('100%')}
}

8.?渲染控制

1)?ForEach

2)?if-else

9. List 列表

List({space:6}){ForEach(this.tasks,(item:Task) => {ListItem() {Row(){Text(item.name).fontSize(20).textAlign(TextAlign.Start).padding({left:10})Checkbox().select(item.finished).onChange((val)=> {// 更新當前任務狀態item.finished = val// 更新已完成任務數量// this.finishTask = this.tasks.filter(i=> i.finished).lengththis.handleTaskChange()})}.card().justifyContent(FlexAlign.SpaceBetween)}})
}
.width('100%')
.layoutWeight(1) //剩下的高度全是我的
.alignListItem(ListItemAlign.Center) //列表居中

class Item {name: stringimage: ResourceStrprice: numberdiscount: numberconstructor(name:string, image:ResourceStr, price: number , discount:number = 0) {this.name = namethis.image = imagethis.price = pricethis.discount = discount}
}@Entry
@Component
struct ItemPage {//商品數據private  items:Array<Item> = [new Item('華為mate60',$rawfile('HarmonyOS.jpg'),6999,500),new Item('華為mate60',$rawfile('HarmonyOS.jpg'),6999),new Item('華為mate60',$rawfile('HarmonyOS.jpg'),6999),new Item('華為mate60',$rawfile('HarmonyOS.jpg'),6999),new Item('華為mate60',$rawfile('HarmonyOS.jpg'),6999),new Item('華為mate60',$rawfile('HarmonyOS.jpg'),6999),new Item('華為mate60',$rawfile('HarmonyOS.jpg'),6999),]build() {Column({space:8}) {Row(){Text('商品列表').fontSize(18).fontWeight(FontWeight.Bold)}.width('100%').margin({bottom:20}).height(30)List({space:8}){ForEach(this.items,(item:Item) => {ListItem(){Row() {Column(){Image(item.image).width(100)}Column(){Row(){Text(item.name)}Column(){if (item.discount) {Row(){Text('原價：')Text(item.price.toFixed(0)).decoration({type: TextDecorationType.LineThrough})}Row(){Text('價格：')Text((item.price - item.discount).toFixed(0))}Row(){Text('折扣：')Text(item.discount.toFixed(0))}}else {Row(){Text('價格：')Text(item.price.toFixed(0))}}}}}.margin({left:10,right:10})}})}.width('100%').layoutWeight(1) }}
}

10. 自定義組件

Blank : 將容器剩余空間全部占滿

五、狀態管理

1. states 裝飾器

2. 案例：多任務統計

進度條組件：? ? ?
Progress({  value:this.finishTask,  //當前值total:this.totalTask,???//總值type:ProgressType.Ring  //樣式 --環形
})
堆疊容器:
Stack() {
? Progress(...) --盒子1
? Row() {...}? --盒子2
}
????
多選框 :
????????Checkbox(options?: CheckboxOptions)??
Checkbox().select(item.finished).onChange((val)=> {// 更新當前任務狀態item.finished = val// 更新已完成任務數量// this.finishTask = this.tasks.filter(i=> i.finished).lengththis.handleTaskChange()})
List 列表項 ListItem 劃出樣式

????????swipeAction()

swipeAction({end:this.DeleteBnt(idnex)})
@Builder DeleteBnt(index:number) {Button('刪除').backgroundColor('red').onClick( () => {this.tasks.splice(index,1)this.handleTaskChange()})
}
{ 右邊劃出：劃出之后的內容 }

案例源碼

// 案例：多任務統計
import { it } from '@ohos/hypium'
@Observed
class Task{static id:number = 1 //任務idname:string = `任務${Task.id++}` //名稱finished:boolean = false  //是否完成
}// 統一卡片樣式
@Styles function card(){.width('95%').padding(20).backgroundColor(Color.White).borderRadius(15).shadow({radius:6,color:'#1F000000',offsetX:2,offsetY:4})
}// 任務完成樣式
@Extend(Text) function finishedTask() {.decoration({type:TextDecorationType.LineThrough}).fontColor('#B1B2B1')
}@Entry
@Component
struct PropPage {// 總任務數量@State totalTask: number = 0// 已完成任務數量@State finishTask:number = 0build() {Column({space:10}) {// 1. 任務進度TaskStatistics({finishTask:this.finishTask,totalTask:this.totalTask})// 2.任務列表TaskList({finishTask: $finishTask,totalTask:$totalTask})}.width('100%').height('100%').backgroundColor('#F1F2F3')}}@Component
struct TaskStatistics {@Prop finishTask:number@Prop totalTask:numberbuild() {Row(){Text('任務進度').fontSize(30).fontWeight(FontWeight.Bold)// 堆疊容器Stack() {Progress({  // 進度條value:this.finishTask,total:this.totalTask,type:ProgressType.Ring})Row() {Text(this.finishTask.toString()).fontSize(24).fontColor('#36D')Text('/'+this.totalTask.toString()).fontSize(24)}}}.card().margin({top:20,bottom:10}).justifyContent(FlexAlign.SpaceEvenly)}
}@Component
struct TaskItem {@ObjectLink item:Task;onTaskChange: ()=> void =() => {}build() {Row() {if(this.item.finished){Text(this.item.name).finishedTask()}else{Text(this.item.name).fontSize(20).textAlign(TextAlign.Start).padding({ left: 10 })}Checkbox().select(this.item.finished).onChange((val) => {// 更新當前任務狀態this.item.finished = val// 更新已完成任務數量// this.finishTask = this.tasks.filter(i=> i.finished).lengththis.onTaskChange()})}.card().justifyContent(FlexAlign.SpaceBetween)}
}@Component
struct TaskList {// 任務數組@State tasks: Task[] = []@Link totalTask: number// 已完成任務數量@Link finishTask:number@Builder DeleteBnt(index:number) {Button('刪除').backgroundColor('red').onClick( () => {this.tasks.splice(index,1)this.handleTaskChange()})}handleTaskChange() {// 更新任務總數this.totalTask = this.tasks.length// 更新已完成任務數量this.finishTask = this.tasks.filter(i=> i.finished).length}build() {Column() {Button('新增任務').width(200).onClick(() => {// 新增任務this.tasks.push(new Task())// 更新任務總數// this.totalTask = this.tasks.lengththis.handleTaskChange()})// 3.任務列表List({ space: 6 }) {ForEach(this.tasks, (item: Task, idnex: number) => {ListItem() {TaskItem({item:item,onTaskChange: this.handleTaskChange.bind(this)})}.swipeAction({ end: this.DeleteBnt(idnex) })})}.width('100%').layoutWeight(1).alignListItem(ListItemAlign.Center) //列表居中}}}

3. @Prop @Link @Provide @Consume 裝飾器

1）@Prop @Link

2）@Provide @Consume

@Provide 父組件傳遞

@Consume 子組件獲取

不需要傳參

、

4. @Observed 和 @ObjectLink

六、頁面路由

1. 示例

頁面路由配置地址

創建文件為頁面是則自動添加路徑

2. 案例

案例源碼

import router from '@ohos.router'class RouterInfo {
//   頁面路徑url: string
//   頁面標題title: stringconstructor(url:string, title:string) {this.url = urlthis.title = title}
}@Entry
@Component
struct Index {@State message: string = '頁面列表'private routers: RouterInfo[] = [new RouterInfo('pages/itemPage','商品列表'),new RouterInfo('pages/PropPage','多任務'),new RouterInfo('pages/ImagePage','圖片查看')]@BuilderRouterItem(r: RouterInfo, i: number) {Row(){Text(i.toString()).fontColor(Color.White)Text(r.title).fontColor(Color.White)}.justifyContent(FlexAlign.SpaceBetween).backgroundColor('#36D').padding({left:20,right:20}).borderRadius(20).width('100%').height(50).onClick(() => {//   router 跳轉router.pushUrl({url:r.url,params:{id:i}},router.RouterMode.Single,  //頁面跳轉模式err => {if (err) {console.log(`跳轉失敗，errCode:${err.code} errMsg:${err.message}`)}})})}build() {Column(){Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).height(50).fontColor(Color.Pink)List({space:8}) {ForEach(this.routers,(router:RouterInfo,index:number)=>{ListItem() {this.RouterItem(router,(index+1))}})}.layoutWeight(1)}}
}

import router from "@ohos.router"// 定義組件
@Component
export  struct Header {private title:ResourceStr = '列表'@State params:object = router.getParams() //拿到傳參build() {Row(){Text('<-').onClick(()=> {router.showAlertBeforeBackPage({message:'返回頁面'})  //返回前提示router.back() //返回路由})if(this.params) {Text(`${this.params}, ${this.title}`).fontSize(18).fontWeight(FontWeight.Bold)}else {Text(this.title) // 只顯示默認標題.fontSize(18).fontWeight(FontWeight.Bold)}}.width('100%').height(30)}
}

3. 總結

七、動畫

1. 屬性動畫和顯式動畫

1）屬性動畫

案例：

?

? Image(this.src)
??? .position({x:this.fishX-20,y:this.fishY-20}) // 定義初始位置
??? .rotate({angle:this.angle,centerX:"50%",centerY:'50%'})?// 定義動畫運動樣式
??? .width(40)
??? .height(40)
//?? 添加屬性動畫
??? .animation({duration:500})? //動畫播放參數{}

//修改屬性實現動畫
Button("v").backgroundColor('#20101010').onClick(()=> {this.fishY += 20})

import { Header } from '../components/CommonComponents'
import router from '@ohos.router';@Entry
@Component
struct AnimationPage {@State fishX: number = 200@State fishY: number = 180// 小魚角度@State angle:number = 0// 小魚圖片@State src: Resource = $r('app.media.startIcon')// 是否開始游戲@State isBegin: boolean = false;build() {Row() {// Header({title:"小魚動畫"})Stack() {  //堆疊容器Button('返回').position({x:0,y:0}).backgroundColor(Color.Pink).onClick(()=> {router.back()}).margin({top:0}).zIndex(1)if(!this.isBegin) {Button('開始游戲').onClick(() => {this.isBegin = true}).margin({left:250})}else{// 小魚圖片Image(this.src).position({x:this.fishX-20,y:this.fishY-20}).rotate({angle:this.angle,centerX:"50%",centerY:'50%'}).width(40).height(40)//   添加屬性動畫.animation({duration:500})//   操作按鈕Row(){Button('<').backgroundColor('#20101010').onClick(()=> {this.fishX -= 20})Column({space:40}) {Button('^').backgroundColor('#20101010').onClick(()=> {this.fishY -= 20})Button("v").backgroundColor('#20101010').onClick(()=> {this.fishY += 20})}Button('>').backgroundColor('#20101010').onClick(()=> {this.fishX += 20})}.height(240).width(240)}}}.height('100%').width('100%')}
}

2）顯式動畫 *

Image(this.src).position({x:this.fishX-20,y:this.fishY-20}).rotate({angle:this.angle,centerX:"50%",centerY:'50%'}).width(40).height(40)

Button('<').backgroundColor('#20101010').onClick(()=> {// this.fishX -= 20
    animateTo({duration:500},()=>{this.fishX -= 20})})

0基礎學習鴻蒙開發-HarmonyOS4

一、初識?

1. 開發工具

2. ArkTS

二、TypeScript 基本語法

1.變量聲明

2. 條件控制

3. 循環迭代

4. 函數

5. 類和接口

6. 模塊化開發

三、快速入門

1. 創建項目

2. 結構信息

?3. 入門案例

四、ArkUI 基礎組件

1. Image 組件

2. Text 組件

3. TextInput 文本輸框

4. Button 按鈕

5. Slider 滑塊

6.?Column和Row

1） 主軸?

2）交叉軸

7. 案例源碼

8.?渲染控制

1)?ForEach

2)?if-else

9. List 列表

10. 自定義組件

五、狀態管理

1. states 裝飾器

2. 案例：多任務統計

3. @Prop @Link @Provide @Consume 裝飾器

1）@Prop @Link

2）@Provide @Consume

4. @Observed 和 @ObjectLink

六、頁面路由

1. 示例

2. 案例

3. 總結

七、動畫

1. 屬性動畫和顯式動畫

1）屬性動畫

2）顯式動畫 *

2. 組件轉場動畫

3. 實現搖桿功能

八、Stage 模型

1. 應用配置組件

2. UIAbility 生命周期

3. 頁面組件生命周期

4.?UIAbility的啟動模式

1）案例：文檔跳轉

九、網絡連接

十、數據持久化

相關文章

1）主軸?