Wepy-小程序踩坑之旅

引言

• 最近公司須要作一個小程序的項目，正好發現了wepy這麼一個跟vue的開發方式相似的框架，不過提及來跟vue相似，可是用起來還真不是那麼簡單。固然仍是先給出官方文檔連接，方便查閱，有些細節還真的是在那隻言片語間了。
• 微信小程序開發文檔中有個搜索按鈕，不過不要相信它是萬能的，不少東西就是搜索不到的，好比arrayBufferToBase64這樣的api，因此在使用某個功能的時候，儘量找到該功能對應的組件、API

官方文檔

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

下面是已經踩過的坑

標籤中的指令簡寫

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

data使用注意點

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

WePY中的methods的使用

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

頁面跳轉

• navigateTo() 和 redirectTo() 不容許跳轉到 tabbar 頁面，
• 只能用 switchTab() 跳轉到 tabbar 頁面

文件上傳

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

更新DOM$apply

• 若是須要更新DOM，應該在隨後調用組件實例的$apply方法，才能更新到頁面中

this.name="abc"; this.$apply() 

• PS：對於性能要求較高的應用，不要頻繁的調用$apply()更新DOM，能夠根據實際狀況更新

父組件向子組件傳遞數據，經過prop的方式傳遞

• 若是須要傳遞動態數據，須要.sync修飾符
• 若是須要子組件數據同步到父組件，須要在定義prop的時候設置twoWay:true

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都以$開頭，因此咱們在定義實例屬性、方法的時候不能以$開頭，以便區分