Taro 1.1 釋出，全面支援微信/百度/支付寶 小程式

凹凸實驗室發表於2018-11-06

在9月16日的掘金小程式大會上，Taro 正式釋出了 1.0 版本。

作為一個多端統一開發框架，Taro 1.0 版本為廣大開發者帶來了許多激動人心的特性，幫助開發者們更方便快捷地開發多端應用。

前進的腳步沒有停下，歷時一個多月，Taro 1.1 版本正式來襲！

從 1.0 到 1.1，期間產生了 500 餘次 Commit，釋出了 23 個版本，Taro 一直保持高速的迭代頻率，只為不斷打磨，為它注入更多優秀的特性，讓更多開發者受益。

Taro 1.1 正式來襲

更豐富的平臺轉換支援

自從微信小程式誕生以來，小程式的優勢大家有目共睹，各大網際網路廠商開始摩拳擦掌，紛紛佈局小程式領域，其中勢頭最勁的當屬百度智慧小程式和支付寶小程式。對於前端而言，既是機遇，因為平臺愈多，帶來的機會愈多；也是挑戰，因為不同的平臺總會各有差異，為每個平臺維護一份程式碼，成本顯然太高。

為了降低多端應用的開發成本，在已全面支援 微信小程式 的基礎上，Taro 在 1.1 版本中加入了對 百度智慧小程式 和 支付寶小程式 的支援。

支援百度智慧小程式

升級到 1.1 版本後，即可獲得將現有專案轉換成百度智慧小程式的能力。

使用如下命令進行百度智慧小程式端編譯預覽及打包：

# npm script
$ npm run dev:swan
$ npm run build:swan
# 僅限全域性安裝
$ taro build --type swan --watch
$ taro build --type swan
# npx 使用者也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan
複製程式碼

選擇百度智慧小程式模式，需要你下載並開啟百度開發者工具，然後在專案編譯完後選擇專案根目錄下 dist 目錄進行預覽。

目前已有使用 Taro 開發的首款百度智慧小程式 “京東好物街” 正式上線，可以使用百度 APP，掃描以下二維碼進行體驗：

Taro 1.1 釋出，全面支援微信/百度/支付寶 小程式

支援支付寶小程式

支付寶小程式的轉換方式與百度智慧小程式一致。

你可以使用如下命令進行支付寶小程式端編譯預覽及打包：

# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 僅限全域性安裝
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 使用者也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay
複製程式碼

選擇支付寶小程式模式，需要你下載並開啟支付寶小程式開發者工具，然後在專案編譯完後選擇專案根目錄下 dist 目錄進行預覽。

新增平臺標識

在加入 百度智慧小程式 和 支付寶小程式 支援後，目前 Taro 已經提供了對 5 個平臺的支援，分別是 微信/百度/支付寶/React Native/H5，為了方便開發者書寫平臺差異化程式碼，Taro 為每個平臺提供了平臺標識，並可以通過 process.env.TARO_ENV 來獲得，其取值分別如下

  • weapp，代表微信小程式
  • h5，代表 H5
  • rn，代表 React Native
  • swan，代表百度智慧小程式，1.1 版本新增
  • alipay，代表支付寶小程式，1.1 版本新增

開放多端 UI 庫打包能力

在 1.0 版本中，Taro 的 build 命令新增了 --ui 引數，來將按照一定規則組織的程式碼打包成可以在 Taro 中使用的多端 UI 庫。 並且，基於這一功能，Taro 推出了首個可以跨多端使用的多端 UI 庫 Taro UI。

為了完善 Taro 生態，擴充套件 Taro 社群，在 1.1 版本中開放了多端 UI 庫的打包能力，並提供了詳細的開發指南。

同時 Taro 也提供了官方的多端 UI 庫示例，這是一個完整規範的 UI 庫開發例子，包含必要的專案改造以及測試套件，基於這個示例，開發者可以快速地開發一個多端 UI 庫專案。

還有更多

在 1.0 版本中，Taro 提供了對 微信小程式、H5 以及 React Native 的支援，而 1.1 版本，在原有支援的基礎之上，對每一個平臺進行不斷完善，讓其更加豐富完整。

微信小程式

  • F 呼叫 this.setState 時，JSON Diff 演算法 Bug 修復
  • F 修復 this.setState 回撥裡再呼叫 this.setState 的 Bug
  • A 新增 componentWillPreload 生命週期，用於資料預載入
  • A 支援在同一作用域對 JSX 賦值
  • F 多層 Map 迴圈巢狀包含條件判斷時問題修復
  • F 中文字元被編譯成 unicode 碼問題修復
  • F 三元表示式解析問題修復
  • A 提升字串模板的效能

H5

  • A H5 支援分包配置
  • F 修復 H5 後臺頁面依然執行生命週期的問題
  • F 修復 PUT 、DELETE 等請求 body 為物件時無法傳送 body 的問題
  • A 增加 setTabBarStyle 與 setTabBarItem API
  • A 增加 arrayBufferToBase64 與 base64ToArrayBuffer API
  • A 編譯打包支援將公共 npm 包抽離成 lib 庫

React Native

  • A 支援 TypeScript
  • F 修復專案初始化後 less 編譯報錯
  • A 新增 config.window.navigationStyle 配置
  • A 新增 showNavigationBarLoading 與 hideNavigationBarLoading API
  • A 增加 arrayBufferToBase64 與 base64ToArrayBuffer API
  • F 修復樣式支援警告
  • A watch 模式時程式碼按需編譯
  • F 修復同一資料夾下多個JS檔案樣式引用錯誤
  • F app.json 的 expo 配置改為可覆蓋
  • A 支援 Taro.pxTransform
  • F iconPath 和 selectedPath 的為同一個路徑導致的重複引用的報錯
  • A 在 config 中新增 rn 的 expo 配置
  • A 支援 deviceRatio 自定義

更完整的功能迭代記錄請參閱 CHANGELOG

未來規劃

Taro 將會繼續保持高效迭代，以滿足日益增長的多端開發需求

目前已經確認的開發計劃可以參見 Taro 版本開發計劃。

小程式轉 Taro 程式碼開啟內測

值得注意的是，激動人心的小程式轉 Taro 程式碼功能已經開發完成，進入內測階段，可以通過如下命令安裝到 canary 版本，進行體驗

$ npm i -g @tarojs/cli@canary
複製程式碼

歡迎針對這一功能，提供寶貴意見，意見入口請戳 ???

同時，為了幫助 Taro 更好地成長，讓 Taro 更好地回饋所有開發者，歡迎您給 Taro 提供優秀想法，或者直接貢獻程式碼。

相關文章