乐趣区

关于android:快服务卡片样式完成只需要5分钟4个步骤

jiezi

错误操作：

~~ 请参考设计规范：
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. 呈现提醒可编辑提示信息时，开释拖拽动作，被拖拽组件即可编辑到以后文件中，模仿预览即时刷新。

其 UX 相干信息补充与提供参考：
根底款式库（可参考 GIF4）：

  1. basic.scss 根底款式文件在卡片模板我的项目的门路：srccommoncssbasic.scss。

2. 强烈推荐应用这些款式申明，防止卡片 UI 不适配 EMUI 的问题。

  1. 应用形式如下图。

变量（可参考 GIF5）：

 输出 $ 符号，即可触发引入的变量提醒。![在这里插入图片形容](https://img-blog.csdnimg.cn/20200925164634593.gif#pic_center)

办法（可参考 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
原作者：小亭子

退出移动版