微信小程序wepy框架+minui踩坑之路

近期項目涉及微信小程序,鑑於原生小程序文件結構過於複雜,決定使用wepy框架開發

wepy框架類似Vue的MVVM開發模式,並且支持promise與ES7 asnyc異步函數,記錄一

下項目開發過程中遇到的坑:

1.minUI

由於minUI與wepy框架兼容性較好,而且支持單組件導入,所以選擇了minUI,使用方式官網有寫,需要的組件直接npm安裝即可,不過要注意的是,它的form組件對form表單提交支持性並不好,如果想要提交表單還是建議原生或者使用異步提交:

minUI中的button組件並不支持disabled禁用(或者我沒看懂文檔,至少直接寫disabled不行)。

minUI中的很多組件樣式是無法通過style或者class控制的,所以如果有需要,可以進入packages,找到組件的wxss自行添加。

minUI可以和原生組件一起使用,例如原生scroll-view+minUI中的list。

2.wepy

 1.wepy的組件與父級css是共用的,也就是說主頁面中的css組件也可以使用。

 2.發送廣播是向子組件傳輸數據的重要手段,而且子組件中的events可以當成子組件的生命週期函數使用(類似子組件的 onLoad)。

 3.在組件中寫生命週期其實是調用組件頁面的生命週期,所以就像文檔說的不需要寫生命週期函數。

 4.頁面調用全局是this.globalData.*,組件調用全局變量是this.$parent.globalData.*,組件中的組件調this.$parent.$parent.*,此類推。

 5.子組件所需要引入的UI組件/其他組件,都寫在父級頁面的usingComponents中,注意路徑不要寫錯。

6.由於第一次用,所以剛開始修改了dist文件導致項目崩潰(其實人也很崩潰),然後就是一個漫長的恢復項目的過程,重新cli等,但是發現還是不成功,顯示頁面構建失敗之類的,剛開始發現忘了裝async的pollyfill,npm後還是報錯,最後查閱資料發現是babel的配置出了問題,於是乎修改了wepy.config.json:

,再次編譯如果顯示UI組件找不到,路徑正確的情況下可能是未開啓微信小程序ide的ES6轉ES5,最後再次build終於成功,所以請勿修改dist文件夾

7.不知道是不是build --watch的問題,在編譯中添加文件後,刪除/重命名文件都無效,只要被build進去的文件無法通過再次build刪除(無奈),所以最後上傳小程序時,我採用的方法是將dist文件單拎出來,對其中無效(被刪除/重命名)的文件進行整理,最後記得整理app.json文件,最後進行上傳即可。注:其中_wepylogs.js文件是用來記錄錯誤的,在wepy編譯中最後一次錯誤會被記錄在這裏,上傳之前記得清除一下。

3.Echarts

這個參考一位大佬所寫的方法:

https://blog.csdn.net/juzipidemimi/article/details/81807110

需要注意的是,我是將開源中的項目down下來直接複製了charts文件夾,其中每一個charts的組件中,存在一個initChart方法,它是用來代替原來的ec:{},原理在文章中有寫,這個方法被寫在了methods(){}中,如果你想通過後臺數據實現動態刷新圖表,可以使用ES7的async將你的request變爲異步函數,最後在.then中進行initChart,否則如果請求的時間在initChart之後,圖表是不會渲染出來的,因爲數據沒有請求到。

例如:

目前項目順利開發完成,上傳的dist目錄結構:

注:index.template.html不會被上傳

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章