【Harmony Next】在鸿蒙项目中一键添加卡片

【Harmony Next】在鸿蒙项目中一键添加卡片

1.下载鸿蒙编译器DevEco Studio的插件DevEco CodeGenie【下载链接

image-20240807160923072

在华为的编译器现在官网下面可以下载DevEco CodeGenie的压缩包,安装后可以使用DevEco CodeGenie进行智能问答、生成卡片、知识查询等操作

2.安装DevEco CodeGenie

下载后的压缩包不需要解压,按照官方的操作指南进行安装

image-20240807161242982

安装成功后在编译器右侧会有显示

image-20240807161517464

3.使用DevEco CodeGenie快速为项目添加卡片

选择万能卡片

image-20240807161825159

根据个人的项目需求填写生成的规则:当前描述无法生成卡片,请更正您的描述,可以参考以下信息维度和输入样例:

  • 尺寸:目标卡片的大小,可选择范围:12(微卡片)、22(小卡片)、24(中卡片)、44(大卡片)
  • 用途:卡片主要用途/主题
  • 展示元素:卡片上展示的内容,如不同的功能的图文信息等
  • 包含组件:卡片包含的组件,如图标icon相关组件,logo相关组件,导航菜单组件,跳转按钮相关组件等

输入样例:

  1. 我想要一个美食推荐卡片,有个标题是美味尽享,还要有热门的几种美食的图文展示
  2. 我想制作一个新品上市公告卡片,主要展示新品上市的图文信息,以及商城的图片logo。每个新品都需要有一个跳转链接到对应的商品详情页。

image-20240807162006543

输入开始后生成你想要的卡片样式

4.卡片生成成功后可以快速预览

有些版本会出现预览失败,不过不影响最终的效果,直接保存到工程就可以实现一键为项目添加卡片

image-20240807162336360

image-20240807162509832

image-20240807162613726

5.生成成功过后运行项目长按应用图标就会出现添加卡片

gif

6.关于卡片的具体开发

这种快捷生成的方式减少了开发时间,但是适用性不是很强具体的需求可以根据项目的需求来进行更改,卡片的详细开发方式参考官方文档

image-20240807164516959

posted @ 2025-03-11 19:26  鸿蒙元服务前沿选手  阅读(43)  评论(0)    收藏  举报