對於前端來說,尤其是開發小程序的前端來說,WePY框架一定不陌生,他是一種小程序開發框架。而且是屬於類Vue風格,掌握Vue再來學習WePY學習成本極低。
今天為啥要寫這篇文章呢,因為在復習WePY時發現已經有了WePY2了。
猶記得當時開發商城時每次異步更新數據都得$apply,$apply,現在終於不用了。
WePY2比起WePY1簡直是脫胎換骨的變化,當然類Vue風格是沒有變的,但是內部改了很多的東西,而且官方也說明了,WePY2並不是WePY1的升級版本,而是完全重新開發的全新版本!
讓我們來看看脫胎換骨之后有哪些不同之處
1.入口申請調整,WePY 1 使用類的繼承方式 export default class MyPage extends wepy.page {} 在 WePY 2 中調整為 wepy.page({})。將實例化的過程放在生命周期事件中。 2.數據綁定機制調整,WePY 1 使用臟檢查進行數據綁定,卻讓開發者不知道使用時候去調用 $apply() 方法。在 WePY 2 中使用了 Vue Observer 實現數據綁定,告別$apply()。 3.基於原生組件,WePY 1 是通過文件編譯創建的靜態組件在動態循環遍歷時會出現一些問題,WePY 2 直接基於的小程序原生的組件去實現,避免了這一類問題。 4.Vue 模板語法,WePY 2 中推薦使用 html 代替 wxml 來寫 template,支持除 filter 之外的所有 Vue 模板語法。 5.編譯方式改變,WePY 2 從基於文件編譯調整為基於入口編譯,因此對於圖片等靜態資源需要指定 static 選項 。
上述這些改變讓我覺得比較驚喜是支持Vue的模板語法
我們來看看WePY1的模板語法
充斥着大量的View text,可讀性並不是很好
但WePY2就不一樣了,WePY推薦使用 html 代替 wxml 來寫 template,支持除 filter 之外的所有 Vue 模板語法
我們可以使用div,a標簽等等html標簽,並且可以使用v-show,v-if等等指令。
當然,由於WePY2是完全重新開發的,這也導致WePY2的向下兼容性並不友好,要把WePY1的項目升級成WePY2會比較困難。
WePY2和Vue有多像呢,我們看看官網就知道了
上面只是其中一部分,感覺編寫WePY2的文檔是真的省時省力,直接參考Vue官方文檔就完事了
總的來說WePY2的進步還是很大的,感覺搬WePY2的磚還是比較方便的