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

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

簡(jiǎn)介

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

安裝

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

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

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

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

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

安裝成功后如下圖所示：

手機(jī)安裝平臺(tái)預(yù)覽版

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

平臺(tái)預(yù)覽版存在以下優(yōu)缺點(diǎn)：

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

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

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

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

$ taro build --type quickapp --watch

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

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

使用 IDE

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

快應(yīng)用配置

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

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

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

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

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

一個(gè)典型的 project.quickapp.json 配置參考例子

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

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

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

視圖容器

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

基礎(chǔ)組件

表單組件

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

導(dǎo)航

媒體組件

地圖

畫布

開放能力

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

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

2.新鮮的氣泡組件popup

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

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

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

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