第三方小程序框架對比

WEPY 騰訊團隊開源的一款類vue語法規範的小程序框架,借鑑了Vue的語法風格和功能特性,支持了Vue的諸多特徵，比如父子組件、組件之間的通信、computed屬性計算、wathcer監聽器、props傳值、slot槽分發，還有很多高級的特徵支持：Mixin混合、攔截器等; 也是歷史最悠久的第三方小程序開發框架，官方背書，vue風格下小程序開發的不二之選。
mpvue 美團團隊開源項目，雖然github的star不少，但是個人覺得項目基本處於停滯狀態，基本沒有人維護的狀態，也算是一手好牌，打爛了～學習可以看看，不建議使用。還有一些類似於uni-app之類的“商業開源”項目也建議考慮清楚在使用，畢竟項目中途換框架還是很讓人鬱悶的～
taro 我們今天的主角，react風格下的“唯一”選擇，京東這些年比較成功的一個開源項目，issue的處理還是很及時的。

taro介紹

多端統一開發框架，支持用 React 的開發方式編寫一次代碼，生成能運行在微信/百度/支付寶/字節跳動/ QQ 小程序/快應用/H5/React Native 等的應用。（官方介紹）

Taro 1.x 版本自2018年9月份發佈

Taro 2.x 正式版本2020年1月發佈

Taro 在不到兩年的時間裡一直保持高速成長，發佈了多個具有重大意義的版本，讓Taro成為如今一個功能完善，擁有眾多忠實擁躉的多端統一開發框架。

雖然taro框架號稱一次編寫，多端運行，不過在實際操作過程中還是很不建議大家這樣搞的，受限於各端的實際情況，可以通用一些組件尚且不易，更不要說通用整個項目了。

taro2.0變化

編譯構建

這部分也是taro2.0要更新大版本的主要原因，原來 Taro CLI 的編譯構建系統是他們自己搞的，後來發現很多時候自己搞的輪子實在是沒有現成的輪子好用，所以轉投了Webpack。雖然新對於我們一般的小項目而言變化不大，不過為以後的擴展提供了更好的社區兼容性。

異步編程調整

Taro 2.0 中開啟 async functions 支持不再需要安裝 @tarojs/async-await，而是直接通過 babel 插件來獲得支持。

在項目根目錄下安裝包 babel-plugin-transform-runtime 和 babel-runtime。

<code>yarn add babel-plugin-transform-runtime --dev
yarn add babel-runtime/<code>

隨後修改項目 babel 配置，配置插件 babel-plugin-transform-runtime。

<code>babel: {
  sourceMap: true,
  presets: [['env', { modules: false }]],
  plugins: [
    'transform-decorators-legacy',
    'transform-class-properties',
    'transform-object-rest-spread',
    ['transform-runtime', {
      "helpers": false,
      "polyfill": false,
      "regenerator": true,
      "moduleName": 'babel-runtime'
    }]
  ]
}/<code>

Webpack帶來的新功能

為小程序編譯添加 Plugin。當我們要把打包後的小程序進行發佈的時候，可能會遇到小程序過大的問題，那麼我們肯定迫切希望可以看到到底是哪些文件的大小造成了這個影響，我們可以通過使用 webpack-bundle-analyzer 插件對打包體積進行分析。

在 mini.webpackChain 中添加如下配置。

<code>const config = {
  mini: {
    webpackChain (chain, webpack) {
      chain.plugin('analyzer')
        .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
    }
  }
}/<code>

然後就可以看到熟悉的界面了

遺憾

taro2.0在底層雖然做了很多的調整，但是遺憾的是，項目實際開發中能用的上的功能並不多，更多的是為了以後taro的發展鋪路，這也讓更多人更加期待3.0的發佈。

最佳實踐

隨著社區和react生態以及vscode的發展，為了獲得更好的項目協作體驗，降低協作難度，我個人比較推薦的技術棧組合是taro + typescript + mobx4。

在使用typescript的時候需要注意，taro暫時還沒有升級到babel7.0，可選鏈暫時還沒有辦法使用

<code>// 可選鏈寫法暫時無法正常使用
a?.b
a?()

// 還需要繼續使用短路的方式判定

a && a.b
a && a()

// mobx5 在很多舊機器上會出一些問題，如果沒有特殊需求暫時不建議直接使用mobx5/<code>

坑

其實做為一個新生事物，taro的坑還是挺多的。不過本著遇坑填坑的原則，大家在一般情況下遇到坑直接區issue裡面找一下，一般都有解決方案。需要額外說明的是，taro只能說是使用了react的風格，並沒有完全實現react的所有功能，受限於運行環境，很多東西包括生命週期，語法糖和變量作用域的使用都需要大家一步一步嘗試之後再使用，不要完全照搬react的那一套。

特別是在jsx中使用map遍歷生成子節點時，變量作用域有可能和你想象的並不一樣。

分享到:

閱讀更多 IT拾荒老人 的文章

關鍵字: 程序開發神兵 TypeScript