WePY的脫胎換骨


對於前端來說,尤其是開發小程序的前端來說,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的磚還是比較方便的

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM