1. 前言
從16年微信小程序內測的時候到如今，微信小程序用時間與實踐證明了自己的變革與價值，微信小程序的規則也在開發社區的影響下變得更加完善。
對于第三方企業來講，微信為自己帶來了巨大的流量入口和低成本的拉新渠道，如滴滴、美團、京東等公司都推出了自己的小程序。像共享單車類的企業，微信是絕大多數用戶的二維碼掃碼入口，小程序為其帶來了巨大的流量入口，如摩拜單車。
對于小程序開發者來說，小程序的開發生態不斷地在完善，從最開始的原生框架，到騰訊自己開發類vue規范的wepy，再到美團開發近vue寫法的mpvue，再到最近O2實驗室剛推出的遵循React規范的Taro。
所有到現在，有多種開發微信小程序的方式，主要有原生，wepy，mpvue，Taro，4種框架，對比分析也是在這4種方式中。
2. 框架對比與分析
面對4種開發方式，我們到底應該選擇哪種呢?首先當然是對各種框架進行對比分析，從開發工具便利上，開發方式上，應用狀態管理上，社區活躍程度上(開源UI庫等)
2.1 開發工具工程化上
開發工具上：都需要微信開發者工具來調式，對于寫代碼的話，尤其我們前端開發來講，21世紀最有良心的編輯工具無疑是微軟出品的vscode，代碼高亮的話，都需要相應的配置，具體怎么配置，可以網上搜(或者看各個開發方式的官方文檔)。
工程化上: 微信小程序本身對工程化幾乎沒有任何的支持，要原生框架支持工程化的話，需要自己動手搭建很多工程化上的東西-他人搭建的demo wxapp-redux-starter，wepy有自己的wepy-cli，而mpvue和taro則很好的支持我們熟悉的webpack靈活定制(像語法檢查，熱更新等等)
2.2 開發方式上
原生開發：
我們需要全新學習小程序的抒寫格式，目前版本模板中支持 slot，但是不支持 npm 包。原生不支持 css 預處理器，但是 vsCode 中 Easy WXLESS 插件可以將 less 文件自動轉換為 wxss 文件；
wepy：
我們需要熟悉 vue 和 wepy 兩種語法，支持 slot 組件內容分發插槽，支持 npm 包，支持 css 預處理器；
mpvue：
我們需要熟悉 vue ，目前版本（v1.0.13）不支持 slot ，支持 npm 包，支持 css 預處理器；
taro:
采用React語法標準，支持 JSX 書寫，讓代碼更具表現性，Taro暫不支持直接渲染children。
對于mpvue和taro開發方式上，對vue和react語法的支持程度和差異上具體可以看各自的官方文檔。
2.3 應用狀態管理上
原生開發：
沒有提供原生的應用狀態管理方式，但是可以將 redux or mobx 引入到項目中。
小程序原生提供了一種聲明使用全局變量，具體寫法可查看官網文件作用域。
wepy：
可以將 redux or mobx 引入到項目中。
mpvue：
可以直接使用 vuex 做應用狀態管理，在用mpvue初始化時可以選擇是否需要vuex.
taro：
支持redux，對于不那么大的應用也提供了全局變量的解決方式，redux引入和全局變量解決方式，具體可以查看官網-使用redux，官網-最佳實踐。
2.4 社區活躍程度上
原生開發：
微信提供了一個專門的社區供小程序開發者學習交流開發者社區。對UI庫來說，原生小程序UI庫還是蠻多的，例如官方的weui, 有贊的zanui-weapp，高顏值、好用、易擴展的微信小程序 UI 庫。
其它3個框架：
對于wepy，mpvue，taro這種開源項目來說，想學習交流那肯定是在github的issue上啊，github上的star數和項目出現時間成正比，wepy : 12k多star, mpvue: 11k多star, taro: 6k多star，從趨勢看，mpvue大有趕超wepy的趨勢。
對于wepy，mpvue它們的github上都有些開源的UI庫，而taro由于最近推出，UI需要自己去擼。
2.5 對比匯總表格
對比表格
3. 基于公司業務和團隊思考
對于公司業務，肯定是要快速迭代開發的，而原生框架對工程化上支持并不友好，可以排除在外。
對于我們現有大部分前端相關的產品業務，不管是pc端的管理后臺，還是移動端的h5頁面都是基于react+webpack構建開發的，UI上都是采用螞蟻的組件庫，
團隊成員對react語法，相關生態都是相當熟悉的，在這一點上，如果選擇wepy或者mpvue的話，都需要我們學習新的知識點，wepy和vue語法，采用taro的話，團隊成員完全可以快速上手開發微信小程序，然而在框架成熟度上來講，wepy和mpvue出現時間較taro早，很多坑都已經踩完了，上手開發遇到問題的話，都有前人的解決方案，而taro最近才推出，這個框架的目標很偉大，就是用 React 的開發方式編寫一次代碼，生成能運行在微信小程序、H5、React Native 等的應用，在開發上肯定會遇到各種各樣的問題。
綜上，不管選擇哪種框架，對我們的都很有挑戰，而我個人認為，選擇taro挑戰更大，因為taro最近才推出，很多特性功能都在計劃開發中，像對第三方組件庫的支持。在我們開發公司業務時，肯定不能因為框架某些功能特性沒開發完，缺陷沒解決而導致開發業務的進度停歇不前。這就會促使我們去深入學習taro這個框架底層，技術原理-Taro 技術揭秘：taro-cli，從根本上解決問題，例如，沒有UI庫的話，可以自己開發一套，taro框架上的缺陷遲遲沒解決的話，自己可以嘗試解決，弄好之后可以想o2團隊提pr，為開源項目做貢獻，有必要的話，也完全可以自己維護一套taro框架的源碼。做到這些，在我們學習前端架構和前端工程上的路上絕對是很有幫組的。
4. 開發感想
目前我自己只嘗試了mpvue和taro來開發，因為一個是類vue，一個是類react，而如今vue, react的生態可以說是相當完善的，所以這兩個框架在開發體驗上都非常完美。
4.1 mpvue
在開始用mpvue開發時，要先熟悉vue語法，對于我這種沒用過vue，用jsx語法習慣的人來說，去看vue的官方文檔剛開始有點不適應，慢慢的寫著寫著就適應了。看看代碼體驗下：
<pre style="margin: 0px; padding: 0px; color: rgb(28, 31, 33); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(248, 250, 252); text-decoration-style: initial; text-decoration-color: initial;"><template>
<div class="fontColor">hello,{{title}}</div></template><script>export default {
data() { return { title: 'hello,mpvue',
};
},
};</script><style scoped>.fontColor{ color: red;
}</style></pre>
想想這種結構還是蠻熟悉的，不就是當初入門時寫的html,css,js在同一個文件的結構嗎。
在用mpvue開發遇到問題時，看mpvue文檔和vue文檔，還有微信小程序官方文檔都可以快速定位輕松解決。
4.2 taro
而在用taro開發時，雖然是我熟悉的react語法，但是寫起來的時候，還是遇到非常多的問題，語法上還是有些差異的，差異上可以看官方文檔-關于 JSX 支持程度補充說明，那時候遇到問題我都會在issue上提問，o2團隊的開發者也很認真的解答我的問題和taro框架上的缺陷。
對于轉化為h5頁面上，兩者都支持，但是mpvue要轉化成h5的話，要手動做的事還是蠻多的Mpvue 小程序轉 Web 實踐總結。而taro轉化成h5頁面就簡單多了，只要遵循taro規定的語法，基礎組件都從tarojs/components引入，就可以根據命令轉化，可以看看下面兩張圖，一個是小程序的，一個轉化為h5的。
小程序
h5
從圖中整體感覺來看，taro轉化成h5在ui和體驗上并沒有多大差別，可以說taro這個框架還是蠻強大的。(可能這只是個小demo，在轉化成h5的過程中，沒有遇到小程序和h5頁面不一樣或者報錯的情況，但是從github issue上看，編譯成h5還是有很多問題的，希望o2團隊能及時解決)。
taro版本demo項目地址: geekjc-taro
5. 總結
不管選用那種框架，對微信小程序的基礎知識，基礎概念還是要花時間去學習的(看官方文檔或者微信小程序全面實戰，架構設計 && 躲坑攻略)，因為很多問題，采用原生的去解決更好，組件也是。
