Wepy-小程序踩坑記


引言

用過原生開發的小程序也知道除了api 其他功能性的內容並不多對於需要做大型項目來說是比較難入手的,因此朋友推薦的wepy我就入坑鳥。。。
這么一個跟vue的開發方式類似的框架,不過說起來跟vue類似,但是用起來還真不是那么簡單。api開發還是和部分vue有出入,因此如下記錄,入手的教程就不發了只發踩坑。

官方文檔

小程序的官方文檔
wepy官方文檔

下面是已經踩過的坑

wepy 問題查找

https://github.com/Tencent/we...
比較建議在這里查找下遇到的問題之后在提問畢竟這里都是收集比較齊全

標簽中的指令簡寫

跟Vue類似

  • 對於動態賦值的屬性可以使用 :attr="value" 的方式
  • 對於綁定事件可以使用@click="fn"的方式

data使用注意點

對於視圖中需要用到的數據,應該事先在data中定義一下,哪怕此時沒有數據,也應該定義一個空值

WePY中的methods的使用

  • 只能聲明頁面的bind、catch事件,不能聲明自定義方法
  • 自定義方法應該跟methods平級

this 運用

小程序里修改data 里面的屬性或者賦值都需要利用this.setdata()而wepy 基本就是利用this.屬性即可。如果是異步返回或者更新dom需要this.$apply()觸發臟值檢測

頁面跳轉

navigateTo() 和 redirectTo() 的差別。

navigateTo()保留當前頁面,跳轉到應用內的某個頁面(即:顯示頂部導航欄左上角返回按鈕,可以有返回路徑)
redirectTo()關閉當前頁面,跳轉到應用內的某個頁面(即:不顯示左上角返回按鈕,如需要返回在頁面內自己添加按鈕寫路徑或者利用wx.navigateBack()和 getCurrentPages() 獲取當前的頁面棧,決定需要返回幾層。

  • 簡單來說如果你需要tabbar有返回就用navigateTo,不需要就用redirectTo
  • 只能用 switchTab() 跳轉到 tabbar 頁面

文件上傳

上傳文件沒有傳統html中的文件域(<input type="file"/>),要想上傳文件只能使用API: uploadFile()

更新DOM$apply

如果需要更新DOM,應該在隨后調用組件實例的$apply方法,才能更新到頁面中

this.name="abc";
this.$apply()
  • PS:對於性能要求較高的應用,不要頻繁的調用$apply()更新DOM,可以根據實際情況更新父組件向子組件傳遞數據,通過props的方式傳遞
  • 如果需要傳遞動態數據,加上.sync的修飾符就可以解決(:prop.snyc='item')
  • 如果需要子組件數據同步到父組件,需要在定義props的時候設置twoWay:true
  • (所有異步數據傳遞必須用$apply,同步的話才能使用.sync)

mixin

wepy的mixin,與vue中的mixin執行順序相反

  • wepy中,會先執行組件自身的,再執行mixin中的
  • vue中對於鈎子函數,會先執行mixin中的,再執行組件自身的;vue中methods如果和mixin同名,那么只會執行自身的方法

關於canvas和base64

小程序中可以進行canvas相關操作,但是跟純html中的canvas有所不同(api差異),canvas的使用都應該參照:小程序中的canvas

arrayBuffer和base64互轉

本段內容在文檔中是搜索不到的,但是確實是支持的,使用如下2種方式:

wx.arrayBufferToBase64(arrayBuffer)
wx.base64ToArrayBuffer(base64)

命名規范

小程序內部定義的實例API都以$開頭,所以我們在定義實例屬性、方法的時候不能以$開頭,以便區分

同名組件共享同一實例及數據

循環渲染組件時,容易出現組件數據相互污染。可以用最外層的組件監聽事件冒泡以修改數據,同時觸發事件的組件用setTimeout包裹,保證執行順序。

循環渲染組件:

wepy的循環渲染組件,必須使用 <repeat>標簽,或者微信官方的<block>標簽(這兩個標簽都是不會渲染到dom的)否則就不會渲染成功。

組件component 沒有 onLoad 等頁面事件

  • 頁面中設置好 this.$broadcast('someEvent', option);
  • 組件監聽事件則可以解決

page

頁面類,繼承自wepy.component,擁有頁面所有的屬性與方法。
全部屬性繼承自wepy.component。而wepy.component沒有onLoad 等方法

未完待續-----------------


免責聲明!

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



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