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

個人一些關於小程序的見解和社區框架選型比較，部分觀點取之於社區。

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編譯工具將源代碼分別編譯出能夠在不一樣端（微信小程序、H五、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（包括微信小程序等端能力接口）都有智能的提醒和自動補全，包括接口的參數和返回值。

技術選型與權衡

      小程序社區已經有多個優秀的框架以小程序爲核心對多端適配進行了探索，咱們將各個開發框架的主要特色和特性進行了對比並製成圖表。你們能夠結合團隊技術棧、技術需求以及框架特色、特性進行選型和權衡。

在後續文章中，會帶你們一塊兒用Taro框架來實戰開發小程序。

本文做者：黑馬大前端 cuitianze