快应用端开发流程
从 1.3 beta 版本开始支持快应用开发
本章节主要讲解快应用端 环境安装-开发-调试-打包-发布 原理及流程
简介
Taro 支持快应用端开发
安装
搭建快应用环境
手机安装调试器
调试器是一个 Android 应用程序，下载调试器 APK 详见资源下载
在手机上安装并打开调试器，按钮功能如下：
- 扫码安装：配置 HTTP 服务器地址，下载 rpk 包，并唤起平台运行 rpk 包
- 本地安装：选择手机文件系统中的 rpk 包，并唤起平台运行 rpk 包
- 在线更新：重新发送 HTTP 请求，更新 rpk 包，并唤起平台运行 rpk 包
- 开始调试：唤起平台运行 rpk 包，并启动远程调试 注意：若打开调试器无法点击按钮，请升级手机系统到最新版本或安装平台预览版
安装成功后如下图所示：
手机安装平台预览版
较新的系统版本中内置平台正式版，开发调试平台新功能可使用平台预览版
平台预览版存在以下优缺点：
- 优点：迭代速度快，可立即体验平台新功能
- 缺点：实现与真实的运行环境存在差异，对厂商服务和第三方服务的支持存在缺陷 平台预览版是一个 Android 应用程序，下载平台预览版 APK 详见资源下载
下载安装成功后，在手机调试器中点击切换运行平台至org.hapjs.mockup，即可在平台预览版上安装运行 rpk 包
开发调试
在手机上安装完调试器后，就可以执行 Taro 的快应用编译命令开始编译了
$ taro build --type quickapp --watch
在编译完成后会遇到如下输出结果
Taro 在将代码编译完后，会自动下载快应用的容器模板，同时安装好相关的依赖，随后就会自动启动快应用的服务，此时，只需要使用手机上安装的调试器扫码就能直接在手机上进行调试了。
使用 IDE
https://doc.quickapp.cn/tutorial/ide/overview.html
快应用配置
在 Taro 编译适配快应用需要进行一些配置，适配的具体原因可以参考Taro和快应用配置差异，通过在项目根目录下添加 project.quickapp.json 大体的配置项可以参考快应用官方文档的 manifest 配置，而 Taro 中支持以下配置：
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| package | String | - | 是 | 应用包名，确认与原生应用的包名不一致，推荐采用 com.company.module 的格式，如：com.example.demo |
| name | String | - | 是 | 应用名称，6 个汉字以内，与应用商店保存的名称一致，用于在桌面图标、弹窗等处显示应用名称 |
| icon | String | - | 是 | 应用图标，提供 192x192 大小的即可 |
| versionName | String | - | 否 | 应用版本名称，如："1.0" |
| versionCode | Integer | - | 是 | 应用版本号，从1自增，推荐每次重新上传包时versionCode+1 |
| minPlatformVersion | Integer | - | 否 | 支持的最小平台版本号，兼容性检查，避免上线后在低版本平台运行并导致不兼容；如果不填按照内测版本处理 |
| features | Array | - | 否 | 接口列表，绝大部分接口都需要在这里声明，否则不能调用，详见每个接口的文档说明 |
| config | Object | - | 是 | 系统配置信息，详见说明 |
subpackages 1040+ | Object | - | 否 | 定义并启用分包加载，详见说明 |
可以看出，相比于快应用官方的配置项，Taro 中支持的配置项缺少了 router 与 display 配置，这是因为这两项配置在 Taro 编译时会根据用户代码直接生成，不再需要额外配置。
而为了让用户更加方便进行快应用相关配置，Taro 增加了一些额外的配置项，例如：
customPageConfig 是为了让用户可以为每个页面配置快应用独有的 filter 与 launchMode 它直接配置在 project.quickapp.json 中，它是一个对象的类型，其 key 值即为页面路径，与 入口文件 中 config 下 pages 数组中配置的页面路径保持一致，常见例子如下
{
"customPageConfig": {
"pages/index/index": {
"filter": {
"<action>": {
"uri": "<pattern>"
}
},
"launchMode": "standard"
}
}
}
一个典型的 project.quickapp.json 配置参考例子
Taro组件和快应用组件差异剖析
Taro已经可以编译出可在微信/百度/支付宝/字节跳动小程序、H5、React-Native运行的代码，近期也增加了快应用的支持，那必不可少的一步就是组件库的转换，众所周知小程序开发离不开三大要素——界面表现（结构、外观）层、逻辑处理层与系统接口层（网络、存储与媒体等），其中界面结构指的就是组件库，那立足于微信小程序的Taro组件和快应用组件有何异同？Taro是如何处理这些差异的？且看下文.
小程序官网放出来了一个体验小程序用来展示它的组件 / API / 云开发能力，快应用官方也出了一个能力展示的开源项目sample,乍看好像差不多，其实两者之间的差异还是很多的，由于Taro组件基本上是微信小程序组件变为首字母大写之后形成的，下面以微信小程序组件为基准，看看快应用的组件能力如何，首先看视图容器：
视图容器
| 微信小程序组件 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| cover-image | 覆盖在原生组件之上的图片视图 | 无 | 用image模拟，丢失bindload和binderror事件 |
| cover-view | 覆盖在原生组件之上的文本视图 | 无 | 用div模拟，丢失scroll-top属性 |
| movable-area | movable-view的可移动区域 | 无 | 用div模拟，丢失scale-area属性 |
| movable-view | 可移动的视图容器，在页面中可以拖拽滑动 | 无 | 用div模拟，丢失所有属性 |
| scroll-view | 可滚动视图区域 | 无 | 用div模拟，丢失所有属性 |
| swiper | 滑块视图容器 | swiper | 指示点颜色可通过样式补齐、丢失previous-margin、easing-function等属性， |
| swiper-item | 仅可放置在swiper组件中，宽高自动设置为100% | 无 | 用text或image模拟，丢失item-id属性 |
| view | 视图容器 | 无 | 用div模拟，丢失所有属性 |
再来看基础组件和表单组件：
基础组件
| 微信小程序组件 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| icon | 图标 | 无 | 用div模拟，丢失type\size\color属性 |
| progress | 进度条 | progress | 只保留了percent属性 |
| rich-text | 富文本 | richtext | nodes属性做一次AST映射到变量中，丢失space属性 |
| text | 文本 | text | 少有的比微信丰富的组件，模拟之后丢失所有属性 |
表单组件
| 名称 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| button | 按钮 | 无 | 用div模拟，丢失所有属性 |
| checkbox | 多选项目 | 无 | 用input模拟，丢失color属性，仿真度高 |
| checkbox-group | 多项选择器，内部由多个checkbox组成 | 无 | 用div模拟，丢失所有属性 |
| editor | 富文本编辑器，可以对图片、文字进行编辑 | 无 | 用richtext模拟，丢失所有属性 |
| form | 表单 | 无 | 用div模拟，丢失所有属性 |
| input | 输入框 | input | 丢失passwd、bindinput等属性 |
| label | 用来改进表单组件的可用性 | label | for属性对应target，但不支持子组件模拟 |
| picker | 从底部弹起的滚动选择器 | picker | 丢失省市选择器类型，转换规则随type变化，模拟复杂 |
| picker-view | 嵌入页面的滚动选择器 | 无 | 用div模拟，丢失所有属性 |
| picker-view-column | 滚动选择器子项 | 无 | 用div模拟，丢失所有属性 |
| radio | 单选项目 | 无 | 用input模拟，丢失color属性，仿真度高 |
| radio-group | 单项选择器，内部由多个 radio 组成 | 无 | 用div模拟，丢失所有属性 |
| slider | 滑动选择器 | slider | 丢失color、block-size等属性 |
| switch | 开关选择器 | switch | 丢失color、disabled等属性 |
| textarea | 多行输入框 | textarea | 只保留了placeholder、maxlength属性 |
最后是不常用到的导航、媒体、地图和画布组件对比
导航
| 名称 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| functional-page-navigator | 仅在插件中有效，用于跳转到插件功能页 | 无 | 用div模拟，丢失所有属性 |
| navigator | 页面链接 | 无 | 用div模拟，丢失所有属性 |
媒体组件
| 名称 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| audio | 音频 | 无 | div+slider+接口方式模拟，仅保留基本功能 |
| camera | 系统相机 | camera | 仅保留device-position、flash、binderror属性 |
| image | 图片 | image | 仅保留src属性 |
| live-player | 实时音视频播放 | 无 | 用div模拟，丢失所有属性 |
| live-pusher | 实时音视频录制 | 无 | 用div模拟，丢失所有属性 |
| video | 视频 | video | 只保留src、autoplay、poster、controls和muted属性 |
地图
| 名称 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| map | 地图 | map | 仿真度较高，属性可以做到一一映射 |
画布
| 名称 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| canvas | 画布 | canvas | 同名但一个是组件，一个是通过API模拟的，只能用div模拟 |
开放能力
| 名称 | 功能说明 | 对应快应用组件 | Taro如何模拟 |
|---|---|---|---|
| web-view | 承载网页的容器 | 无 | 通过web组件仿真 |
| ad | Banner 广告 | 无 | 用div模拟，丢失所有属性 |
| official-account | 公众号关注组件 | 无 | 用div模拟，丢失所有属性 |
| open-data | 用于展示微信开放的数据 | 无 | 用div模拟，丢失所有属性 |
从上面的数据来看，快应用支持的组件还很不完善，如果之前使用Taro开发微信小程序的话，想直接转到快应用是很难的（还有样式的严格限制），看到这里你可能会对快应用有点失望，但是快应用在手机端的原生渲染性能是微信小程序不能比的，下面的快应用特色组件会让你刮目相看：
1.使用list+list-item实现流畅的滚动列表
2.新鲜的气泡组件popup
3.想实现盖楼功能? 看看这个堆叠组件stack
4.快应用也有tabbar，tabs / tab-bar/tab-content三剑客
5.外卖应用必不可少的星级评分组件rating
以上就是Taro组件和快应用组件的一个概览对比，总结来说，如果想实现多端一致，请尽量在Taro里面使用仿真度高的组件，比如Swiper、Image、Text、Input、Label、Picker、Video、Map、Camera、Canvas、Slider、Textarea等，随着快应用不断完善，相信这些差异会逐渐补齐的。