我的一些關(guān)于小程序的看法和社區(qū)框架選型比較，部分觀點(diǎn)取之于社區(qū)。

Vue重度使用者也許會(huì)在wepy和mpvue中徘徊，React和TypeScript重度使用者在現(xiàn)階段當(dāng)之無(wú)愧Taro首選。

      這是一篇我與小程序的故事，但小程序的過(guò)去卻與我無(wú)關(guān)。

      曾經(jīng)與她錯(cuò)失交臂，但愿一切還來(lái)得及。

      畢業(yè)后的兩年內(nèi)，一直在創(chuàng)業(yè)公司工作，但自己卻錯(cuò)過(guò)了很多創(chuàng)業(yè)風(fēng)口，如區(qū)塊鏈和小程序，唯獨(dú)跟風(fēng)了機(jī)器學(xué)習(xí)，但這是一條漫長(zhǎng)的路，需要潛心學(xué)術(shù)否則很難做出成績(jī)，我曾在現(xiàn)公司AI Labs的某部門(mén)工作過(guò)一段時(shí)間，深知這一點(diǎn)。

      區(qū)塊鏈和小程序在如今看來(lái)，無(wú)疑在過(guò)去的一年里都是程序員創(chuàng)業(yè)的風(fēng)口，甚至可以說(shuō)是風(fēng)向標(biāo)。

      我之前待過(guò)的一家創(chuàng)業(yè)公司，主要做股票行業(yè)投顧平臺(tái)的業(yè)務(wù)，React Native承載了所有面向用戶(hù)的APP產(chǎn)品需求，整個(gè)前后端技術(shù)團(tuán)隊(duì)最多的時(shí)候也只有11人，雖然是一家很小的創(chuàng)業(yè)公司，但兩位創(chuàng)始人中，CEO曾是奇虎360 Web產(chǎn)品及商業(yè)產(chǎn)品業(yè)務(wù)線副總經(jīng)理，聯(lián)合創(chuàng)始人是某大型券商高管，因此公司對(duì)產(chǎn)品的技術(shù)也曾多次摸索，數(shù)字貨幣涉及區(qū)塊鏈，智能投顧涉及機(jī)器學(xué)習(xí)，量化投資涉及程序化交易，機(jī)會(huì)很多，但說(shuō)實(shí)話(huà)要做好這些方向?qū)嵲谑翘y，尤其16年國(guó)內(nèi)股票市場(chǎng)一直處于熊市的低谷中徘徊。

因思想，而光華；

因變革，而機(jī)遇；

因蛻變，而不凡。

      在16年小程序內(nèi)測(cè)的時(shí)候就聽(tīng)說(shuō)過(guò)小程序，但真正接觸小程序是17年1月10日，某券商給我當(dāng)時(shí)在的創(chuàng)業(yè)公司兩個(gè)名額，我有幸受邀參加了在北京大學(xué)光華管理學(xué)院舉辦的”小程序，大變革-2017年小程序全國(guó)巡回**“，小程序的正式發(fā)布僅僅是在一天之前的1月9日。

      小程序的誕生，就一路伴隨著贊賞和爭(zhēng)議不斷，從發(fā)布上線時(shí)候不被大多數(shù)人看好，我便是其中之一，到如今的逐漸火熱，甚至可以說(shuō)是如日中天，在移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè)領(lǐng)域一騎絕塵，17年后半年到如今的創(chuàng)業(yè)黑馬。小程序剛出來(lái)的時(shí)候，我可能和大多數(shù)人的想法一樣，中大型的互聯(lián)網(wǎng)公司不可能去擁抱騰訊生態(tài)圈，受限于騰訊爸爸苛刻的游戲規(guī)則。

      然而在這一年里，小程序用時(shí)間與實(shí)踐證明了自己的變革與價(jià)值，微信小程序的規(guī)則也在開(kāi)發(fā)社區(qū)的影響下變得更加完善。

      對(duì)于第三方企業(yè)來(lái)講，微信為自己帶來(lái)了巨大的流量入口和低成本的拉新渠道，如滴滴、美團(tuán)、京東等公司都推出了自己的小程序。像共享單車(chē)類(lèi)的企業(yè)，微信是絕大多數(shù)用戶(hù)的二維碼掃碼入口，小程序?yàn)槠鋷?lái)了巨大的流量入口，如摩拜單車(chē)、青桔單車(chē)、街兔電單車(chē)小程序。

      對(duì)于小程序開(kāi)發(fā)者來(lái)說(shuō)，小程序的開(kāi)發(fā)生態(tài)不斷地在完善，從最開(kāi)始的原生框架，到類(lèi)vue規(guī)范的wepy，再到近vue寫(xiě)法的mpvue，再到最近剛推出的遵循React規(guī)范的Taro。這期間，也曾有過(guò)類(lèi)React的小程序框架Labrador，但小程序正式發(fā)布沒(méi)多久就幾乎停止維護(hù)了。

      真正讓我感到驚喜的是Taro這個(gè)小程序框架，雖然推出的時(shí)間最短，但腳手架中自帶TypeScript編譯選項(xiàng)，這無(wú)疑是企業(yè)級(jí)小程序應(yīng)用的首選框架，no，我認(rèn)為，哪怕只是一個(gè)單人維護(hù)的小型應(yīng)用，TypeScript也是必備的，可以讓開(kāi)發(fā)者避免一些低級(jí)錯(cuò)誤的bug，以及讓代碼的可維護(hù)性更高。

      Taro 是凹凸實(shí)驗(yàn)室打造的一套遵循 React 語(yǔ)法規(guī)范的多端統(tǒng)一開(kāi)發(fā)框架，是React系開(kāi)發(fā)者的福音。

      Taro官方稱(chēng)“只要書(shū)寫(xiě)一套代碼，通過(guò)Taro編譯工具將源代碼分別編譯出可以在不同端（微信小程序、H5、APP端[React Native]）運(yùn)行的代碼，同時(shí)Taro還提供了開(kāi)箱即用的語(yǔ)法檢測(cè)和自動(dòng)補(bǔ)全等功能，有效地提升了開(kāi)發(fā)體驗(yàn)和開(kāi)發(fā)效率”。

Taro所具備的優(yōu)勢(shì)：

• NPM包管理系統(tǒng)

• ES6+語(yǔ)法

• 自由的資源引用

• CSS預(yù)處理器和后處理器（SCSS、Less、PostCSS）

• 靈活的JSX寫(xiě)法

• TypeScript

      在我看來(lái)，wepy和mpvue都想盡可能地提供一套類(lèi)vue的寫(xiě)法，但小程序的運(yùn)行環(huán)境始終和Web端存在著差異，不可能完美地支持vue的所有指令及過(guò)濾器等等。開(kāi)發(fā)者不但要去踩小程序自身的坑，還要去記住wepy和mpvue到底有哪些vue的特性不能使用，這著實(shí)是叫人頭大啊。

      React和原生的小程序開(kāi)發(fā)方式比更加現(xiàn)代化、規(guī)范化、組件化，JSX比Vue的字符串模板也具有更強(qiáng)的表現(xiàn)力。

JSX

 

 

 

render () {  return (          {this.state.list.map((item, idx) => (        {item}      ))}this.func}>方法      )}復(fù)制代碼

 

小程序模板

 

 

 

<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>復(fù)制代碼

 

      JSX 其實(shí)本質(zhì)上就是 JS，我們可以在里面寫(xiě)任意的邏輯代碼，這樣一來(lái)就比字符串模板的表現(xiàn)力與操作性要強(qiáng)多了，況且，小程序的字符串模板功能比較羸弱，只有一些比較基本的功能。

      Taro有著和React完全一致的API和組件化系統(tǒng)。在 Taro 中，不用像原生小程序一樣區(qū)分什么是 App 組件，什么是 Page 組件，什么是 Component 組件，Taro 全都是 Component 組件，并且和 React 的生命周期幾乎完全一致。

      Taro 和 React 一樣，同樣使用聲明式的 JSX 語(yǔ)法。相比起字符串的模板語(yǔ)法，JSX 在處理精細(xì)復(fù)雜需求的時(shí)候會(huì)更得心應(yīng)手，示例代碼如下：

Taro的其他幾項(xiàng)優(yōu)點(diǎn)：

• 具備良好的開(kāi)發(fā)效率和體驗(yàn)：編輯器對(duì)Taro的支持和React幾乎是一樣的。

• 類(lèi)型安全和運(yùn)行時(shí)檢測(cè)：可以使用TypeScript或Flow來(lái)對(duì)代碼的可靠性進(jìn)一步增強(qiáng)。

• 高效的自動(dòng)補(bǔ)全和 ES6+ 語(yǔ)法：Taro 的所有 API（包括微信小程序等端能力接口）都有智能的提醒和自動(dòng)補(bǔ)全，包括接口的參數(shù)和返回值。

技術(shù)選型與權(quán)衡

      小程序社區(qū)已經(jīng)有多個(gè)優(yōu)秀的框架以小程序?yàn)楹诵膶?duì)多端適配進(jìn)行了探索，我們將各個(gè)開(kāi)發(fā)框架的主要特點(diǎn)和特性進(jìn)行了對(duì)比并制成圖表。大家可以結(jié)合團(tuán)隊(duì)技術(shù)棧、技術(shù)需求以及框架特點(diǎn)、特性進(jìn)行選型和權(quán)衡。