1# 服务卡片开发指导：开发卡片页面 2 3### 介绍 4 5此Sample为开发指南中**服务卡片开发指导（Stage模型）**章节中**开发卡片页面**三小节示例代码的完整工程。 6 7[卡片页面能力说明](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/form/arkts-ui-widget-page-overview.md) 8[卡片使用动效能力](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/form/arkts-ui-widget-page-animation.md) 9[卡片使用自定义绘制能力](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/form/arkts-ui-widget-page-custom-drawing.md) 10 11### 效果预览 12|默认卡片|动效卡片|自定义绘制卡片| 13|--------------------------------|--------------------------------|--------------------------------| 14|||| 15 16使用说明： 17 181.长按ArkTSCardDemo应用图标，弹出菜单后点击**服务卡片**选项进入卡片预览界面。 19 202.卡片预览界面默认显示第一张默认卡片(helloworld卡片)，向右滑动可以看到第二张(动效卡片)和第三张(自定义绘制)卡片。 21 223.点击下方**添加到桌面**按钮即可以将卡片添加到桌面。 23 24 25### 工程目录 26```shell 27├── AppScope 28│ ├── app.json5 29│ └── resources 30│ └── base 31│ ├── element 32│ │ └── string.json 33│ └── media 34│ └── app_icon.png 35├── README_zh.md 36├── build-profile.json5 37├── entry 38│ ├── build-profile.json5 39│ ├── hvigorfile.ts 40│ ├── oh-package.json5 41│ └── src 42│ ├── main 43│ │ ├── ets 44│ │ │ ├── entryability 45│ │ │ │ └── EntryAbility.ts 46│ │ │ ├── entryformability 47│ │ │ │ └── EntryFormAbility.ts 48│ │ │ ├── pages 49│ │ │ │ └── Index.ets 50│ │ │ └── widget 51│ │ │ └── pages 52│ │ │ ├── AnimationCard.ets // 动效卡片 53│ │ │ ├── CanvasCard.ets // 自定义绘制卡片 54│ │ │ └── WidgetCard.ets // 默认Helloworld卡片 55│ │ ├── module.json5 56│ │ └── resources 57│ │ ├── base 58│ │ │ ├── element 59│ │ │ │ ├── color.json 60│ │ │ │ ├── float.json 61│ │ │ │ └── string.json 62│ │ │ ├── media 63│ │ │ │ └── icon.png 64│ │ │ └── profile 65│ │ │ ├── form_config.json 66│ │ │ └── main_pages.json 67│ │ ├── en_US 68│ │ │ └── element 69│ │ │ └── string.json 70│ │ ├── rawfile 71│ │ └── zh_CN 72│ │ └── element 73│ │ └── string.json 74│ └── ohosTest 75│ ├── ets 76│ │ ├── test 77│ │ │ ├── Index.test.ets // UI自动化用例 78│ │ │ └── List.test.ets 79│ │ ├── testability 80│ │ │ ├── TestAbility.ets 81│ │ │ └── pages 82│ │ │ └── Index.ets 83│ │ └── testrunner 84│ │ └── OpenHarmonyTestRunner.ts 85│ ├── module.json5 86│ └── resources 87│ └── base 88│ ├── element 89│ │ ├── color.json 90│ │ └── string.json 91│ ├── media 92│ │ └── icon.png 93│ └── profile 94│ └── test_pages.json 95├── hvigor 96│ ├── hvigor-config.json5 97│ └── hvigor-wrapper.js 98├── hvigorfile.ts 99├── hvigorw 100├── hvigorw.bat 101├── oh-package.json5 102├── ohosTest.md 103└── screenshots 104 └── device 105 ├── FormAnimation.jpeg // 动效卡片效果图 106 ├── FormCanvas.jpeg // 自定义绘制卡片效果图 107 └── FormHelloWorld.jpeg // 默认Helloworld卡片效果图 108``` 109 110### 具体实现 111 112可参考服务卡片开发指南如下三个章节： 113 114[卡片页面能力说明](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/form/arkts-ui-widget-page-overview.md) 115 116[卡片使用动效能力](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/form/arkts-ui-widget-page-animation.md) 117 118[卡片使用自定义绘制能力](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/form/arkts-ui-widget-page-custom-drawing.md) 119 120### 相关权限 121 122不涉及。 123 124### 依赖 125 126不涉及。 127 128### 约束与限制 129 1301. 本示例支持标准系统上运行，支持设备：RK3568； 131 1322. 本示例支持API14版本SDK，版本号：5.0.2.57； 133 1343. 本示例已支持使DevEco Studio 5.0.1 Release (构建版本：5.0.5.306，构建 2024年12月12日)编译运行； 135 1364. 高等级APL特殊签名说明：无； 137 138### 下载 139 140如需单独下载本工程，执行如下命令： 141 142```shell 143git init 144git config core.sparsecheckout true 145echo code/DocsSample/Form/ArkTSCardDocsSample/ > .git/info/sparse-checkout 146git remote add origin https://gitee.com/openharmony/applications_app_samples.git 147git pull origin master 148``` 149
