错误操作:

请参考设计规范:
https://developer.huawei.com/consumer/cn/doc/distribution/service/hag_card_ux

正确操作:

5分钟4个步骤快速完成快服务卡片样式:

Step1,下载华为快应用IDE:
https://developer.huawei.com/consumer/cn/doc/development/Tools-Guides/quickapp-obtain-ide

Step2,新建工程(可参考GIF1) :

  1. 以管理员身份启动华为快应用IDE
  2. 点击新建卡片工程菜单(Ctrl+Shift+J):文件 -> 新建项目 -> 新建卡片项目。
  3. 输入应用名称和rpk包名,选择项目工作区间。
  4. 选择卡片模板。
  5. 点击“确定”按钮,新建卡片工程。

在这里插入图片描述
Step3,新建卡片(可参考GIF2):

  1. 选择新建卡片入口。
    a)在左侧资源管理器中,在src文件夹上右键选择“新建卡片”。
    b)在菜单栏“文件”下选择“新建卡片”。
    c)点击资源管理器旁边的图标按钮,选择“新建卡片”。

  2. 选择卡片类型,填写相关信息,填写完毕后点击“确定”。

新建卡片成功后,可在 manifest.json 和 launch.json 文件中看到widgets的相关配置。

在这里插入图片描述

Step4,最后一步,在2分钟内快速完成卡片样式(可参考GIF3):

  1. 光标聚焦在需要编辑的文件或标签处。
  2. 在组件面板中的自动搜索结果中,选择组件并拖拽到需要编辑的位置。
  3. 出现提示可编辑提示信息时,释放拖拽动作,被拖拽组件即可编辑到当前文件中,模拟预览即时刷新。

以上4步,就完成了卡片的样式了!

其UX相关信息补充与提供参考:
基础样式库(可参考GIF4):

  1. basic.scss基础样式文件在卡片模板项目的路径:\src\common\css\basic.scss。
    2. 强烈推荐使用这些样式声明,避免卡片UI不适配EMUI的问题。
  2. 使用方式如下图。

在这里插入图片描述

变量(可参考GIF5):
输入 $ 符号,即可触发引入的变量提示。
在这里插入图片描述

方法(可参考GIF6):

  1. 长度/大小的样式的值最好引用 dpConvert 方法, 例如 font-weight、 margin、 border-radius、 padding等。
  2. 输入样式属性关键字后,再输入 dpConvert 部分关键字,即可触发 dpConvert 的方法提示项,方法的入参也可以是变量。

在这里插入图片描述

样式片段(可参考GIF7):

在这里插入图片描述

看完本文攻略小编带你少走弯路飞上捷径,启动开挂模式,
完成快服务卡片的样式,只需要5!分!钟!
如果感兴趣了解更详细,可参考文档《卡片开发步骤》

完整开发步骤:
下载IDE → 新建卡片 → 组件拖拽 → 配置:添加卡片参数 → 真机:实时预览 → 调试 → 测试 → 构建打包 → End,恭喜你通关!

如果你觉得本文对你有帮助,麻烦点个赞鸭~

在这里插入图片描述


原文链接:https://developer.huawei.com/consumer/cn/forum/topicview?tid=0202331279062230203&fid=17
原作者:小亭子