• Home
Name Date Size #Lines LOC

..--

AppScope/22-Mar-2025-3532

entry/22-Mar-2025-1,065937

hvigor/22-Mar-2025-88

screenshots/device/22-Mar-2025-

.gitignoreD22-Mar-2025119 1111

README_zh.mdD22-Mar-20256 KiB147120

build-profile.json5D22-Mar-20251.1 KiB4342

hvigorfile.tsD22-Mar-2025159 21

hvigorwD22-Mar-20252.1 KiB6428

hvigorw.batD22-Mar-20252 KiB7356

oh-package.json5D22-Mar-2025242 1312

ohosTest.mdD22-Mar-20251.2 KiB97

README_zh.md

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|![FormHelloWorld](./screenshots/device/FormHelloWorld.jpeg)|![FormAnimation](./screenshots/device/FormAnimation.jpeg)|![FormCanvas](./screenshots/device/FormCanvas.jpeg)|
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.本示例仅支持标准系统上运行。
131
1322.本示例支持API10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0Release)。
133
1343.本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。
135
136### 下载
137
138如需单独下载本工程，执行如下命令：
139
140```shell
141git init
142git config core.sparsecheckout true
143echo code/DocsSample/Form/ArkTSCardDocsSample/ > .git/info/sparse-checkout
144git remote add origin https://gitee.com/openharmony/applications_app_samples.git
145git pull origin master
146```
147