教不会你算我输系列 | 手把手教你HarmonyOS应用开发

HarmonyOS Design：鸿蒙视觉设计套件

ArkTS：鸿蒙编程语言

ArkUI：鸿蒙声明式UI框架

ArkCompoler：鸿蒙方舟编译器

DevEco Studio：鸿蒙开发IDE

DevEco Testing：鸿蒙测试套件

AppGallery Connect：鸿蒙应用发布套件

@State：组件拥有的状态属性，当@State 装饰的变量更改时，组件会重新渲染更新 UI。

@Link：组件依赖于其父组件拥有的某些状态属性，当任何一个组件中的数据更新时，另一个组件的状态都会更新，父子组件重新渲染。

@Prop：类似@Link，但子组件所做的更改不会同步到父组件上，属于单向传递。

@Provide：作为数据的提供方，可以更新其子节点的数据，并触发页面渲染。

@Consume：在感知到@Provide 数据更新后，会触发当前自定义组件的重新渲染。

@StorageLink ：组件通过使用@StorageLink(key)装饰的状态变量，与AppStorage 建立双向数据绑定，key为 AppStorage 中的属性键值。当创建包含@StorageLink 的状态变量的组件时，该状态变量的值将使用AppStorage 中的值进行初始化。在 UI 组件中对@StorageLink 的状态变量所做的更改将同步到AppStorage ，并从 AppStorage 同步到任何其他绑定实例中。

@StorageProp ：组件通过使用@StorageProp(key)装饰的状态变量，将与 AppStorage 建立单向数据绑定，key 标识 AppStorage 中的属性键值。当创建包含@StoageProp 的状态变量的组件时，该状态变量的值将使用 AppStorage 中的值进行初始化。AppStorage 中的属性值的更改会导致绑定的 UI 组件进行状态更新。

@Builder：可通过 @Builder 装器进行描述，该装器可以修饰函数，此函数可以在 build() 函数之外声明，并在 build() 函数中或其他 @Builder 修的函数中使用，在一个自定义组件内快速生成多个布局内容。

@Style：声明式范式为了避免开发者对重复样式的设置，通过@Styles 装器可以将多条样式设置提炼成一个方法，直接在组件声明的位置使用。

@Extend：@Extend 装饰器可以将新的属性函数添加到内置组件上，如Text、Column、Button 等，快速扩展原生组件。

1、属性动画：组件的某些通用属性变化时，可以通过属性动画实现渐变效果，比如设置组件size。

2、显式动画：全局 animateTo 显式动画接口，指定由于闭包代码导致的状态变化插入过渡动效，比如组件的显示与隐藏。

3、转场动画：转场动画包括间转场、组件内过渡转场和共享元素转场三种，比如页面跳转。

1、UI 组件事件：比如 TextInput 输入框产生的 onEditChange 输入文本变更事件，List 列表组件产生的 onScrollIndex 列表滚动事件。

2、交互事件：点击事件，拖拽事件，焦点事件，触摸事件，按键事件，鼠标事件，手势事件等

GEEK TALK

第一个鸿蒙版Hello World

// 安装nvm，nvm可以管理多版本NodeJS。npm install -g n
// 安装v16.19.1nvm install v16.19.1
// 切换使用指定的版本nodenvm use v16.19.1
// 彻底切换版本nvm alias default v16.19.1

• 遥遥领先连续点击 "系统版本号" 开启开发者模式。

• 系统 -> 更新，开启abd调试。

• 插入数据线，选择 "传输文件"。

• 证书配置：File > Project Structure > Project > Signing Configs界面，勾选“Automatically generate signature”。

GEEK TALK

小试牛刀 - 度加首页

import promptAction from '@ohos.promptAction'import { TabbarItem } from '../Models/TabbarItem'import { ClassPage } from './ClassPage'import { CreatePage } from './CreatePage'import { MinePage } from './MinePage'@Entry@Componentstruct Index {
  // tabbar数据源  tabList: TabbarItem[] = [    {      defaultIcon: $r("app.media.home"),      activeIcon: $r("app.media.home_focus"),      title:"创作"    },    {      defaultIcon: $r("app.media.class"),      activeIcon: $r("app.media.class_focus"),      title:"课堂"    },    {      defaultIcon: $r("app.media.my"),      activeIcon: $r("app.media.my_focus"),      title:"我的"    },  ]
  // 记录索引,index从0开始  @State tabActivityIndex: number = 0
  // 展示tabbaritem  @Builder  TabbarBuilder(item: TabbarItem, index: number) {    Column({space: 5}) {      Image(this.tabActivityIndex == index ? item.activeIcon : item.defaultIcon)        .width(24)        .aspectRatio(1)      Text(item.title)        .fontSize(12)        .fontColor(this.tabActivityIndex == index ? "#FFFFFF" :"#99FFFFFF")    }  }
  build() {    Column() {      // Tabs      Tabs({index: this.tabActivityIndex}) {        ForEach(this.tabList,(item: TabbarItem, index: number) => {          TabContent() {            if (index == 0) {              CreatePage()            } else if (index == 1) {              ClassPage()            } else {              MinePage()            }          }          .tabBar(this.TabbarBuilder(item,index))        } )      }      .barPosition(BarPosition.End) // tab放在底部      .onChange((index: number) => {        this.tabActivityIndex = index        promptAction.showToast({message:index.toString()})      })    }    .height("100%")    .width("100%")    .backgroundColor("#16141F")    .justifyContent(FlexAlign.Center)   }}

import { ActivityComponent } from '../Components/ActivityComponent'import { HotComponent } from '../Components/HotComponent'
// 创作页面@Componentexport struct CreatePage {
  // 活动下标  @State activitySelectedIndex: number = 0
  build() {    Column() {
      // 迎新年行      Row() {        Row(){          Text("🎉迎新年，瓜分万元流量券") // 新玩法！AI帮你制作专属贺岁视频🧧            .width("178")            .fontColor("rgba(255,255,255,0.6)")            .fontSize(14)          Image($r("app.media.img_home_link_arrow"))            .width(16)            .aspectRatio(1)        }        .width(194)        .padding({left: 10})
        Row(){          Image($r("app.media.img_reward_star"))            .width(16)            .height(16)          Text("签到")            .width("40")            .fontColor("rgba(255,255,255,0.6)")            .fontSize(14)            .textAlign(TextAlign.Center)        }        .width(66)      }      .height("50")      .width("100%")      .justifyContent(FlexAlign.SpaceBetween)
        // 开始创作      Row({space: 10}){        // 开始创作        Stack() {          Image($r("app.media.img_home_entrance"))            .width("100%")            .height("100%")            .borderRadius(8) // 圆角          Image($r("app.media.jiandao1"))            .width(30)            .aspectRatio(1)            .margin({bottom: 30})          Text("开始创作")            .width(56)            .height(20)            .fontColor("rgba(255,255,255,1)")            .fontSize(14)            .margin({top: 30})        }        .height("100%")        .layoutWeight(1) // 告诉占满剩余        .borderRadius(8) // 圆角
        // 草稿箱        Column(){          Text("2")            .fontColor("#fff")            .fontSize(20)            .margin({top: 15})          Text("草稿箱")            .fontColor("#fff")            .fontSize(14)            .margin({top: 10})        }        .backgroundColor("#282438")        .height("100%")        .width(86)        .borderRadius(8) // 圆角      }      .height(86)      .width("100%")      .justifyContent(FlexAlign.SpaceBetween)      .padding({left: 15, right: 15})
      // AI提词器      Row() {        Row() {          Column() {            Image($r("app.media.home_prompter"))              .width(40)              .height(28)            Text("AI 提词")              .fontColor("#fff")              .fontSize(10)          }          .width(70)          .height(70)          .justifyContent(FlexAlign.Center)          .margin({left: 15})
          Column() {            Image($r("app.media.home_ttv"))              .width(40)              .height(28)            Text("AI 成片")              .fontColor("#fff")              .fontSize(10)          }          .width(70)          .height(70)          .justifyContent(FlexAlign.Center)
          Column() {            Image($r("app.media.home_digital_human"))              .width(40)              .height(28)            Text("AI 数字人")              .fontColor("#fff")              .fontSize(10)          }          .width(70)          .height(70)          .justifyContent(FlexAlign.Center)
          Column() {            Image($r("app.media.home_subtitle"))              .width(40)              .height(28)            Text("文字提取")              .fontColor("#fff")              .fontSize(10)          }          .width(70)          .height(70)          .justifyContent(FlexAlign.Center)          .margin({right: 15})
        }        .height("100%")        .width("100%")        .backgroundColor("#282438")        .borderRadius(8)        .justifyContent(FlexAlign.SpaceBetween)
      }      .backgroundColor("#16141F")      .height(76)      .width("100%")      .padding({left: 15, right: 15})      .margin({top: 15})       .borderRadius(8)
      // 春节活动      Row() {        Row() {          Image($r("app.media.huodong1"))            .borderRadius(8)        }        .height("100%")        .width("100%")        .backgroundColor("#282438")        .justifyContent(FlexAlign.SpaceBetween)      }      .backgroundColor("#16141F")      .height(76)      .width("100%")      .padding({left: 15, right: 15})      .margin({top: 15})      .borderRadius(8)
      // 热点      Row() {        Row() {          Image(this.activitySelectedIndex == 0 ? $r("app.media.img_hot_tab_focus") : $r("app.media.img_hot_tab"))            .width(45)            .height(25)        }        .margin({left: 20})        .width(45)        .height(54)        .onClick( () => {          this.activitySelectedIndex = 0        })
        Text("活动")          .fontSize(18)          .fontColor(this.activitySelectedIndex == 0 ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,1)")          .margin({left: 20})          .onClick( () => {            this.activitySelectedIndex = 1          })          .margin({left: 15, top: 2})          .height(54)      }      .margin({top: 5})      .height(54)
      if (this.activitySelectedIndex == 0){        HotComponent()      } else {        ActivityComponent()      }    }    .width("100%")    .height("100%")    .alignItems(HorizontalAlign.Start)  }}

import { hotContentItemList, hotContentItemList2, HotContentItemModel } from '../Models/HotContentItemModel'import { HotContentComponent } from './HotContentComponent'import { TabItemListComponent, TabItemModel } from './TabItemListComponent'// 热点@Componentexport struct HotComponent {
  // 定义item的数据源  @State  tabItemModelList: TabItemModel[] = [    new TabItemModel({title: "全网"}),    new TabItemModel({title: "娱乐"}),    new TabItemModel({title: "情感"}),    new TabItemModel({title: "历史"}),    new TabItemModel({title: "健康"}),    new TabItemModel({title: "社会"}),    new TabItemModel({title: "科技"}),    new TabItemModel({title: "春节"})  ]
  // 选中的item下标  @State selectedIndex: number = 0
  // 热点内容列表  @State hotContentItemList: HotContentItemModel[] = hotContentItemList
  // 热点内容列表2.为了模拟不同tab下的数据  @State hotContentItemList2: HotContentItemModel[] = hotContentItemList2
  build() {    Column() {      Text("全网热点 每分钟更新")        .fontColor("rgba(255,255,255,0.3)")        .fontSize(12)        .margin({left: 15, top: 0})
      // 热点tab列表      TabItemListComponent({itemModelList: $tabItemModelList, selectedIndex: $selectedIndex})
      if (this.selectedIndex == 0) {        // 热点内容        HotContentComponent({itemList: this.hotContentItemList})      } else if (this.selectedIndex == 1) {        // 热点内容        HotContentComponent({itemList: this.hotContentItemList2})      } else {        // 热点内容        HotContentComponent({itemList: this.hotContentItemList})      }    }    .alignItems(HorizontalAlign.Start)    .width("100%")    .layoutWeight(1)     .padding({bottom: 80})  }}

import { createActivityListItemList, CreateActivityListItemModel } from '../Models/CreateActivityListItemModel'// 活动@Componentexport  struct ActivityComponent {
  @State createActivityListItemList: CreateActivityListItemModel[] = createActivityListItemList
  // 时间戳格式化  formatDateTime(timestamp: number) {    let dateTime = new Date(timestamp * 1000)    const year = dateTime.getFullYear();    const month = dateTime.getMonth() + 1 < 10 ? '0' + (dateTime.getMonth() + 1) : dateTime.getMonth() + 1;    const date = dateTime.getDate() < 10 ? '0' + dateTime.getDate() : dateTime.getDate();    const hours = dateTime.getHours() < 10 ? '0' + dateTime.getHours() : dateTime.getHours();    const minutes = dateTime.getMinutes() < 10 ? '0' + dateTime.getMinutes() : dateTime.getMinutes();    const seconds = dateTime.getSeconds() < 10 ? '0' + dateTime.getSeconds() : dateTime.getSeconds();    return (month + '月' + date + '日');  }
  build() {    List() {      ForEach(this.createActivityListItemList, (model: CreateActivityListItemModel, index: number) => {        ListItem() {          Row() {            Image(model.pic)              .width(114)              .height(64)              .margin({left: 15})              .borderRadius(8)            Column() {              Text(model.name)                .fontColor(Color.White)                .fontWeight(14)              Text(this.formatDateTime(model.start_time) + "-" + this.formatDateTime(model.end_time))                .fontColor("rgba(255,255,255,0.3)")                .fontWeight(12)                .margin({top:10})            }            .alignItems(HorizontalAlign.Start)            .margin({left: 15})          }        }        .height(84)      })    }    .width("100%")    .aspectRatio(1)  }}

GEEK TALK

基础图谱