快应用开发流程

秒速五厘米 2023-06-28 11:23 17阅读 0赞

华为开发者联盟 > HMS Core > 资源中心 > 快应用

开发流程

![676a973273e0482abca0af1b83a9288a2291850756405989788.png][]

<table> 
 <tbody> 
  <tr> 
   <td>开发步骤</td> 
   <td>参考文档</td> 
   <td>说明</td> 
  </tr> 
  <tr> 
   <td>注册成为开发者</td> 
   <td><a href="https://developer.huawei.com/consumer/cn/devservice/doc/20300" rel="nofollow">注册成为开发者</a></td> 
   <td>在华为开发者联盟上注册帐号，用于后续创建应用、申请服务和提交审核。</td> 
  </tr> 
  <tr> 
   <td>创建车机快应用</td> 
   <td><a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_prepare_create_app" rel="nofollow">创建车机快应用</a></td> 
   <td>创建车机快应用后，生成用于唯一标识快应用的APP ID。</td> 
  </tr> 
  <tr> 
   <td>下载、安装华为快应用IDE和加载器</td> 
   <td><a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devprepare_install_tool" rel="nofollow">安装开发工具</a></td> 
   <td>●&nbsp;快应用IDE：用于生成签名文件（包括证书文件和私钥文件）和证书指纹，以及快应用的开发、调试和打包。<br>●&nbsp;快应用加载器：调试车机快应用时，需要使用运行快应用的加载器。<br>●&nbsp;快应用加载器PC助手：用于独立运行rpk包。</td> 
  </tr> 
  <tr> 
   <td>生成证书指纹</td> 
   <td><a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastgame_prepare_generate_fingerprint" rel="nofollow">生成证书指纹</a></td> 
   <td>●&nbsp;生成的签名文件：用于车机快应用打包，务必保管好，一旦丢失，将无法找回。<br>●&nbsp;生成的证书指纹：用于申请服务时配置使用。</td> 
  </tr> 
  <tr> 
   <td>申请服务</td> 
   <td><a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_prepare_config_hms" rel="nofollow">申请帐号服务</a>（可选）</td> 
   <td>如果接入华为帐号，需要申请帐号服务。</td> 
  </tr> 
  <tr> 
   <td>开发车机快应用</td> 
   <td>开发车机快应用</td> 
   <td>参考“<a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_devguide_component_index" rel="nofollow">组件索引</a>”和“<a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_api_reference_index" rel="nofollow">API索引</a>”中车机设备支持的组件和API，开发车机快应用。</td> 
  </tr> 
  <tr> 
   <td>准备资质材料，提交上架审核</td> 
   <td><a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_toapprove_quality_doc" rel="nofollow">准备资质文件</a><br><a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_toapprove_rule" rel="nofollow">了解上架规则</a><br><a href="https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_toapprove" rel="nofollow">提交审核</a></td> 
   <td>提交审核后，一般1~2个工作日将获得审核结果。</td> 
  </tr> 
 </tbody> 
</table>

准备开发环境

将测试手机与PC连接成功，手机需打开“开发者模式”。参考“[车机模拟器安装使用指导][Link 1]”，创建并启动模拟器。

开发车机快应用

**步骤 1**  打开IDE，点击“文件”菜单，在下拉菜单中选择“新建项目 > 新建快应用项目”（或者点击欢迎使用界面的“新建项目”），开启新建项目的窗口。

**步骤 2**  填入“项目名称”、“rpk包名”，在“工作空间”选择代码存放的硬盘路径，在“模板”选项中选择Hello World模板（窗口右侧可以看到已选择模板的概览），点击“创建”按钮，完成新建项目。

![17bde92846ac474098dde18d2e78b403-8089637458196878924.png][]

**注意**：

rpk包名的命名规则如下，长度3~100，支持小写英文字母和数字，推荐采用com.company.module格式，不要包含demo、test。

**步骤 3**  配置manifest.json文件中 minPlatformVersion 为1040，config的 designWidth 需要设置为车机的屏幕宽度。

**步骤 4**  在左侧工程目录选择相应的工程文件，进行工程代码的编辑。  
车机快应用可以使用的组件和API请参见“[组件索引][Link 2]”和“[API索引][API]”。

**步骤 5**  开发过程中，点击 ![b1ff87079b9c40f484e28b9f9add17c83635639323814445394.png][]，预览效果。

**步骤 6**  开发完成后，菜单选择“构建 > 构建快应用”，在项目的dist目录下生成对应的rpk包。

开发车机卡片

新建卡片工程

**步骤 1**  点击“新建”菜单，选择“新建项目 > 新建卡片项目”。

**步骤 2**  填写卡片工程名称，工程包名，选择合适的卡片模板，以及卡片的配置信息。

![854bf5be7f0f402b9da2691651c76e85-8781817190079002185.png][]

**步骤 3**  点击“确定”按钮，完成工程创建。

新建卡片

**步骤 1**  选择新建卡片入口。

● 在左侧资源管理器中，在src文件夹上右键选择“New Widget”。

![0f61399816ab4f54b38214ff8fb4b1013176986169492946064.png][]

● 在菜单栏“文件”下选择“新建卡片”，打开新建卡片窗口。

![602a266f98d34335832771a890cfb32b6699088403441199329.png][]

● 在资源管理器，点击“+”号选择“新建卡片”。

![398355d6cfed49a58b1e31858a3e49dc3786347118239814063.png][]

**步骤 2**  选择卡片类型，填写相关信息。  
填写卡片名称、ID、卡片文件名等参数，选择一个卡片选项。点击“高级选项”可选填其中参数。填写完毕后点击“确定”。

![95103f5acdd74b3faaacc0dbb1fc0b60-5773794356364746352.png][]

新建卡片成功后，可在manifest.json和launch.json文件中看到widgets的相关配置。  
为提升代码兼容性，创建卡片时，创建页面文件统一使用.ux后缀；打开工程，自动将原有卡片 wux 后缀文件修改为 ux 后缀。

![9f294b61c07341a39c1ccfe14809cabf3176469960875262762.png][]

注意：已在manifest.json中配置过的路径，不可作为新建卡片的文件夹路径 。例如：

![6f46764625b54d31b316e24226ae1f02-7222104389232990497.png][]

“path”:”/c1”已存在，则不能选择”src/c1/”文件夹新建卡片，需要更改文件夹或者新建文件夹，如更改为”src/c2”/或”src/c1/d2/”。

配置车机卡片

**步骤 1**  点击菜单栏下拉选项“配置”，进入卡片列表页面。

![2e375987b01745e2b0832859cdbfbf8c-9167489051863512095.png][]

**步骤 2**  进入卡片列表，选择对应卡片，设置签名类型以及卡片的宽度，点击卡片名称右侧的 + 进行参数配置。

![d7b807c93afd48b78f54e60be0eee6f2-6305401328657435259.png][]

**步骤 3**  添加卡片参数，完成后保存。

![f3e34303d0934092bfe263b167883a268263759739439538836.png][]

**步骤 4**  编辑卡片参数值，完成后点击保存。

![6e887026949f40f9a944058f32fc98d93205142138133126490.png][]

注： 目前支持在新建卡片页和manifest.json中配置卡片参数。

在车机上运行卡片

**步骤 1**  点击上方菜单栏下拉选项，选择要运行的卡片。

![d6fc41dfa612461682146e381063d3ee-2605333929091751530.png][]

**步骤 2**  点击 实时编译/调试/Inspect 按钮即可调测运行卡片。

**注意**：

在车机上运行卡片需要设置manifest.json中orientation为landscape，以展示横屏效果。

构建卡片工程

开发完成后，点击“构建快应用”，生成对应的包含卡片的rpk。

![e834e812bba94ab7899d3733c14f284f8118901825737934422.png][]

运行调试

快应用调试和卡片调试步骤相同。

**步骤 1**  选择要调试的文件。

![e94518242d0346b693e436e8ac0c4d27-5164053738653535248.png][]

**步骤 2**  点击 ![6a888b944dd34bef896da7736d7db16c6756011230438366150.png][] 开始调试。

**步骤 3**  在IDE的控制台查看调试服务启动过程中输出的日志信息。

![a107d45cea144be2b32ce753aca703928679566281555579350.png][]

**步骤 4**  调试进程启动完成，弹出调试窗口。开发者可以设置断点，查看日志。

断点  
卡片：类似chrome devtool，点击Sources > Runtime.js > webpack://，点击打开需要调试的页面  
快应用：类似chrome devtool，点击Sources > Runtime.js > source，点击打开需要调试的页面  
设置断点，重新启动调试进程，即可断点调试。

日志：点击“Console”页签，即可查看日志信息。

![65c684fd6a0e46af878b46a284673e23-6774363551090012889.png][]

**步骤 5**  再次点击调试按钮，重新启动调试。  
点击停止按钮，调试窗口关闭。

测试车机快应用与卡片

连接设备

打开快应用加载器PC助手，通过usb连接真机或者连接模拟器。PC助手详细介绍请参见“[华为快应用加载器PC助手使用指导][PC]”。

![e5aea4b477b1487a8aaefac6ab7f1e14-301558998096660600.png][]

推送快应用

**步骤 1**  选择下载的加载器，在连接设备上进行安装。如果设备已安装加载器，将自动识别。

![18e9d00b20474588ac689bcf6b0f40a5-3978106285245674542.png][]

**步骤 2**  选择打包的快应用rpk包，点击“加载”。

![3d6ae11b0d5c4a5f96a293724095d9be-8526634285510122800.png][]

**步骤 3**  在连接设备上查看快应用运行效果。

推送卡片

**步骤 1**  选择下载的加载器，在连接设备上进行安装。（如果已经安装，此步骤可以忽略）

![9e0970ae0ae745e09a7108d0ca8a240f-8293269182299601118.png][]

**步骤 2**  选择打包的卡片rpk包，点击“加载”。

![0d57e04a04b846edb869a0b920e662e64868547098215059521.png][]

**步骤 3**  选择对应的卡片，填写卡片参数后，点击“加载”。

![7c969c8c978c4b66a873de5299d514e1-8567511571364551437.png][]

**步骤 4**  在连接设备上查看卡片运行效果。

打包正式版本

**步骤 1**  在快应用IDE中，点击菜单“构建”，选择“打包正式版本”。

![ca87d3172b49464697cddc86a80af55c599218317870607936.png][]

**步骤 2**  如果没有签名，右下角弹出创建签名文件的提示，点击“创建签名”。

![618a917764d24ac09c9094c9b149dd542518920957121474244.png][]

**步骤 3**  填写相关信息，点击“创建”。

![e136ba12041f460390da9976c8659f02-7387390804297243955.png][]

**步骤 4**  创建签名后，开始构建，构建成功后将在工程的dist目录下生成正式的rpk包。

FAQ

Q：手机上安装车机快应用加载器是否会与原来手机快应用的加载器冲突？

会有冲突，不能同时安装在一个手机上。

Q：手机上的效果和真的车机效果一样么？

效果相同，只是屏幕大小有差别。

Q：车机快应用是否只有华为支持，快应用联盟没有统一的规范？

对，当前只有华为支持。

Q：车机快应用发布到哪个平台？

和手机快应用相同，现在通过AppGallery Connect上传，详细请参见“[提交审核][Link 3]”。

[676a973273e0482abca0af1b83a9288a2291850756405989788.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/676a973273e0482abca0af1b83a9288a2291850756405989788.png
[Link 1]: https://developer.huawei.com/consumer/cn/service/hms/doc/fastapp_fastapp_IDE_car_operguide.html
[17bde92846ac474098dde18d2e78b403-8089637458196878924.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/17bde92846ac474098dde18d2e78b403-8089637458196878924.png
[Link 2]: https://developer.huawei.com/consumer/cn/service/hms/doc/fastapp_fastapp_devguide_component_index_temp.html
[API]: https://developer.huawei.com/consumer/cn/service/hms/doc/fastapp_fastapp_api_reference_index_temp.html
[b1ff87079b9c40f484e28b9f9add17c83635639323814445394.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/b1ff87079b9c40f484e28b9f9add17c83635639323814445394.png
[854bf5be7f0f402b9da2691651c76e85-8781817190079002185.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/854bf5be7f0f402b9da2691651c76e85-8781817190079002185.png
[0f61399816ab4f54b38214ff8fb4b1013176986169492946064.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/0f61399816ab4f54b38214ff8fb4b1013176986169492946064.png
[602a266f98d34335832771a890cfb32b6699088403441199329.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/602a266f98d34335832771a890cfb32b6699088403441199329.png
[398355d6cfed49a58b1e31858a3e49dc3786347118239814063.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/398355d6cfed49a58b1e31858a3e49dc3786347118239814063.png
[95103f5acdd74b3faaacc0dbb1fc0b60-5773794356364746352.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/95103f5acdd74b3faaacc0dbb1fc0b60-5773794356364746352.png
[9f294b61c07341a39c1ccfe14809cabf3176469960875262762.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/9f294b61c07341a39c1ccfe14809cabf3176469960875262762.png
[6f46764625b54d31b316e24226ae1f02-7222104389232990497.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/6f46764625b54d31b316e24226ae1f02-7222104389232990497.png
[2e375987b01745e2b0832859cdbfbf8c-9167489051863512095.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/2e375987b01745e2b0832859cdbfbf8c-9167489051863512095.png
[d7b807c93afd48b78f54e60be0eee6f2-6305401328657435259.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/d7b807c93afd48b78f54e60be0eee6f2-6305401328657435259.png
[f3e34303d0934092bfe263b167883a268263759739439538836.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/f3e34303d0934092bfe263b167883a268263759739439538836.png
[6e887026949f40f9a944058f32fc98d93205142138133126490.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/6e887026949f40f9a944058f32fc98d93205142138133126490.png
[d6fc41dfa612461682146e381063d3ee-2605333929091751530.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/d6fc41dfa612461682146e381063d3ee-2605333929091751530.png
[e834e812bba94ab7899d3733c14f284f8118901825737934422.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/e834e812bba94ab7899d3733c14f284f8118901825737934422.png
[e94518242d0346b693e436e8ac0c4d27-5164053738653535248.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/e94518242d0346b693e436e8ac0c4d27-5164053738653535248.png
[6a888b944dd34bef896da7736d7db16c6756011230438366150.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/6a888b944dd34bef896da7736d7db16c6756011230438366150.png
[a107d45cea144be2b32ce753aca703928679566281555579350.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/a107d45cea144be2b32ce753aca703928679566281555579350.png
[65c684fd6a0e46af878b46a284673e23-6774363551090012889.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/65c684fd6a0e46af878b46a284673e23-6774363551090012889.png
[PC]: https://developer.huawei.com/consumer/cn/service/hms/doc/fastapp_fastapp_pc_assistant_guide.html
[e5aea4b477b1487a8aaefac6ab7f1e14-301558998096660600.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/e5aea4b477b1487a8aaefac6ab7f1e14-301558998096660600.png
[18e9d00b20474588ac689bcf6b0f40a5-3978106285245674542.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/18e9d00b20474588ac689bcf6b0f40a5-3978106285245674542.png
[3d6ae11b0d5c4a5f96a293724095d9be-8526634285510122800.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/3d6ae11b0d5c4a5f96a293724095d9be-8526634285510122800.png
[9e0970ae0ae745e09a7108d0ca8a240f-8293269182299601118.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/9e0970ae0ae745e09a7108d0ca8a240f-8293269182299601118.png
[0d57e04a04b846edb869a0b920e662e64868547098215059521.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/0d57e04a04b846edb869a0b920e662e64868547098215059521.png
[7c969c8c978c4b66a873de5299d514e1-8567511571364551437.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/7c969c8c978c4b66a873de5299d514e1-8567511571364551437.png
[ca87d3172b49464697cddc86a80af55c599218317870607936.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/ca87d3172b49464697cddc86a80af55c599218317870607936.png
[618a917764d24ac09c9094c9b149dd542518920957121474244.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/618a917764d24ac09c9094c9b149dd542518920957121474244.png
[e136ba12041f460390da9976c8659f02-7387390804297243955.png]: https://obs.cn-north-2.myhwclouds.com/hms-ds-wf/b/e136ba12041f460390da9976c8659f02-7387390804297243955.png
[Link 3]: https://developer.huawei.com/consumer/cn/service/hms/catalog/fastapp.html?page=fastapp_fastapp_toapprove