本篇Codelab是基于ArkTS的声明式开发范式的样例，主要介绍了Web组件如何加载本地和云端H5小程序。所加载的页面是由HTML+CSS+JavaScript实现的完整小应用。Web组件加载H5页面。ArkTS和H5页面交互。使用Web组件加载H5页面。使用ArkTS与H5页面进行交互。

本篇Codelab是基于ArkTS的声明式开发范式实现的样例，主要介绍了数据请求和touch事件的使用。数据请求。列表下拉刷新。列表上拉加载。使用List组件实现数据列表。使用Tabs、TabContent组件实现内容视图切换。网络数据请求。触摸事件onTouch的使用。

线性布局容器表示按照垂直方向或者水平方向排列子组件的容器，ArkTS提供了Column和Row容器来实现线性布局。Column表示沿垂直方向布局的容器。Row表示沿水平方向布局的容器。了解布局容器的主轴和交叉轴，主要是为了让大家更好地理解子组件在主轴和交叉轴的排列方式。接下来，我们将详细讲解Column和Row容器的两个属性justifyContent和alignItems。属性名称描述设置子组件

DevEco Studio的使用。

选中工程entry > src > main > ets > pages目录，点击鼠标右键 > New > Page，新建命名为SecondPage的page页。在工程pages目录中，选中Index.ets，点击鼠标右键 > Refactor > Rename，改名为IndexPage.ets。在SecondPage页面中，Button按钮添加onClick()事件，调用router.back(

在应用中，界面通常都是动态的。如图1所示，在子目标列表中，当用户点击目标一，目标一会呈现展开状态，再次点击目标一，目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。图1展开/收起目标项ArkUI作为一种声明式UI，具有状态驱动UI更新的特点。当用户进行界面交互或有外部事件引起状态改变时，状态的变化会触发组件自动更新。所以在ArkUI中，我们只需要通过一个变量来记录状态。当改变状态的时候，A

在我们常用的手机应用中，经常会见到一些数据列表，如设置页面、通讯录、商品列表等。下图中两个页面都包含列表，“首页”页面中包含两个网格布局，“商城”页面中包含一个商品列表。上图中的列表中都包含一系列相同宽度的列表项，连续、多行呈现同类数据，例如图片和文本。常见的列表有线性列表（List列表）和网格布局（Grid列表）：为了帮助开发者构建包含列表的应用，ArkUI提供了List组件和Grid组件，开发

在手机、平板或是智慧屏这些终端设备上，媒体功能可以算作是我们最常用的场景之一。无论是实现音频的播放、录制、采集，还是视频的播放、切换、循环，亦或是相机的预览、拍照等功能，媒体组件都是必不可少的。以视频功能为例，在应用开发过程中，我们需要通过ArkUI提供的Video组件为应用增加基础的视频播放功能。借助Video组件，我们可以实现视频的播放功能并控制其播放状态。常见的视频播放场景包括观看网络上的较

相信大家都遇到过这样的场景，有时候我们点击应用的页面，会跳转到一个类似浏览器加载的页面，加载完成后，才显示这个页面的具体内容，这个加载和显示网页的过程通常都是浏览器的任务。ArkUI为我们提供了Web组件来加载网页，借助它我们就相当于在自己的应用程序里嵌入一个浏览器，从而非常轻松地展示各种各样的网页。本文将为您介绍Web组件一些常用API的使用。

在我们常用的应用中，经常会有视图内容切换的场景，来展示更加丰富的内容。比如下面这个页面，点击底部的页签的选项，可以实现“首页”和“我的”两个内容视图的切换。ArkUI开发框架提供了一种页签容器组件Tabs，开发者通过Tabs组件可以很容易的实现内容视图的切换。页签容器Tabs的形式多种多样，不同的页面设计页签不一样，可以把页签设置在底部、顶部或者侧边。本文将详细介绍Tabs组件的使用。