Taro 3.1 版本正式發佈：面向定製化的小程序開發

自 Taro 3.1 體驗版推出後，咱們不斷地根據社區的反饋意見對 3.1 版本進行打磨。主要改進了開放式架構、引入了 CustomWrapper 組件以解決性能問題、提出了原生小程序漸進式混合使用 Taro 的解決方案。html

經歷了 12 個 beta 版本後，終於迎來了 3.1 正式版🎉node

1、Highlights

1. 開放式架構

近年來業界推出的小程序平臺愈來愈多，但 Taro 核心維護的平臺只有 6 個，所以經常有同窗提出能不能支持某某平臺的 Feature Request。react

基於目前的架構，支持一個新的平臺開發複雜度高，同時社區也難以參與貢獻。git

爲此咱們把 Taro 打形成爲一個開放式框架，經過端平臺插件能支持任意小程序平臺：github

插件開發者無需修改 Taro 項目源碼，便可編寫出一個端平臺插件。
插件使用者只需安裝、配置端平臺插件，便可把代碼編譯到指定平臺。

基於開放式架構，咱們新增了一些有趣的插件，也十分期待你們利用它施展創意。sql

新增的插件：

插件	功能
@tarojs/plugin-platform-weapp-qy	編譯企業微信小程序
@tarojs/plugin-platform-alipay-dd	編譯釘釘小程序
@tarojs/plugin-platform-alipay-iot	編譯支付寶 IOT 小程序
@tarojs/plugin-inject	爲全部小程序平臺快速新增 API、組件，調整組件屬性等

2. 新增小程序性能優化組件 CustomWrapper

Taro3 使用 <template> 進行渲染，全部的 setData 都由頁面對象調用。若是頁面結構比較複雜，應用更新的性能就會降低。typescript

爲此咱們引入了一個基礎組件 CustomWrapper，它的做用是建立一個原生自定義組件。對後代節點的 setData 將由此自定義組件進行調用，達到局部更新的效果，從而提高更新性能。npm

開發者可使用 CustomWrapper 去包裹遇到更新性能問題的組件：json

<CustomWrapper>
  <GoodsList> <Item /> <Item /> // ... </GoodsList>
</CustomWrapper>
複製代碼

更詳細的性能優化原理請見《Taro 助力京喜拼拼項目性能體驗優化》redux

3. 原生小程序漸進式混合使用 Taro 開發

過去咱們對在 Taro 項目中混合使用原生的支持度較高。相反地，對在原生項目中混合使用 Taro 卻沒有過重視。可是市面上有着存量的原生開發小程序，他們接入 Taro 開發的改形成本每每很是大，最後只得放棄混合開發的想法。

通過與京喜拼拼項目的合做，也驅使了咱們更加關注這部分需求。Taro 推出了一套完整的原生項目混合使用 Taro 的方案。

方案主要支持了三種場景：

在原生項目中使用 Taro 開發的頁面。
在原生項目的分包中運行完整的 Taro 項目。
在原生項目中使用 Taro 開發的自定義組件。

但願以上方案能知足打算逐步接入 Taro 開發的同窗。更多意見也歡迎在 Github 上給咱們留言。

4. 擁抱 React 1七、TypeScript 4

4.1. 使用方法

新項目：

模板默認依賴 React 1七、TypeScript 4，能夠直接使用。

舊項目：

手動升級項目依賴：

react: ^17.0.0
react-dom: ^17.0.0
typescript: ^4.1.0
@typescript-eslint/parser: ^4.15.1
@typescript-eslint/eslint-plugin: ^4.15.1

設置 ESLint 配置：

// .eslintrc
module.exports = {
  "extends": ["taro/react"],
  "rules": {
    "react/jsx-uses-react": "off",
    "react/react-in-jsx-scope": "off"
  }
}
複製代碼

4.2. React 默認支持 New JSX Transform

New JSX Transform 讓開發者再也不須要在書寫 JSX 前先引入 React。

若是不但願打開此功能，能夠修改 Babel 配置的 reactJsxRuntime 選項爲 classes：

// babel.config.js
module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      reactJsxRuntime: 'classes'
    }]
  ]
}
複製代碼

4.3. React H5 端默認開啓 fast-refresh

若是不但願打開此功能，能夠修改 Taro 配置和 Babel 配置：

// config/index.js
const config = {
  h5: {
    devServer: {
      hot: false
    }
  }
}

// babel.config.js
module.exports = {
  presets: [
    ['taro', {
      framework: 'react',
      ts: true,
      hot: false
    }]
  ]
}
複製代碼

2、Breakings

1. React

項目的 React 版本必須 >= 16.14.0，或使用 17.0.0+

2. Vue2

修復 Vue2 入口組件生命週期屢次觸發的問題，#7179

用戶編寫的入口組件須要修改以下：

// app.js

// 3.0 中須要建立 Vue 對象
const App = new Vue({})

// 3.1 中只須要返回對象字面量
const App = {}
複製代碼

3. Linaria

使用 Linaria 時，須要修改 linaria.config.js 的內容。

module.exports = {
  rules: [
    {
      action: require("linaria/evaluators").shaker,
    },
    {
      // 此處的正則有改變
      test: /node_modules[\/\\](?!@tarojs)/,
      action: "ignore"
    }
  ]
}
複製代碼

3、特性

組件 View 增長 catchMove 屬性，解決滾動穿透問題。
同步全部內置小程序官方最新的 API、組件能力。

4、問題修復

1. 重要

修復百度小程序渲染問題，#7293。
修復、加強微信小程序轉換爲 Taro 的能力。
優化打包體積。
支付寶小程序支持引用自定義組件。
修復小程序分享 API 在使用 redux 時沒法生效的問題，#7232。

2. 小程序

修復多端文件沒按照 Webpack extension 配置解析的問題，#6786，#7265 。
修復 style 屬性設置失敗的問題，#8678。

3. H5

修復 H5 端 HMR 失效的問題。
支持路由 404 時觸發 App.onPageNotFound，#7474。
修復表單組件 slot 兼容問題，#7363。
修復 View 和 Text 組件多行截斷樣式失敗問題，#7472 #6741。
組件的 style 屬性支持設置 CSS 變量，#7452。

5、升級指南

從 v2.x 升級的同窗須要先按遷移指南進行操做。

從 v3.x 升級的同窗，首先須要安裝 v3.1 的 CLI 工具：

npm i -g @tarojs/cli
複製代碼

而後進入項目，刪除 node_modules、yarn.lock、package-lock.json。

最後把 package.json 文件中 Taro 相關依賴的版本修改成 ^3.1.0，再從新安裝依賴。至此升級結束。

6、將來規劃

得益於 58 技術團隊的全力支持，Taro 3 即將支持 React Native，現已推出 3.2.0 的 Beta 版本，3.2.0 正式版將於本月底推出。歡迎搶先體驗：《增長 React Native 支持的 Taro 3.2.0 版本測試通告》

7、感謝

開源不易，貴在堅持。Taro 團隊衷心感謝各位參與過本項目開源建設的朋友，不管是爲 Taro 提交過代碼、建設周邊生態，仍是反饋過問題，甚至只是茶餘飯後討論、吐槽 Taro 的各位。

現誠摯邀請您與 Taro 官方團隊交流您的使用狀況，有你相伴，Taro更加精彩！問卷地址

最後，特別感謝爲 Taro 從 v3.0 走到 v3.1 貢獻過代碼的各位同窗，不分前後：

@wuchangming
@SyMind
@zhuxianguo
@Songkeys
@vdfor
@ZeroTo0ne
@zhaoguoweiLLHC
@Spencer17x
@wingsico
@w91
@fjc0k
@Leechael
@southorange1228
@alexlees
@cncolder
@rottenpen
@gcxfd
@twocucao
@pengtikui
@kala888
@LengYXin
@iugo
@jin-yufeng
@xuchengzone
@csolin
@xiaoyao96
@baranwang
@fred8617
@huanz
@Cslove
@002huiguo
@jazzqi
@Jetsly
@yuezk
@lukezhange001
@k55k32
@Soul-Stone
@hisanshao
@gjc9620
@younthu
@digiaries
@GoodbyeNJN
@Swordword
@helsonxiao
@Ininit
@atzcl
@taoqf
@Aysnine
@cjz9032
@z3rog
@doublethinkio
@Jackyzm
@ywzou
@koalaink
@mosqlee
@wangjuerong
@kdxcxs
@LiHDong
@ryougifujino
@GitaiQAQ
@logix-o
@CallMeXYZ

歡迎提交你用 Taro 寫的案例：docs.taro.zone/showcase

Taro 公衆號「 Taro社區」，歡迎關注。