微信小程式開發框架從入門到放棄

Runner羊發表於2019-03-04

用框架是不可能用框架的,這輩子都不可能用框架。

微信小程式上手成本低,開發成本低,流量紅利,推廣成本低等等,很多公司的創業專案都會首選小程式來試水,小程式開發太火爆了,苦逼了前端工程師,又得學習新技術…學習讓我快樂?

半年時間,我已經開發了四個小程式,其中三個微信小程式,一個支付寶小程式。原生開發過,框架也用過。到底最優雅的開發模式是什麼呢,聊聊,聊聊。

技術方案

目前開發微信小程式時,可選的技術方案大概有若干種,分別是:

  1. 微信小程式原生開發
  2. 使用wepy框架
  3. 使用mpvue框架
  4. 使用taro框架
  5. 其他框架

使用框架來開發,總結起來就幹了一件事——加糖,但這糖好不好呢,不好說。

框架開發的初(li)衷(xiang)

  1. 快速迭代
  2. 減少開發成本
  3. 跨平臺共享
  4. 提升開發體驗

框架開發的挑(xian)戰(shi)

  1. 必須同時熟悉微信小程式文件和第三方框架文件,給工程師提出了更大的挑戰
  2. 框架的不完美,只是閹割版或者修改版的前端框架,並沒有100%支援框架自身特性
  3. 框架構建與微信小程式之上,反而導致部分原生支援的特性作廢,比如原生元件,模組化等
  4. 框架生態不健全,文件及相關資源匱乏
  5. 微信小程式自身處於快速迭代的狀態,特性並不穩定,不像web一樣有統一的標準

理想很美好,現實很殘酷

wepy框架來說,元件化的支援不成熟,在實際的開發過程中,如果元件巢狀超過兩層,面對某些特殊業務場景,翻車機率很高。元件的列表渲染,不支援在 repeat 的元件中去使用 props, computed, watch 等等特性。

mpvue框架是基於Vue.js的核心,屬於修改版的vue框架,用起來和web端的vue也有些差異。美團小程式框架–mpvue入坑指南

我的想法

使用第三方框架開發,可以享受框架帶來的開發便利,但對於小程式新增的諸多特性和功能,比如WXS模組、自定義元件和外掛等,受制於第三方框架,無法使用。

而原生小程式的開發模式,又過於簡陋,就樣式來說,寫慣了less,stylus和sass的同學一定無法忍受wxss的這種寫法,基於此,決定使用gulp自動化工具來構建一套微信小程式開發的基礎模板,在完全保留微信小程式功能和特性的基礎上,又可以的使用less來寫樣式,同時加入圖片壓縮,命令列快速建立模板等特性,如此開發,快哉,快哉!

wx-miniprogram-boilerplate

後續會再加入其它工具,持續更新,歡迎各位提意見。

相關文章