我與小程式的故事以及小程式框架選型

我的一些關於小程式的看法和社群框架選型比較，部分觀點取之於社群。

Vue重度使用者也許會在wepy和mpvue中徘徊，React和TypeScript重度使用者在現階段當之無愧Taro首選。

      這是一篇我與小程式的故事，但小程式的過去卻與我無關。

      曾經與她錯失交臂，但願一切還來得及。

      畢業後的兩年內，一直在創業公司工作，但自己卻錯過了很多創業風口，如區塊鏈和小程式，唯獨跟風了機器學習，但這是一條漫長的路，需要潛心學術否則很難做出成績，我曾在現公司AI Labs的某部門工作過一段時間，深知這一點。

      區塊鏈和小程式在如今看來，無疑在過去的一年裡都是程式設計師創業的風口，甚至可以說是風向標。

      我之前待過的一家創業公司，主要做股票行業投顧平臺的業務，React Native承載了所有面向使用者的APP產品需求，整個前後端技術團隊最多的時候也只有11人，雖然是一家很小的創業公司，但兩位創始人中，CEO曾是奇虎360 Web產品及商業產品業務線副總經理，聯合創始人是某大型券商高管，因此公司對產品的技術也曾多次摸索，數字貨幣涉及區塊鏈，智慧投顧涉及機器學習，量化投資涉及程式化交易，機會很多，但說實話要做好這些方向實在是太難，尤其16年國內股票市場一直處於熊市的低谷中徘徊。

因思想，而光華；

因變革，而機遇；

因蛻變，而不凡。

      在16年小程式內測的時候就聽說過小程式，但真正接觸小程式是17年1月10日，某券商給我當時在的創業公司兩個名額，我有幸受邀參加了在北京大學光華管理學院舉辦的”小程式，大變革-2017年小程式全國巡迴沙龍“，小程式的正式釋出僅僅是在一天之前的1月9日。

      小程式的誕生，就一路伴隨著讚賞和爭議不斷，從釋出上線時候不被大多數人看好，我便是其中之一，到如今的逐漸火熱，甚至可以說是如日中天，在移動網際網路創業領域一騎絕塵，17年後半年到如今的創業黑馬。小程式剛出來的時候，我可能和大多數人的想法一樣，中大型的網際網路公司不可能去擁抱騰訊生態圈，受限於騰訊爸爸苛刻的遊戲規則。

      然而在這一年裡，小程式用時間與實踐證明了自己的變革與價值，微信小程式的規則也在開發社群的影響下變得更加完善。

      對於第三方企業來講，微信為自己帶來了巨大的流量入口和低成本的拉新渠道，如滴滴、美團、京東等公司都推出了自己的小程式。像共享單車類的企業，微信是絕大多數使用者的二維碼掃碼入口，小程式為其帶來了巨大的流量入口，如摩拜單車、青桔單車、街兔電單車小程式。

      對於小程式開發者來說，小程式的開發生態不斷地在完善，從最開始的原生框架，到類vue規範的wepy，再到近vue寫法的mpvue，再到最近剛推出的遵循React規範的Taro。這期間，也曾有過類React的小程式框架Labrador，但小程式正式釋出沒多久就幾乎停止維護了。

      真正讓我感到驚喜的是Taro這個小程式框架，雖然推出的時間最短，但腳手架中自帶TypeScript編譯選項，這無疑是企業級小程式應用的首選框架，no，我認為，哪怕只是一個單人維護的小型應用，TypeScript也是必備的，可以讓開發者避免一些低階錯誤的bug，以及讓程式碼的可維護性更高。

      Taro 是凹凸實驗室打造的一套遵循 React 語法規範的多端統一開發框架，是React系開發者的福音。

      Taro官方稱“只要書寫一套程式碼，通過Taro編譯工具將原始碼分別編譯出可以在不同端（微信小程式、H5、APP端[React Native]）執行的程式碼，同時Taro還提供了開箱即用的語法檢測和自動補全等功能，有效地提升了開發體驗和開發效率”。

Taro所具備的優勢：

• NPM包管理系統

• ES6+語法

• 自由的資源引用

• CSS前處理器和後處理器（SCSS、Less、PostCSS）

• 靈活的JSX寫法

• TypeScript

      在我看來，wepy和mpvue都想盡可能地提供一套類vue的寫法，但小程式的執行環境始終和Web端存在著差異，不可能完美地支援vue的所有指令及過濾器等等。開發者不但要去踩小程式自身的坑，還要去記住wepy和mpvue到底有哪些vue的特性不能使用，這著實是叫人頭大啊。

      React和原生的小程式開發方式比更加現代化、規範化、元件化，JSX比Vue的字串模板也具有更強的表現力。

JSX

render () {  return (    <View className=`index`>      {this.state.list.map((item, idx) => (        <View key={idx}>{item}</View>      ))}      <Button onClick={this.func}>方法</Button>    </View>  )}複製程式碼

小程式模板

<view class="index">  <view wx:key={idx} wx:for="{{list}}" wx:for-item="item" wx:for-index="idx">{{item}}</view>  <view bindtap="func">方法</view></view>複製程式碼

      JSX 其實本質上就是 JS，我們可以在裡面寫任意的邏輯程式碼，這樣一來就比字串模板的表現力與操作性要強多了，況且，小程式的字串模板功能比較羸弱，只有一些比較基本的功能。

      Taro有著和React完全一致的API和元件化系統。在 Taro 中，不用像原生小程式一樣區分什麼是 App 元件，什麼是 Page 元件，什麼是 Component 元件，Taro 全都是 Component 元件，並且和 React 的生命週期幾乎完全一致。

      Taro 和 React 一樣，同樣使用宣告式的 JSX 語法。相比起字串的模板語法，JSX 在處理精細複雜需求的時候會更得心應手，示例程式碼如下：

Taro的其他幾項優點：

• 具備良好的開發效率和體驗：編輯器對Taro的支援和React幾乎是一樣的。

• 型別安全和執行時檢測：可以使用TypeScript或Flow來對程式碼的可靠性進一步增強。

• 高效的自動補全和 ES6+ 語法：Taro 的所有 API（包括微信小程式等端能力介面）都有智慧的提醒和自動補全，包括介面的引數和返回值。

技術選型與權衡

      小程式社群已經有多個優秀的框架以小程式為核心對多端適配進行了探索，我們將各個開發框架的主要特點和特性進行了對比並製成圖表。大家可以結合團隊技術棧、技術需求以及框架特點、特性進行選型和權衡。

本文作者：黑馬大前端 cuitianze