准入条件

在进行快应用开发前，请先完成如下准备工作：

在华为开发者联盟上注册成为开发者，并完成实名认证，详细参见“账号注册认证”。
完成开发环境的搭建，包括在PC上安装华为快应用IDE、在测试手机安装调试运行在车机上快应用的加载器，详细参见“安装开发工具”。
在HarmonyOS 开发者中心（以下简称开发者中心）上完成快应用的创建，详细参见“创建快应用”。

开发车机快应用

[h2]创建项目

打开华为快应用IDE，在欢迎页选择“新建项目 > 快应用”，选择“车机”，点击“下一步”。
根据待开发快应用的内容，选择合适的模板，点击“下一步”。
- Hello World：生成车机快应用项目最基础的项目结构。
- 横屏示例：生成适用于横屏的车机快应用项目最基础的项目结构。
填写项目信息后，点击“确定”。
- 应用名称：应用名称，用于在桌面图标、应用市场等处显示。例如：QuickAppDemo。
- 应用包名：发布的快应用为以.rpk为后缀的文件，此处即定义发布后的包名。推荐采用com.company.module的格式，例如：com.huawei.quickappdemo。
- 工作空间：项目工程存储路径。

[h2]编辑代码

配置manifest.json文件中 minPlatformVersion 为1040，config的 designWidth 设置为车机的屏幕宽度。
在左侧工程目录选择相应的工程文件，参考快应用规范进行快应用基础功能的开发。
快应用规范包括：
- 框架
- 组件索引中车机支持的组件
- API索引中车机支持的API
除了基础功能的开发，您还可以根据需要实现更多功能。
- 以卡片的形式在车机上展示应用信息，请参见“开发车机卡片”。
- 使快应用在不同厂商不同尺寸的车机上都有良好的展示效果，请参见“响应式布局”。

开发车机卡片（可选）

卡片是一种新的服务形态，以可交互的卡片形式直接将服务或内容展示给用户。

[h2]新建卡片项目

打开华为快应用IDE，在欢迎页选择“新建项目 > 卡片”，选择“车机”，点击“下一步”。
根据待开发的内容，选择合适的模板，点击“下一步”。
填写项目信息后，点击“确定”。
- 项目名称：工程名称，用于指定工程文件夹名称。
- 包名：发布的快应用为以.rpk为后缀的文件，此处即定义发布后的包名。推荐采用com.company.module的格式，例如：com.huawei.carddemo。
- 卡片名称：卡片的名称，卡片提交审核时使用。
- ID：卡片的唯一标识。
- 卡片路径：卡片目录路径。
  
  已在manifest.json中配置过的路径，不可作为新建卡片的路径。
  
  例如：manifest.json中path配置了/c1，则不能在src/c1路径新建卡片。需更改文件夹或者新建文件夹，如src/c2。
- 卡片文件名：项目中的卡片文件名称。
- 最小平台版本号：非必填，默认1000，用于平台版本管理。
- 工作空间：项目工程存储路径。

[h2]新建卡片

打开卡片项目，有两种方式新建卡片：
- 菜单选择“文件 > 新建卡片”。
- 左侧资源管理器中，在src文件夹上右键选择“新建卡片”。
选择一个卡片模板，点击“下一步”。
设置卡片参数，点击“确定”。
- 卡片名称：卡片的名称，卡片提交审核时使用。
- ID：卡片的唯一标识。
- 卡片路径：卡片目录路径。
  
  已在manifest.json中配置过的路径，不可作为新建卡片的路径。
  
  例如：manifest.json中path配置了/c1，则不能在src/c1路径新建卡片。需更改文件夹或者新建文件夹，如src/c2。
- 卡片文件名：项目中的卡片文件名称。
- 最小平台版本号：非必填，默认1000，用于平台版本管理。

新建卡片成功后，可在manifest.json文件中看到卡片的相关配置。

[h2]配置车机卡片

在下拉窗口选择“编辑配置”进入配置界面。
选择对应卡片，选择卡片运行平台，点击“配置”，设置卡片发布的地区和分辨率。
选择“启动参数”页签，设置卡片的宽度和传入的启动参数。配置完成后，点击“确定”。

响应式布局（可选）

为了使同一个快应用在不同厂商不同尺寸的车机上都有良好的展示效果，完成功能开发后，可以对快应用进行响应式布局处理。

[h2]尺寸转换

配置manifest.json文件。
1. minPlatformVersion配置为1045。
```
"minPlatformVersion": 1045,
```
2. 修改config节点下的designWidth属性为device-width。
```
"config": {
    "designWidth": "device-width"
},
```
对项目文件中ux、css文件设置尺寸的地方进行换算，转换公式为：新尺寸 = 旧尺寸*真实宽度/designWidth。
以某11寸车机为例，分辨率1152*1184，屏幕密度为1.125，则真实宽度为 1152/1.125=1024。

当原designWidth为1152时，原来 font-size:60 px 转换后变成 font-size:53.3 px。

当原designWidth为750时，原来 font-size:60 px 转换后变成 font-size:81.9 px。

也可以下载 convert工具对项目文件进行批量转换，运行命令如下：

java -jar convert.jar -root “d:\quickapp\proj” -formats "ux;css" -oldDesignWidth 750 -destScreenDps 360

750替换为原始配置的宽度，360替换为屏幕的真实宽度。

[h2]动态布局

由于不同厂商车机横屏竖屏宽度差别较大，配置device-width且尺寸转换之后，可能仍然无法兼顾多种屏幕显示效果，此时可以使用MediaQuery进行动态布局，详细请参见“MediaQuery响应式布局能力”。例如需要区分1024宽度和1280宽度屏幕，可用以下代码实现：

@media screen and (min-width: 0) and (max-width: 1079) {
    .list {
        columns: 2;
    }
    .subtitle {
        font-size: 30px;
        width: 60px;
    }
    /*此处可以根据需要修改组件样式*/
    }
    @media screen and (min-width: 1080) and (max-width: 2159) {
    .list {
        columns: 4;
    }
    .subtitle {
        font-size: 20px;
        width: 40px;
    }
    /*此处可以根据需要修改组件样式*/}
}

[h2]实现建议

响应式布局实现的重要一步在于分割点的划分，即不同宽度范围，我们建议根据常见屏幕宽度按照以下区间划分屏幕范围。

开发者也可以在此基础上根据实际需求修改或者增加新的划分条件，以达到目标效果。

序号	宽（dp）	高（dp）	DP区间（宽度）
1	860	645	800-960
2	878	1024	800-960
3	912	540	800-960
4	960	500	800-960
5	994	559	960-1120
6	1024	1053	960-1120
7	1078	405	960-1120
8	1280	480	1120-1280
9	1280	720	1120-1280
10	1345	624	1280以上

[h2]示例代码

@media screen and (max-width: 959) {
    .list {
        columns: 3;
        flex-direction: column;
    }
    .subtitle{
        font-size: 36px;
        width: 512px;
        height:50px;
        background-color:#0000ff;
        text-align: center;
        color: #00ff00;
    }
}
@media screen and (min-width: 960) and (max-height:1119) {
    .list {
        columns: 4;
        flex-direction: column;
    }
    .subtitle{
        font-size: 48px;
        width: 512px;
        height:50px;
        background-color:#add8e6;
        text-align: center;
        color: #ffff00;
    }
}
@media screen and (min-width: 1120) and (max-height:1279) {
    .list {
        columns: 5;
        flex-direction: column;
    }
    .subtitle{
        font-size: 60px;
        width: 512px;
        height:50px;
        background-color:#fafad2;
        text-align: center;
        color: #ff0000;
    }
}
@media screen and (min-height: 1279) {
    .list {
        columns: 6;
        flex-direction: column;
    }
    .subtitle{
        font-size: 72px;
        width: 512px;
        height:50px;
        background-color:#daa520;
        text-align: center;
        color: #00ff00;
    }
}

在宽度1024dp的屏幕显示效果：