卡片 - 比特日记

卡片


1
2
3
4
5
1显示应用数据
2实现预览效果，服务直达，点击卡片，直达页面
3
4静态卡片：静态布局，2*4
5动态卡片：动态展示数据


1
2
1export default class CardFormAbility extends FormExtensionAbility {
2....

module.json5


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
 1{
 2  "name": "CardFormAbility",
 3  "srcEntry": "./ets/cardformability/CardFormAbility.ets",
 4  "label": "$string:CardFormAbility_label",
 5  "description": "$string:CardFormAbility_desc",
 6  "type": "form",
 7  "metadata": [
 8    {
 9      "name": "ohos.extension.form",
10      "resource": "$profile:form_config"
11    }
12  ]
13}

form_config.json


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 1{
 2  "forms": [
 3    {
 4      "name": "widget01",
 5      "displayName": "$string:widget01_display_name",
 6      "description": "$string:widget01_desc",
 7      "src": "./ets/widget01/pages/Widget01Card.ets",
 8      "uiSyntax": "arkts",
 9      "window": {
10        "designWidth": 720,
11        "autoDesignWidth": true
12      },
13      "colorMode": "auto",
14      "isDynamic": false,
15      "isDefault": true,
16      "updateEnabled": false,
17      "scheduledUpdateTime": "10:30",
18      "updateDuration": 1,
19      "defaultDimension": "2*4",
20      "supportDimensions": [
21        "2*4"
22      ]
23    }
24  ]
25}

静态卡片跳转


1
2
3
4
5
6
1FormLink({
2  action: this.actionType,
3  abilityName: this.abilityName,
4  params: {
5    message: this.message
6  }

动态卡片跳转


1
2
3
4
5
6
7
8
9
1.onClick(() => {
2  postCardAction(this, {
3    action: this.actionType,
4    abilityName: this.abilityName,
5    params: {
6      message: this.message
7    }
8  });
9})