1. 程式人生 > >微信小程式知識點GET

微信小程式知識點GET

1. app.json中的pages用來設定小程式包含哪些頁面以及頁面的路徑、window用來設定預設頁面的視窗表現形式、tabBar用來設定小程式底部tab的表現

2. app.js中的App()函式用來註冊一個小程式,接受的物件引數用來指定小程式的生命週期函式等,注意App()必須在app.js中進行註冊且不能註冊多個

3. 全域性的getApp()函式用來獲取小程式例項

4. 頁面初始化資料時會將Page函式內的JSON格式的data資料渲染到頁面中,在頁面中通過雙花括號來標識

5. 每個頁面的生命週期函式(onLoad/onShow/onHide/onUnload等)和每個頁面的事件處理函式
(onPullDownRefresh/onReachBottom/onPageScroll/onShareAppMessage)不同

6. 元件的事件處理函式可以在渲染層的元件中進行事件繫結,就會執行Page中定義的事件處理函式

這裡寫圖片描述

7. this.setData()接受一個物件,以 key,value 的形式表示將 this.data 中的 key 對應的值改變成 value,其中 key 可以非常靈活,以資料路徑的形式給出,如 array[2].message,a.b.c.d,並且不需要在 this.data 中預先定義

8. 在 JavaScript 檔案中宣告的變數和函式只在該檔案中有效;不同的檔案中可以宣告相同名字的變數和函式,不會互相影響。通過全域性函式 getApp() 可以獲取全域性的應用例項,如果需要全域性的資料可以在 App() 中設定

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

9. 我們可以將一些公共的程式碼抽離成為一個單獨的 js 檔案,作為一個模組。模組只有通過 module.exports 或者 exports 才能對外暴露介面

10. 資料繫結

這裡寫圖片描述

這裡寫圖片描述

這裡寫圖片描述

11. 在元件上使用 wx:for 控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為 index,陣列當前項的變數名預設為 item。使用 wx:for-item 可以指定陣列當前元素的變數名,使用 wx:for-index 可以指定陣列當前下標的變數名。

這裡寫圖片描述

這裡寫圖片描述

12. 模板(template),可以在模板中定義程式碼片段,然後在不同的地方呼叫。定義模板:使用name屬性,作為模板的名字。然後在內定義程式碼片段,使用模板:使用 is 屬性,宣告需要的使用的模板,然後將模板所需要的 data 傳入

13. 事件

13.1 在元件中繫結一個事件處理函式,如bindtap,當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式

這裡寫圖片描述

在相應的Page定義中寫上相應的事件處理函式,引數是event

這裡寫圖片描述

13.2 事件分為冒泡事件和非冒泡事件

WXML的冒泡事件列表

這裡寫圖片描述

事件繫結的寫法同組件的屬性,以 key、value 的形式。(1)key 以bind或catch開頭,然後跟上事件的型別,如bindtap, catchtouchstart。(2)value 是一個字串,需要在對應的 Page 中定義同名的函式。不然當觸發事件的時候會報錯。(3)bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡

13.3 如無特殊說明,當元件觸發事件時,邏輯層繫結該事件的處理函式會收到一個事件物件

這裡寫圖片描述

這裡target和currentTarget都會包含id(事件源元件的id)、tagName(當前元件的型別)和dataset(事件源元件上由data-開頭的自定義屬性組成的集合)屬性

這裡寫圖片描述