『江鸟中原』深入鸿蒙ArkTS：打造自定义组件的学习之旅原创

wx6564778780670

发布于 2023-12-7 21:45

浏览

0收藏

引言

我是中原工学院的学生mj，在对鸿蒙课程的学习中，收获颇深，特此编写博客记录我的学习过程。
Mozilla创造了JS，Microsoft创建了TS，Huawei进一步推出了eTS。eTS（extended TypeScript）是鸿蒙(Harmony)生态的一种应用开发语言。也是Harmony系统（Harmony开发语言java、js、eTS,Harmony3.0后java语言废弃了）主推的一种开发语言。它在TypeScript（简称TS）的基础上，扩展了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript（简称JS）的超集，eTS则是TS的超集。eTS会结合应用开发和运行的需求。
随着鸿蒙操作系统的发展，ArkTS（鸿蒙 TypeScript 框架）逐渐成为开发者的首选。在本篇博客中，将记录我学习ArkTS的过程，并聚焦于使用ArkTS构建自定义组件的实际经验。

学习背景

在了解ArkTS之前，确保已经安装了必要的开发环境和工具。在本次学习中，我们将以实现一个可重复使用的图片轮播组件为例，深入探讨ArkTS的核心概念和功能。

学习记录

首先：项目初始化

使用华为官方的DevEco Studio,新建一个普通的空白项目，基本步骤如下：
『江鸟中原』深入鸿蒙ArkTS：打造自定义组件的学习之旅-鸿蒙开发者社区

然后：创建自定义组件

在src/main/ets/pages目录下创建一个新文件ImageSlider.ets，用于实现图片轮播组件。

import { createElement, useState, useEffect } from 'rax';

interface ImageSliderProps {
  images: string[];
}

const ImageSlider: FC<ImageSliderProps> = ({ images }) => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    // 实现图片轮播逻辑
    const interval = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 3000);

    return () => clearInterval(interval);
  }, [currentIndex]);

  return (
    <div>
      <img src={images[currentIndex]} alt={`Image ${currentIndex}`} />
    </div>
  );
};

export default ImageSlider;

最后：在主应用中使用自定义组件

在src/main/ets/pages目录下的main.ets文件中，引入并使用我们刚刚创建的图片轮播组件。

import { createElement, render } from 'rax';
import ImageSlider from './ImageSlider';

const images = [
  'url1.jpg',
  'url2.jpg',
  'url3.jpg',
  // 添加更多图片链接
];

function App() {
  return (
    <div>
      <h1>鸿蒙ArkTS自定义组件实践</h1>
      <ImageSlider images={images} />
    </div>
  );
}

render(<App />);