小程序開發工具調查

Photo by Adeolu Eletu on Unsplash

調查時間爲2019年05月上旬進行

目前開發小程序可選方案有以下幾種方式：

• 基於小程序開發工具進行原生開發（簡稱：原生開發）
• 基於構建環境進行開發，並轉換爲小程序原生代碼（簡稱：構建式開發）

原生開發由於設計問題需要管理大量文件導致開發過程不流暢（如創建一個組件需要新建三份文件編寫代碼）；更多的問題是JS新特性不支持、css樣式不支持Less/Sass，也不能靈活運用npm包管理（儘管新版本提供了支持）;細說就是上面那些問題，對於日常開發的前端工程師來說卻是需要重視的，這類問題得不到解決，開發及維護成本是高昂的！現代的前端工程師日常開發場景已經常常使用ES6/7的新特性（甚至有些習慣使用TypeScript），然後要讓這些人回頭使用老舊的方法寫代碼，只能說工作成本太高了。結論：不推薦用原生開發，除非你的程序足夠簡單。

原生開發的缺點構建式開發都能解決，而且還提供常用的語境，更能使前端工程師更快更高效地進行開發工作（基於MVVM框架開發的語境）。下面是一些收集來的開發環境：

• wepy一個最受歡迎的小程序框架。基於vue開發風格。
• mpvue是一個使用 Vue.js 開發小程序的前端框架。基於vue開發風格。
• taro是一套遵循React語法規範的多端統一開發框架。基於react開發風格

mpvue可能文檔不是那種容易閱讀的類型，沒看下去先棄置；微信團隊開發的wepy寫的文檔就挺好的較爲易於閱讀，框架把原生開發的多文件結構改爲了單文件並提供使用一些JS的新特性（基於Babel），不得不提的缺點是它無法循環渲染自定義組件（雖然在1.7.2-alpha4已經支持），還有一點，在wepy官方的倉庫中找關於循環渲染自定義組件的issues時發現另一個問題：數據多的時候性能較差的情況（具體看wepy是否可以作爲一個正式項目的工具使用？ 項目規模起來後如何優化？ (issues#1673)）；而剛好@kdong007在issues中提到taro解決了wepy的問題讓我對taro提起了興趣。雖然不懂reart也考慮嘗試一波；taro是一套遵循React語法規範的多端統一開發框架，能一鍵生成可以在微信小程序/H5/ReactNative等端運行的代碼，還支持TypeScript自家也有taro-uiUI庫，文檔易讀容易定位問題，多個庫的版本管理也不像wepy那樣不統一。在v1.3.0-beta-0之後還支持React Hook方式編碼，讓我這個React新人也想嚐嚐鮮！

除了開發環境，UI庫的支持選擇也是很重要的，目前使用較爲廣泛的有以下這些：

• weui-wxss WeUI WXSS是騰訊官方UI組件庫WeUI的小程序版，提供了跟微信界面風格一致的用戶體驗
• iview-weappiView是TalkingData發佈的一款高質量的基於Vue.js組件庫，而iView weapp則是它們的小程序版本
• vant-weapp Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本，兩者基於相同的視覺規範，提供一致的 API 接口，助力開發者快速搭建小程序應用。
• minui 基於規範的小程序 UI 組件庫，自定義標籤組件，簡潔、易用、工具化
• taro-ui 一套基於 Taro 框架開發的多端 UI 組件庫

weui-wxss,iview-weapp,vant-weapp和minui都是基於原生開發的UI組件庫，想用於wepy環境下可以參考一波minui推薦的處理辦法（min-cli文檔 - 結合WePY）。主要是兩點：UI組件庫文件放在小程序項目目錄下；在頁面設置config.usingComponents={'van-button':'../components/vant/button/index'}來註冊組件。如果你還抱有疑問，可以圍觀這個issues。至於taro-ui必須和taro組合使用，環境相對封閉但是功能無可挑剔，畢竟能生成至weapp/H5/RN。

結語：睇餸吃飯，兄弟！按自己需要來選擇用什麼方式開發小程序吧！祝各位好運！我就繼續研究一下這個taro怎樣搞，哈哈XD