HarmonyOS鸿蒙Next实战卡片开发 03
HarmonyOS鸿蒙Next实战卡片开发 03
HarmonyOS Next 实战卡片开发 03
在前面两张，我们基本掌握了卡片的使用流程，本章节就通过一个实战来加强对卡片使用的理解。
要完成的案例
新建项目和新建服务卡片
设置沉浸式
entry/src/main/ets/entryability/EntryAbility.ets
首页显示轮播图数据
1. 申请网络权限
entry/src/main/module.json5
2. 新建工具文件 /utils/index.ets
entry/src/main/ets/utils/index.ets
3. 初始化
entry/src/main/ets/entryability/EntryAbility.ets
4. 页面中使用
entry/src/main/ets/pages/Index.ets
5. 效果
创建卡片时，获取卡片id
1. 获取和返回卡片id
这里解析下为什么要返回id给卡片组件，因为后期卡片想要向应用通信时，应用响应数据要根据卡片id来响应。
2. 接受和显示卡片id
entry/src/main/ets/widget/pages/WidgetCard.ets
3. 效果
记录卡片id，持久化存储
1. 封装持久化存储卡片id的工具类
entry/src/main/ets/utils/index.ets
2. 初始化卡片id工具类
onCreate中初始化
entry/src/main/ets/entryability/EntryAbility.ets
onAddForm中初始化
entry/src/main/ets/entryformability/EntryFormAbility.ets
3. 卡片主动上传卡片id
利用watch监听器来触发上传
entry/src/main/ets/widget/pages/WidgetCard.ets
4. 应用Aibility接收卡片id
entry/src/main/ets/entryability/EntryAbility.ets
5. 接收卡片id并且持久化
开启后台运行权限
entry/src/main/module.json5
持久化
entry/src/main/ets/entryability/EntryAbility.ets
6. 移除卡片时，删除卡片id
entry/src/main/ets/entryformability/EntryFormAbility.ets
封装下载图片工具类
将下载图片和拼接卡片需要格式的代码封装到文件中 该工具类可以同时下载多张图片，使用了Promise.all 来统一接收结果
entry/src/main/ets/utils/CardDonwLoad.ets
卡片发起通知，获取网络图片
1. 准备好卡片代码，用来接收返回的网络图片数据
entry/src/main/ets/widget/pages/WidgetCard.ets
2. 应用Ability接收卡片通知，下载网络图片，并且返回给卡片
entry/src/main/ets/entryability/EntryAbility.ets
3. 效果
卡片同步轮播
1. 监听轮播图onChange事件，设置当前显示的下标
entry/src/main/ets/pages/Index.ets
2. 监听下标的改变，通知持久化存储中所有的卡片进行更新
entry/src/main/ets/pages/Index.ets
3. 效果
总结
1. 项目开发流程
新建项目与服务卡片
设置沉浸式体验
2. 首页轮播图数据显示
申请网络权限
新建工具文件
初始化操作
页面使用
3. 卡片 id 的处理
获取与返回卡片 id
接受与显示卡片 id
封装工具类
初始化工具类
卡片主动上传
应用接收与持久化
移除卡片时处理
4. 图片相关操作
封装下载图片工具类
卡片发起通知获取网络图片
卡片准备接收数据
应用处理与返回数据
5. 卡片同步轮播功能
监听轮播图 onChange 事件
通知卡片更新
更多关于HarmonyOS鸿蒙Next实战卡片开发 03的实战教程也可以访问 https://www.itying.com/category-93-b0.html
老师，发现一个问题，持久化的fromID，remove并未生效
onRemoveForm(formId: string) {
FormIdStore.remove(formId)
}
更多关于HarmonyOS鸿蒙Next实战卡片开发 03的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
谢谢老师的分享，看完了老师的三篇服务卡片真的受益匪浅。按照老师的文章说明，目前已经基本实现我的需求了，实现过程中都是我自己不理解产生的问题。再次跪谢老师。也很期待老师后续的文章产出。
老师，很不好意思我有一点不明白。
我仿照老师的示例，拿到了我的图片网路地址，一个string []，打印结果如上。我也打印出来了下载过程的urls。
在此处会出现两种结果：
1、在服务卡片创建时，这个下载过程的 log 日志 打印，但是图片不能在我的服务卡片上渲染，并且会伴随着，卡住我其他的传递的数据渲染。
2、在服务卡片创建时，这个下载过程的log 日志不打印(疑似都没有执行)，但是我其他的数据是可以正常传递到服务卡片来进行渲染展示。
麻烦老师帮我看看。问题出在哪里。
HarmonyOS鸿蒙Next的卡片开发主要基于ArkUI框架，使用TypeScript或JavaScript进行开发。卡片是鸿蒙系统中用于展示信息的轻量级组件，可以在主屏幕、负一屏等位置显示。开发卡片时，主要通过CardProvider和CardController两个核心类来实现。
首先，创建卡片需要定义一个CardProvider，它负责管理卡片的生命周期和数据更新。CardProvider中需要实现onCreate、onUpdate、onDestroy等方法，分别对应卡片的创建、更新和销毁过程。
其次，卡片的内容通过CardController来控制。CardController提供了对卡片视图的操作接口，开发者可以通过它来更新卡片的内容、样式等。卡片的布局使用ArkUI的声明式UI语法，类似于HTML和CSS的组合，可以灵活地定义卡片的样式和结构。
在开发过程中，卡片的配置文件config.json中需要声明卡片的类型、尺寸、更新频率等信息。卡片的更新可以通过定时器、事件触发等方式进行，开发者可以根据需求选择合适的更新策略。
卡片的交互能力也是开发中的重要部分。鸿蒙系统提供了丰富的事件处理机制，开发者可以通过监听用户的操作事件（如点击、滑动等）来实现卡片的动态响应。
最后，卡片的调试和测试可以通过鸿蒙提供的DevEco Studio工具进行。该工具支持实时预览、模拟器调试等功能，能够帮助开发者快速验证卡片的效果和性能。
总结来说，HarmonyOS鸿蒙Next的卡片开发主要涉及CardProvider和CardController的使用，通过ArkUI框架实现卡片的布局和交互，结合配置文件定义卡片的基本属性，最终通过DevEco Studio进行调试和测试。
在HarmonyOS鸿蒙Next中，实战卡片开发主要涉及以下几个步骤：
- 创建卡片模板：使用ArkUI框架定义卡片的布局和样式，支持XML和JS两种方式。
- 数据绑定：通过ViewModel或DataSource将数据与卡片UI绑定，实现动态内容展示。
- 卡片交互：定义点击、滑动等事件处理逻辑，提升用户交互体验。
- 卡片发布：将卡片打包并发布到应用市场，供用户下载和使用。
- 性能优化：通过懒加载、缓存等技术手段，确保卡片在设备上高效运行。
这些步骤帮助开发者快速构建功能丰富、响应迅速的鸿蒙卡片应用。
