# 项目结构

_手机 _手表

本文对项目的结构及相关进行了讲解，包括卡片快应用文件结构讲解、配置和新增卡片等

通过本节，你将学会:

项目介绍
配置信息
新增快应用页面
新增卡片
混合工程
资源引用
引入依赖

# 项目介绍

通过 IDE 新建一个项目，这个项目已经包含了项目配置与示例页面,以及卡片文件的初始代码，项目根目录主要结构如下：

├── sign                      rpk包签名模块
│   ├── certificate.pem       证书文件
│   └── private.pem           私钥文件
├── src
│   |—— Card                  卡片代码和资源目录
|   |   └── index.ux          卡片页面文件
│   ├── Common                公用的资源和组件文件
│   │   └── logo.png          应用图标
│   ├── Demo                  快应用页面目录
│   |   └── index.ux          页面文件，可自定义页面名称
│   ├── app.ux                APP文件
│   └── manifest.json         项目配置文件，配置应用图标、页面路由等
└── package.json              定义项目需要的各种模块及配置信息

1
2
3
4
5
6
7
8
9
10
11
12
13

目录的简要说明如下：

src：项目源文件夹
sign：签名模块，签名生成方法详见文档生成证书 (opens new window)

# 新增卡片

新增及配置卡片，需要依赖manifest.json中router.widgets配置

# router.widgets

卡片的定义通过 manifest.json 中的 router.widgets 字段进行定义。

属性	类型	必填	说明
widgets	Object	否	卡片列表，key 值为卡片名称（对应卡片目录名，例如 cards/Card 对应`cards/Card`目录，/<key 值>为卡片访问路径，是卡片的唯一标识），value 为卡片详细配置 widget，详见下面说明

属性	类型	必填	描述
name	String	是	卡片名称(需谨慎填写此字段，可能会被展示，比如通知栏)
description	String	否	卡片描述(需谨慎填写此字段，可能会被展示)
component	String	是	卡片对应的组件名，与 ux 文件名保持一致，例如'card' 对应 'card.ux'
features	Array	否	本卡片使用的接口列表，卡片的接口列表单独定义，在某些场景下可以做提前申请（例如负一屏）
minCardPlatformVersion	Integer	是	支持的最小卡片平台版本号`注意：卡片minCardPlatformVersion版本号字段有别于快应用的minPlatformVersion，具体支持的卡片平台版本号请参考本文档所列`
targetManufacturers	Array	否	目标厂商，字段可选，若配置此字段，则需要指定对应厂商，如不指定，可能不能在对应的厂商上架,当前支持厂商字段："vivo", "OPPO", "xiaomi", "honor"
sizes	Array	是	卡片支持的外观尺寸选项，每个尺寸选项表示该组件在布局网格中的占位大小（宽度和高度，以栅格个数为单位）。支持 `"FULL"`（全宽/全高）、`"AUTO"` (宽度/高度自适应)与具体数值的组合，并通过格式如 `"2x2"`、`"FULLx4"`、`"1xFULL"`、`"4xAUTO"`来定义。参考各厂商入口支持情况进行设置。
deviceTypeList	Array	否	卡片支持的设备类型。可选值有： `phone`,`watch`, 默认值为`phone`

widgets 字段定义在 router 字段中，如卡片源文件在 src/cards/card/index.ux 中，则 widgets 定义如下

{
  "router": {
    "widgets": {
      "cards/card": {
        "name": "卡片",
        "description": "这是一个快应用卡片",
        "component": "index",
        "features": [
          {
            "name": "system.network"
          },
          {
            "name": "system.router"
          }
        ],
        "minCardPlatformVersion": 2000,
        "targetManufacturers": ["vivo", "OPPO", "xiaomi", "honor"],
        "sizes": ["2x2","2x1"],
        "deviceTypeList": ["phone","watch"]
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

注意：其中卡片 key 值应为卡片存放目录“cards/card”，仅允许字母、数字、“_”和“/”组成，使用特殊字符可能导致编译失败或无法上传审核平台。

# 混合工程

工程中 pages 或 widgets 配置可以独立存在，也可以同时存在(卡片与快应用共存)，并且 widgets 中还可以配置多张卡片，示例如下：

{
  "router": {
    "pages": {
      "Demo": {
        "component": "index"
      }
    },
    "widgets": {
      "cards/card_one": {
        "name": "卡片1",
        "description": "这是一个快应用卡片",
        "component": "index",
        "features": [
          {
            "name": "system.network"
          },
          {
            "name": "system.router"
          }
        ],
        "minCardPlatformVersion": 2000,
        "targetManufacturers": ["vivo", "OPPO", "xiaomi", "honor"],
        "sizes": ["2x1"],
        "deviceTypeList": ["phone","watch"]
      },
      "cards/card_two": {
        "name": "卡片2",
        "description": "这是一个快应用卡片",
        "component": "index",
        "features": [
          {
            "name": "system.network"
          },
          {
            "name": "system.router"
          }
        ],
        "minCardPlatformVersion": 2000,
        "targetManufacturers": ["vivo", "OPPO", "xiaomi", "honor"],
        "sizes": ["2x2"],
        "deviceTypeList": ["phone","watch"]
      }
    }
  }
}

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

# 资源引用

卡片所使用的本地资源如图片、多语言配置文件等，需要各自放到卡片的目录下，否则将无法引用。如上述示例cards/card_one所使用到的图片和多语言资源等，需要放置到cards/card_one目录下，放到其他目录下则无效。

# 引入依赖

引入依赖可参考官方文档引入依赖 (opens new window)

←

→