快应用端开发流程

1.3 beta 版本开始支持快应用开发本章节主要讲解快应用端 环境安装-开发-调试-打包-发布 原理及流程

简介

Taro 支持快应用端开发

安装

搭建快应用环境

手机安装调试器

调试器是一个 Android 应用程序,下载调试器 APK 详见资源下载

在手机上安装并打开调试器,按钮功能如下:

  • 扫码安装:配置 HTTP 服务器地址,下载 rpk 包,并唤起平台运行 rpk 包
  • 本地安装:选择手机文件系统中的 rpk 包,并唤起平台运行 rpk 包
  • 在线更新:重新发送 HTTP 请求,更新 rpk 包,并唤起平台运行 rpk 包
  • 开始调试:唤起平台运行 rpk 包,并启动远程调试注意:若打开调试器无法点击按钮,请升级手机系统到最新版本或安装平台预览版

安装成功后如下图所示:

img

手机安装平台预览版

较新的系统版本中内置平台正式版,开发调试平台新功能可使用平台预览版

平台预览版存在以下优缺点:

  • 优点:迭代速度快,可立即体验平台新功能
  • 缺点:实现与真实的运行环境存在差异,对厂商服务和第三方服务的支持存在缺陷平台预览版是一个 Android 应用程序,下载平台预览版 APK 详见资源下载

下载安装成功后,在手机调试器中点击切换运行平台至org.hapjs.mockup,即可在平台预览版上安装运行 rpk 包

开发调试

在手机上安装完调试器后,就可以执行 Taro 的快应用编译命令开始编译了

  1. $ taro build --type quickapp --watch

在编译完成后会遇到如下输出结果

快应用端开发流程 - 图2

Taro 在将代码编译完后,会自动下载快应用的容器模板,同时安装好相关的依赖,随后就会自动启动快应用的服务,此时,只需要使用手机上安装的调试器扫码就能直接在手机上进行调试了。

使用 IDE

https://doc.quickapp.cn/tutorial/ide/overview.html

快应用配置

在 Taro 编译适配快应用需要进行一些配置,适配的具体原因可以参考Taro和快应用配置差异,通过在项目根目录下添加 project.quickapp.json 大体的配置项可以参考快应用官方文档的 manifest 配置,而 Taro 中支持以下配置:

属性类型默认值必填描述
packageString-应用包名,确认与原生应用的包名不一致,推荐采用 com.company.module 的格式,如:com.example.demo
nameString-应用名称,6 个汉字以内,与应用商店保存的名称一致,用于在桌面图标、弹窗等处显示应用名称
iconString-应用图标,提供 192x192 大小的即可
versionNameString-应用版本名称,如:"1.0"
versionCodeInteger-应用版本号,从1自增,推荐每次重新上传包时versionCode+1
minPlatformVersionInteger-支持的最小平台版本号,兼容性检查,避免上线后在低版本平台运行并导致不兼容;如果不填按照内测版本处理
featuresArray-接口列表,绝大部分接口都需要在这里声明,否则不能调用,详见每个接口的文档说明
configObject-系统配置信息,详见说明
subpackages 1040+Object-定义并启用分包加载,详见说明

可以看出,相比于快应用官方的配置项,Taro 中支持的配置项缺少了 routerdisplay 配置,这是因为这两项配置在 Taro 编译时会根据用户代码直接生成,不再需要额外配置。

而为了让用户更加方便进行快应用相关配置,Taro 增加了一些额外的配置项,例如:

customPageConfig 是为了让用户可以为每个页面配置快应用独有的 filterlaunchMode 它直接配置在 project.quickapp.json 中,它是一个对象的类型,其 key 值即为页面路径,与 入口文件configpages 数组中配置的页面路径保持一致,常见例子如下

  1. {
  2. "customPageConfig": {
  3. "pages/index/index": {
  4. "filter": {
  5. "<action>": {
  6. "uri": "<pattern>"
  7. }
  8. },
  9. "launchMode": "standard"
  10. }
  11. }
  12. }

一个典型的 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-areamovable-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富文本richtextnodes属性做一次AST映射到变量中,丢失space属性
text文本text少有的比微信丰富的组件,模拟之后丢失所有属性

表单组件

名称功能说明对应快应用组件Taro如何模拟
button按钮用div模拟,丢失所有属性
checkbox多选项目用input模拟,丢失color属性,仿真度高
checkbox-group多项选择器,内部由多个checkbox组成用div模拟,丢失所有属性
editor富文本编辑器,可以对图片、文字进行编辑用richtext模拟,丢失所有属性
form表单用div模拟,丢失所有属性
input输入框input丢失passwd、bindinput等属性
label用来改进表单组件的可用性labelfor属性对应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组件仿真
adBanner 广告用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等,随着快应用不断完善,相信这些差异会逐渐补齐的。