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 等方法

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