更多内容请访问：Harmonyos与华为官方共同建立的技术社区https://harmonyos.51cto.comDeployment，Ability可以分为两种：FA（FeatureAbility)和PA（粒子能力）。此Codelab将使用UI组件开发HarmonyOS购物应用程序。HarmonyOS为开发者提供了丰富的组件，每个组件通过对数据和方法的简单封装，实现了一个独立的可视化交互功能单元。开发者只需关注实现逻辑，减少开发量。最终预览我们将最终构建一个简单的购物应用程序。该应用包含两级页面，即首页（产品浏览标签、购物车标签和我的页面标签）和产品详情页面。两个页面都展示了丰富的HarmonyOSUI组件，包括：自定义弹窗容器（dialog）、列表（list）、滑动容器（swiper）、选项卡组件（tabs）、按钮组件（button）、图表组件（chart）、分隔线组件(divider)、图片组件(image)、交互组件(input)、跑马灯组件(marquee)、菜单组件(menu)、滑动选择器组件(picker)、进度条组件(progress)、评分栏组件(rating)、搜索框组件（搜索）。产品浏览页面和产品详情页面如下：2.搭建HarmonyOS环境●安装DevEcoStudio和Node.js。具体请参考下载安装软件。●搭建DevEcoStudio开发环境。DevEcoStudio开发环境依赖于网络环境。需要联网才能保证工具的正常使用。开发环境可根据以下两种情况进行配置：●如果可以直接上网，只需要下载HarmonyOSSDK运行即可。●如果网络不能直接访问Internet，则需要通过代理服务器访问Internet。具体请参见配置开发环境。🕮注意如果需要在手机上运行程序，需要提前申请证书，如果使用模拟器可以忽略。●准备密钥和证书申请文件●申请调试证书您可以通过以下两种方式完成本Codelab：●开发者模式开启鸿蒙真机。●DevEcoStudio中的手机模拟器（模拟器暂不支持分布式调试）。3.代码结构解读本Codelab仅对核心代码进行讲解。完整代码，我们会在参考资料7中提供下载方法。接下来我们用一段来说明整个项目的代码结构：entry/src/main/js/default/common文件夹存放一些公共资源，比如图片。●entry/src/main/js/default/pages文件夹存放HarmonyOSJS页面，包括css、hml、js文件。●entry/src/main/config.json：配置文件。4.详细的页面分析接下来，我们可以编写css、hml、js代码。搜索框组件（search）：用于提供用户搜索内容的输入区域。图片示例及代码如下：页面显示：
