点歌系统也有鸿蒙版了？老王抢先体验了一把

大家好，我是老王~

鸿蒙前段时间新出了方舟开发框架，声明式开发模式，和react就很相似。此项目基于ArkUI 3.0开发，算是一个比较完善的系统。

在做这个项目过程中遇到了很多问题，能解决的都解决了，不能解决的会在此提出，后面框架升级解决后会再次更新。

接下来将从这几个方面讲解开发的系统，项目目录、开发过程、还有最主要的组件相关内容等。

一、实现效果

二、项目目录

三、组件

实现组件

• 其实很简单，使用@Component修饰的结构体都具有组件化能力

组件的各种修饰器

• @Entry：如果你想让该组件作为你这个页面的默认入口就需要使用这个修饰器

• @Preview: 可以在DevEco的PC预览上进行单组件预览

• @Builder: 在一个自定义组件内快速生成多个布局内容，我觉得这个很鸡肋，直接使用自定义组件也是可以的

• @Extend：这个组件比较实用，如果想覆盖自定义组件的一些属性，直接使用这个组件修饰即可修改

组件定义和使用

• 新建一个Components文件夹，文件夹中放各种组件

• 组件需要使用es6的import导入、export导出

// 组件定义
@Component
export struct Component {
    build() {
      Text('我的第一个组件')
    }
}
// 组件使用
import {Component} from '你的文件路径'
Component()

组件的数据通信

• 父组件传值到子组件，父组件直接传值过去即可，如：Component({value: '传递的值'})，子组件接收的话，需要定义一个value属性接收

• 如果更改数据后需要页面同步更改需要使用@States修饰进行修饰

• 父子组件双向通信，父组件需要定义value属性，并使用@States修饰器修饰，子组件定义value属性接收，同时使用@Link修饰器修饰，这样子组件数据修改后父组件会同步修改

• 子组件调用父组件方法，文档中并没有相关说明，但是如果想要调用父组件方法的话可以先双向通信，然后父组件中使用@Watch修饰器监听属性变化，属性一旦变化执行相应方法

四、项目开发

主入口

• 主入口设定了一个当前展示页面的currentId,点击底部nav时currentId会变化，根据currentId展示不同的页面。

• 数据改变页面不会刷新,如果想要页面进行刷新，需要给依赖的数据增加装饰器@State，同时@State修饰的数据对组件显隐有一定作用

• 数据超出限定范围，是无法滚动的，需要给超出组件外层包裹Scroll组件

• 主要代码

@Entry
@Component
struct Index {
  @State currentId: number = 1
  build() {
    Column() {
      Scroll() {
        Column() {
          if (this.currentId === 1) {
            // 点歌页面
            ChooseSong()
          } else if (this.currentId === 2) {
            // 遥控页面
            RemoteControl()
          } else {
            // 我的页面
            Home()
          }
        }.width('100%')
      }.height('91%').scrollBarWidth(0)
      // 底部nav
      Column() {
        MyBottomNav({ currentId: $currentId })
      }.width('100%').height('9%')
    }.width('100%').height('100%')
  }
}

点歌页面

• ets框架暂时未出输入框组件，暂时采用布局写的假输入框，等出了输入框组件再行替换

• 搜索框组件点击事件在父组件中定义，isClick用@Link修饰可实现数据双向绑定，父组件通过监听isClick的变化来触发点击事件

• prompt.showToastt弹窗事件，ets不支持，使用会报错，添加至歌曲列表的弹窗事件支持后会加入进去。