从 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 中支持以下配置：

可以看出，相比于快应用官方的配置项，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开发微信小程序的话，想直接转到快应用是很难的（还有样式的严格限制），看到这里你可能会对快应用有点失望，但是快应用在手机端的原生渲染性能是微信小程序不能比的，下面的快应用特色组件会让你刮目相看：

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等，随着快应用不断完善，相信这些差异会逐渐补齐的。