快應(yīng)用端開發(fā)流程

從 1.3 beta 版本開始支持快應(yīng)用開發(fā)本章節(jié)主要講解快應(yīng)用端 環(huán)境安裝-開發(fā)-調(diào)試-打包-發(fā)布 原理及流程

簡介

Taro 支持快應(yīng)用端開發(fā)

安裝

搭建快應(yīng)用環(huán)境

手機安裝調(diào)試器

調(diào)試器是一個 Android 應(yīng)用程序，下載調(diào)試器 APK 詳見資源下載

在手機上安裝并打開調(diào)試器，按鈕功能如下：

• 掃碼安裝：配置 HTTP 服務(wù)器地址，下載 rpk 包，并喚起平臺運行 rpk 包
• 本地安裝：選擇手機文件系統(tǒng)中的 rpk 包，并喚起平臺運行 rpk 包
• 在線更新：重新發(fā)送 HTTP 請求，更新 rpk 包，并喚起平臺運行 rpk 包
• 開始調(diào)試：喚起平臺運行 rpk 包，并啟動遠(yuǎn)程調(diào)試 注意：若打開調(diào)試器無法點擊按鈕，請升級手機系統(tǒng)到最新版本或安裝平臺預(yù)覽版

安裝成功后如下圖所示：

手機安裝平臺預(yù)覽版

較新的系統(tǒng)版本中內(nèi)置平臺正式版，開發(fā)調(diào)試平臺新功能可使用平臺預(yù)覽版

平臺預(yù)覽版存在以下優(yōu)缺點：

• 優(yōu)點：迭代速度快，可立即體驗平臺新功能
• 缺點：實現(xiàn)與真實的運行環(huán)境存在差異，對廠商服務(wù)和第三方服務(wù)的支持存在缺陷 平臺預(yù)覽版是一個 Android 應(yīng)用程序，下載平臺預(yù)覽版 APK 詳見資源下載

下載安裝成功后，在手機調(diào)試器中點擊切換運行平臺至org.hapjs.mockup，即可在平臺預(yù)覽版上安裝運行 rpk 包

開發(fā)調(diào)試

在手機上安裝完調(diào)試器后，就可以執(zhí)行 Taro 的快應(yīng)用編譯命令開始編譯了

$ taro build --type quickapp --watch

在編譯完成后會遇到如下輸出結(jié)果

Taro 在將代碼編譯完后，會自動下載快應(yīng)用的容器模板，同時安裝好相關(guān)的依賴，隨后就會自動啟動快應(yīng)用的服務(wù)，此時，只需要使用手機上安裝的調(diào)試器掃碼就能直接在手機上進(jìn)行調(diào)試了。

使用 IDE

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

快應(yīng)用配置

在 Taro 編譯適配快應(yīng)用需要進(jìn)行一些配置，適配的具體原因可以參考Taro和快應(yīng)用配置差異，通過在項目根目錄下添加 project.quickapp.json 大體的配置項可以參考快應(yīng)用官方文檔的 manifest 配置，而 Taro 中支持以下配置：

可以看出，相比于快應(yīng)用官方的配置項，Taro 中支持的配置項缺少了 router 與 display 配置，這是因為這兩項配置在 Taro 編譯時會根據(jù)用戶代碼直接生成，不再需要額外配置。

而為了讓用戶更加方便進(jìn)行快應(yīng)用相關(guān)配置，Taro 增加了一些額外的配置項，例如：

customPageConfig 是為了讓用戶可以為每個頁面配置快應(yīng)用獨有的 filter 與 launchMode 它直接配置在 project.quickapp.json 中，它是一個對象的類型，其 key 值即為頁面路徑，與 入口文件 中 config 下 pages 數(shù)組中配置的頁面路徑保持一致，常見例子如下

{
  "customPageConfig": {
    "pages/index/index": {
      "filter": {
        "<action>": {
          "uri": "<pattern>"
        }
      },
      "launchMode": "standard"
    }
  }
}

一個典型的 project.quickapp.json 配置參考例子

Taro組件和快應(yīng)用組件差異剖析

? Taro已經(jīng)可以編譯出可在微信/百度/支付寶/字節(jié)跳動小程序、H5、React-Native運行的代碼，近期也增加了快應(yīng)用的支持，那必不可少的一步就是組件庫的轉(zhuǎn)換，眾所周知小程序開發(fā)離不開三大要素——界面表現(xiàn)（結(jié)構(gòu)、外觀）層、邏輯處理層與系統(tǒng)接口層（網(wǎng)絡(luò)、存儲與媒體等），其中界面結(jié)構(gòu)指的就是組件庫，那立足于微信小程序的Taro組件和快應(yīng)用組件有何異同？Taro是如何處理這些差異的？且看下文.

? 小程序官網(wǎng)放出來了一個體驗小程序用來展示它的組件 / API / 云開發(fā)能力，快應(yīng)用官方也出了一個能力展示的開源項目sample,乍看好像差不多，其實兩者之間的差異還是很多的，由于Taro組件基本上是微信小程序組件變?yōu)槭鬃帜复髮懼笮纬傻模旅嬉晕⑿判〕绦蚪M件為基準(zhǔn)，看看快應(yīng)用的組件能力如何，首先看視圖容器：

視圖容器

再來看基礎(chǔ)組件和表單組件：

基礎(chǔ)組件

表單組件

最后是不常用到的導(dǎo)航、媒體、地圖和畫布組件對比

導(dǎo)航

媒體組件

地圖

畫布

開放能力

從上面的數(shù)據(jù)來看，快應(yīng)用支持的組件還很不完善，如果之前使用Taro開發(fā)微信小程序的話，想直接轉(zhuǎn)到快應(yīng)用是很難的（還有樣式的嚴(yán)格限制），看到這里你可能會對快應(yīng)用有點失望，但是快應(yīng)用在手機端的原生渲染性能是微信小程序不能比的，下面的快應(yīng)用特色組件會讓你刮目相看：

1.使用list+list-item實現(xiàn)流暢的滾動列表

2.新鮮的氣泡組件popup

3.想實現(xiàn)蓋樓功能? 看看這個堆疊組件stack

4.快應(yīng)用也有tabbar，tabs / tab-bar/tab-content三劍客

5.外賣應(yīng)用必不可少的星級評分組件rating

以上就是Taro組件和快應(yīng)用組件的一個概覽對比，總結(jié)來說，如果想實現(xiàn)多端一致，請盡量在Taro里面使用仿真度高的組件，比如Swiper、Image、Text、Input、Label、Picker、Video、Map、Camera、Canvas、Slider、Textarea等，隨著快應(yīng)用不斷完善，相信這些差異會逐漸補齊的。