如果你打开 DevEco Studio 之后发现：ArkTS 的语法看得懂，但一个真实页面从接口到渲染就是串不起来；@State、@Prop、@Link 分开看都明白，放进同一个页面就开始互相打架——那这门课补的就是这一段。它以华为商城类应用为线索，把鸿蒙应用开发里最容易被跳过的中间层摊开讲：数据怎么来、状态放在哪、页面怎么拼、点击之后发生什么。

先确认缺口在哪

鸿蒙开发的学习曲线有个特点：官方文档把每个能力点都讲清楚了，但一个完整页面往往同时用到布局容器、列表渲染、自定义组件、状态传递和网络请求。初学者的卡点通常不是"不知道有这个 API"，而是"不知道该在哪个文件里写、什么时候触发、状态该由谁持有"。

这门课适合三类人：一是已经看完 ArkTS 基础语法、但没写过完整业务页面的新手；二是从 Android 或前端转过来、想对照已有经验找差异的转岗者；三是做过鸿蒙 Demo、但项目里状态一多就写乱、需要回头补结构的开发者。如果你连 ArkUI 的声明式写法都没接触过，建议先把最基础的组件和布局过一遍再来，否则跟着做会变成抄代码。

它练的是页面级的串联能力

课程以商城场景推进，从底部页签切换、首页导航、轮播图入手，然后接后台轮播接口、首页"猜你喜欢"列表，再往后是手机号注册页、密码登录、产品详情图片长廊。这条线的好处是它不孤立讲控件：轮播图必然牵出定时器与索引状态，猜你喜欢必然牵出列表渲染与网络数据映射，登录注册必然牵出输入校验与表单状态。你会反复遇到同一类问题在不同页面里的变形。

其中界面渲染和组件状态共享是两条主线。渲染部分关注的是页面怎么被拆成组件、列表怎么复用、图片长廊这类需要滑动联动的结构怎么组织；状态部分关注的是数据变化后谁重绘、父子组件之间靠什么通信、多个页面共享的数据该放在哪一层。这两件事做对了，页面才不会越写越乱。

跟着练的时候该盯住什么

每写一个页面之前，先自己判断状态应该由哪个组件持有，再对照视频里的做法，差异往往就是你的盲区。
接口部分不要只看能不能拿到数据，留意数据从网络返回后经过了几次转换才变成可渲染的结构。
轮播图、列表、图片长廊这几处，注意观察滚动或切换时的触发时机，这是鸿蒙里容易和前端经验产生偏差的地方。
登录注册页建议自己先写一遍再对照，重点看校验逻辑写在哪里、错误提示怎么和状态绑定。

看完应该能回答的问题

检验是否真的补上了缺口，可以拿下面几个问题自查：一个页面里同时有页签、轮播和列表时，状态你会怎么切分，为什么？父子组件之间传值，什么情况下用 @Prop、什么情况下用 @Link，选错会出什么现象？网络请求返回的数据，从原始结构到列表项渲染，中间需要哪几步？点击"猜你喜欢"里的一项进入详情，页面之间靠什么传递标识？如果这些问题你能不看资料讲清楚，说明页面级的串联能力已经建立起来。

如果讲不清楚，就回到对应章节重做一遍，重点是重做而不是重看。这套内容的价值不在于覆盖了多少 API，而在于逼你把一个能跑通、状态不乱的页面完整写出来。

珠峰教育- 鸿蒙开发视频课程

华为鸿蒙系统开发实战教程

编辑点评

深入鸿蒙系统开发，涵盖界面渲染、组件状态共享等核心技能，适合初学者及进阶者。

⭐ 编辑推荐

本课程全面讲解华为鸿蒙系统开发，从基础到进阶，助你掌握鸿蒙应用开发技能。

课程亮点

• 鸿蒙系统实战开发

• 界面渲染与组件状态共享

• 涵盖多种开发场景

课程目录

📁 8华为商城
    8.13绘制手机号注册页面.mp4  [333.5 MB]
    8.9实现首页猜你喜欢.mp4  [215.6 MB]
    8.16实现密码登录.mp4  [58.9 MB]
    8.12绘制手机号注册页面.mp4  [107.6 MB]
    8.5实现前台轮播图.mp4  [87.1 MB]
    8.3绘制首页导航.mp4  [30.9 MB]
    8.4实现后台轮播图接口.mp4  [203.1 MB]
    8.17实现产品详情图片长廊.mp4  [219.2 MB]
    8.1实现页签的切换.mp4  [117.4 MB]
    8.14实现保存用户信息和退出.mp4  [189.3 MB]
    8.8实现商品专区.mp4  [209.3 MB]
    8.2绘制HomeHeader.mp4  [31.6 MB]
    8.11加载失败和重试.mp4  [85.8 MB]
    8.10实现我的页面.mp4  [210.4 MB]
    8.7实现甄选推荐.mp4  [202.8 MB]
    8.18调用接口获取商品信息.mp4  [245.5 MB]
    8.19完善商品标题.mp4  [179.3 MB]
    8.15实现验证码登录.mp4  [103.4 MB]
    8.20加入购物车.mp4  [246.7 MB]
    8.22管理购物车.mp4  [226.6 MB]
    8.21加入购物车.mp4  [183.9 MB]
    8.6实现前后台的导航菜单.mp4  [91.2 MB]
📁 6鸿蒙应用程序
    6.19解决首选项问题.mp4  [30.4 MB]
    6.14新闻页面 上拉加载 下拉刷新.mp4  [137.2 MB]
    6.4同模块不同Ability跳转.mp4  [54.7 MB]
    6.24通知管理.mp4  [60.7 MB]
    6.22判断是否有token.mp4  [69.1 MB]
    6.21广告页面倒计时.mp4  [44.4 MB]
    6.6属性动画 显示动画.mp4  [61.0 MB]
    6.26华为时钟 时钟布局.mp4  [66.8 MB]
    6.9组件内专场动画案例.mp4  [42.7 MB]
    6.15Video.mp4  [59.7 MB]
    6.5不同模块下不同Ability跳转.mp4  [97.4 MB]
    6.31编辑闹铃.mp4  [105.8 MB]
    6.10弹簧动画 路径动画.mp4  [52.7 MB]
    6.16画圆 画线.mp4  [27.7 MB]
    6.18首选项存储.mp4  [75.3 MB]
    6.33华为闹钟Bug.mp4  [27.4 MB]
    6.13页面专场动画.mp4  [39.1 MB]
    6.7打开底部菜单栏.mp4  [51.8 MB]
    6.25后台任务 响铃.mp4  [106.9 MB]
    6.11元素共享专场动画.mp4  [26.3 MB]
    6.12朋友圈预览图片效果.mp4  [68.8 MB]
    6.23登录注册页面.mp4  [109.0 MB]
    6.1AppStorage.mp4  [62.0 MB]
    6.3生命周期.mp4  [82.7 MB]
    6.17画布 绘制表盘.mp4  [68.4 MB]
    6.28华为时钟 新建闹钟布局.mp4  [37.3 MB]
    6.2路由.mp4  [81.7 MB]
    6.8组件内专场动画.mp4  [45.4 MB]
    6.20广告页面.mp4  [131.8 MB]
    6.27华为时钟 时钟动起来.mp4  [35.4 MB]
    6.30添加闹钟和首页渲染.mp4  [131.5 MB]
    6.29首选项 创建闹铃仓库.mp4  [61.9 MB]
    6.32toggle切换响铃.mp4  [101.4 MB]
📁 3样式处理 界面渲染
    3样式处理 界面渲染资料.zip  [1.8 MB]
    3.6姓名循环列表.mp4  [42.4 MB]
    3.2多态样式.mp4  [38.0 MB]
    3.5循环渲染.mp4  [41.3 MB]
    3.1样式操作.mp4  [98.0 MB]
    3.4三元.mp4  [13.9 MB]
    3.3条件渲染.mp4  [34.7 MB]
📁 4自定义构建函数 组件状态共享
    4自定义构建函数 组件状态共享文档.png  [493.5 KB]
    4.5状态共享 状态监听.mp4  [22.1 MB]
    4.2@BuilderParam.mp4  [69.6 MB]
    4.1构建函数 @Builder.mp4  [70.7 MB]
    4.3状态共享 @Prop @Link.mp4  [73.8 MB]
    4.10评论列表 发布方法2.mp4  [28.5 MB]
    4.4状态共享 @Provide @Consume.mp4  [32.5 MB]
    4.12评论列表 抽取组件.mp4  [31.1 MB]
    4.7状态共享 @Observed @ObjectLink.mp4  [73.0 MB]
    4.6多层嵌套如何更新视图.mp4  [31.6 MB]
    4.11评论列表 喜欢和折叠.mp4  [66.3 MB]
    4.9评论列表渲染 发布功能.mp4  [62.8 MB]
    4.8评论列表静态页面.mp4  [170.8 MB]
📁 9端云一体化
    9.5创建云数据库并部署.mp4  [58.0 MB]
    9.1新建项目和应用 开通云函数.mp4  [61.2 MB]
    9.14创建项目 让云侧和端侧实现链接.mp4  [40.1 MB]
    9.6端侧查询数据库数据.mp4  [99.1 MB]
    9.13端云一体化项目介绍.mp4  [34.4 MB]
    9.9认证服务手机登录.mp4  [18.9 MB]
    9.3端侧调用云函数.mp4  [96.6 MB]
    9.11云存储 上传resources资源文件.mp4  [56.4 MB]
    9.2创建云函数并部署.mp4  [37.7 MB]
    9.10云存储 获取资源地址和删除资源.mp4  [87.7 MB]
    9.4端侧获取的是远程数据.mp4  [23.4 MB]
    9.7云数据库增删改查.mp4  [42.4 MB]
    9.8认证服务邮箱登录.mp4  [128.2 MB]
    9.12云存储 相册图片上传 (1).mp4  [114.7 MB]
📁 0Typescript预习
    0.9反射元数据.mp4  [227.4 MB]
    0.2ts中的基础类型详解.mp4  [210.1 MB]
    0.5类的类型.mp4  [174.6 MB]
    0.8装饰器.mp4  [95.5 MB]
    0.3ts中的类型断言.mp4  [76.5 MB]
    0.4函数类型.mp4  [122.3 MB]
    0.7泛型和交叉类型.mp4  [158.8 MB]
    0.6接口和泛型的使用.mp4  [256.4 MB]
    0.1搭建ts开发环境.mp4  [114.5 MB]
📁 1搭建鸿蒙开发环境
    1.5模拟器的启动.mp4  [6.0 MB]
    1.4安装模拟器.mp4  [3.6 MB]
    1.3首次运行+创建项目+汉化.mp4  [15.8 MB]
    1.2安装 DevEco Studio.mp4  [4.6 MB]
    1.1搭建鸿蒙开发环境.pdf  [3.6 MB]
📁 2鸿蒙内置组件
    2鸿蒙内置组件文档.zip  [1.8 MB]
    2.14返回顶部.mp4  [31.2 MB]
    2.2stage模式.mp4  [22.8 MB]
    2.11导航布局 下 (1).mp4  [19.3 MB]
    2.5Column Row Flex 组件.mp4  [99.4 MB]
    2.13List列表组件.mp4  [61.3 MB]
    2.16@State.mp4  [61.4 MB]
    2.1软件下载+项目创建.mp4  [86.6 MB]
    2.8TextInput 组件.mp4  [18.2 MB]
    2.17@Styles.mp4  [27.9 MB]
    2.15弹窗.mp4  [124.2 MB]
    2.6Grid.mp4  [44.8 MB]
    2.8TextInput 组件_20240801_142716.mp4  [18.2 MB]
    2.7Button组件.mp4  [41.5 MB]
    2.8TextInput 组件_20240801_142718.mp4  [18.2 MB]
    2.4Text组件.mp4  [74.1 MB]
    2.9Image组件.mp4  [44.6 MB]
    2.3基本结构.mp4  [42.7 MB]
    2.12导航布局 下.mp4  [19.3 MB]
    2.10Toggle Progress Slider 组件.mp4  [39.9 MB]
📁 10端云一体化项目
    10端云一体化项目说明.png  [493.5 KB]
    10.8设置页面.mp4  [92.1 MB]
    10.12进度条 和 用户信息上传数据库.mp4  [144.0 MB]
    10.16触底加载更多.mp4  [90.2 MB]
    10.11头像上传.mp4  [111.0 MB]
    10.21取消收藏.mp4  [41.8 MB]
    10.6首页选项卡.mp4  [21.7 MB]
    10.14首页轮播图.mp4  [132.9 MB]
    10.10账号管理获取登录信息展示.mp4  [56.0 MB]
    10.7首页选项卡2.mp4  [52.5 MB]
    10.2手机号登录.mp4  [101.3 MB]
    10.22取消收藏解决bug.mp4  [14.9 MB]
    10.20收藏页面渲染.mp4  [56.1 MB]
    10.1登录静态页面布局.mp4  [71.2 MB]
    10.9账号管理静态页面.mp4  [51.6 MB]
    10.15首页列表.mp4  [119.1 MB]
    10.13首次登录 用户信息存储数据库.mp4  [75.8 MB]
    10.4邮箱登录.mp4  [40.3 MB]
    10.17跳转详情页面.mp4  [37.8 MB]
    10.3登录页面补充.mp4  [48.6 MB]
    10.19修改收藏.mp4  [79.0 MB]
    10.18详情页面渲染.mp4  [95.9 MB]
    10.5登录持久化存储.mp4  [125.5 MB]
📁 7事件和ArkTS Native Api
    7事件和ArkTS Native Api必看.png  [493.5 KB]
    7.21多线程异步编程.mp4  [112.7 MB]
    7.18上传压缩图片.mp4  [155.8 MB]
    7.20harmonyos应用包更新.mp4  [96.9 MB]
    7.10电池信息 全局对象globalThis.mp4  [40.1 MB]
    7.1Touch 事件.mp4  [59.3 MB]
    7.15相册操作.mp4  [106.7 MB]
    7.7Gesture下.mp4  [160.1 MB]
    7.12手机加速度.mp4  [81.7 MB]
    7.23国际化、访问资源、资源管理.mp4  [48.8 MB]
    7.19打电话 打开外部应用 调起高德地图.mp4  [85.0 MB]
    7.16上传文件.mp4  [130.5 MB]
    7.6Gesture上.mp4  [101.4 MB]
    7.9沉浸式状态栏.mp4  [54.1 MB]
    7.22国际化、访问资源、资源管理.mp4  [40.1 MB]
    7.14文件操作.mp4  [184.1 MB]
    7.5拖拽升级版.mp4  [62.5 MB]
    7.3真机测试.mp4  [34.2 MB]
    7.2挂载和卸载事件.mp4  [20.0 MB]
    7.8适配方案.mp4  [47.1 MB]
    7.4拖拽初级版.mp4  [67.8 MB]
    7.13定位.mp4  [130.2 MB]
    7.24初步了解元服务.mp4  [54.1 MB]
    7.11横竖屏切换.mp4  [45.7 MB]
    7.17处理图片.mp4  [134.1 MB]
📁 5应用状态管理和请求
    5.12获取仓库的数据 渲染.mp4  [33.0 MB]
    5.1PersistentStorage.mp4  [112.3 MB]
    5.6菜单列表布局.mp4  [116.5 MB]
    5.10底部组件+购物车 布局.mp4  [34.9 MB]
    5.8样式问题调整.mp4  [22.3 MB]
    5.17UIAbility理解.mp4  [57.0 MB]
    5.3axios.mp4  [30.4 MB]
    5.2http.mp4  [56.8 MB]
    5.16UIAbility理解.mp4  [38.5 MB]
    5.9底部组件+购物车 布局.mp4  [111.9 MB]
    5.5饿了么 Header+Nav.mp4  [87.1 MB]
    5.15加入购物车和显示隐藏减号.mp4  [30.8 MB]
    5.14加入购物车和显示隐藏减号.mp4  [60.4 MB]
    5.19LocalStorage.mp4  [57.0 MB]
    5.4请求json数据.mp4  [19.0 MB]
    5.13加入购物车和显示隐藏减号.mp4  [69.5 MB]
    5.11加入购物车的方法.mp4  [34.9 MB]
    5.18UIAbility理解.mp4  [57.0 MB]
    5.7菜单列表数据的渲染.mp4  [111.9 MB]