**错误操作：**

~~请参考设计规范：
[https://developer.huawei.com/consumer/cn/doc/distribution/service/hag_card_ux](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](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. 点击“确定”按钮，新建卡片工程。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925163133619.gif#pic_center)
**Step3，新建卡片（可参考GIF2）：**
1. 选择新建卡片入口。
 a）在左侧资源管理器中，在src文件夹上右键选择“新建卡片”。
 b）在菜单栏“文件”下选择“新建卡片”。
 c）点击资源管理器旁边的图标按钮，选择“新建卡片”。
           
2. 选择卡片类型，填写相关信息，填写完毕后点击“确定”。
         
新建卡片成功后，可在 manifest.json 和 launch.json 文件中看到widgets的相关配置。

![在这里插入图片描述](https://img-blog.csdnimg.cn/2020092516330048.gif#pic_center)

**Step4，最后一步，在2分钟内快速完成卡片样式（可参考GIF3）：**
1. 光标聚焦在需要编辑的文件或标签处。
2. 在组件面板中的自动搜索结果中，选择组件并拖拽到需要编辑的位置。
3. 出现提示可编辑提示信息时，释放拖拽动作，被拖拽组件即可编辑到当前文件中，模拟预览即时刷新。

![以上4步，就完成了卡片的样式了！](https://img-blog.csdnimg.cn/20200925163400507.gif#pic_center)

** 其UX相关信息补充与提供参考：**
**基础样式库（可参考GIF4）：**
1. basic.scss基础样式文件在卡片模板项目的路径：\src\common\css\basic.scss。
**2. 强烈推荐使用这些样式声明，避免卡片UI不适配EMUI的问题。**
3. 使用方式如下图。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925163609185.gif#pic_center)

**变量（可参考GIF5）：**
    输入 $ 符号，即可触发引入的变量提示。
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925164634593.gif#pic_center)

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925164725955.gif#pic_center)

**样式片段（可参考GIF7）：**

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925164750237.gif#pic_center)

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

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

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200925164845930.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70#pic_center)

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

ITPub博客

快服务卡片样式完成只需要5分钟4个步骤？

最新文章