微信小程序開發之-總結:頁面

最近一直在學習微信小程序開發,但是好像直到最近纔有一點點融會貫通的感覺。

現在此做一些梳理:

 頁面:

  1. 頁面可以由單個wxml表示,此時每一個wxml和對應的js,json,wxss構成一個page(頁面)。js處理屬性,變量和函數;json用來寫配置;wxss用來描述wxml的樣式。
  2. 頁面可以由一個或多個自定義組件構成。自定義組件:
    1. 在自定義組件中,js不應寫page,而應該寫component(組件),component有:property,data,methods(自定義函數或綁定控件函數),以及 ready(), created(),attached(),detached() 這幾個生命週期函數。methods裏綁定的控件函數可以根據官方文檔裏面的標準組件(小程序提供的組件如:input,text,textarea,view,swiper 等等)可以綁定的消息來進行綁定,這樣當某一個消息(如 tap(點擊),input(輸入),change(頁面變換或其他組件的狀態變換等))被捕獲到的時候,在綁定的響應函數中會獲取到一些的值(如 onLoad(e),e就會攜帶一些信息,具體可以使用console.log(e) 來查看具體攜帶哪些信息)。 由於某些時候頁面的構成與程序的邏輯業務的原因,需要將一個上述的消息以及一些數值發送到上一級(父組件,或使用該自定義組件的組件中),這時可以在綁定的消息響應函數中使用trrigerEvent 發送一個自定義的事件消息以及一些參數,然後在父組件的wxml中使用該自定義組件的地方使用bind:xxx(之前自定義的事件名稱)='onXXX' 來綁定一個消息響應函數,這樣就可以在父/子組件間傳遞一些數據。這是從自定義組件傳遞數據到父組件,如何從父組件傳遞數據到子組件呢?從父組件傳數據到子組件,可以在wxml中將一些數據作爲自定義組件的屬性傳遞過去,如 <myComponent property='{{xxx}}', property1='{{xxx}}'.... ></myComponent>,這樣在自定義組件中的property部分就需要定義property, property1,具體格式可以參考官方文檔。
    2. page與page之間的傳至,可以使用 url的方式,ru http request中的url格式。因爲在頁面管理的函數,如:navigateTo,redirectTo這類的函數中都有一個url字段,這樣可以在url字段中來帶一些參數,來傳遞頁面間需要交換的數據。
    3. 在每個組件(自定義和標準)使用的時候可以在wxml裏以 data-param 來定義一個名爲 param的變量,將這個變量綁定到該組件上,而在page或component中的data中定義的變量的有效範圍是整個page或component。運用場景:比如一個商品列表,可能會在描述一個商品的<view> 裏面綁定商品的id,價格或其他的變量,然後這樣當用戶點擊觸發響應函數的時候知道是哪一個項目被點擊了,不然怎麼知道誰被點擊了呢?

未完待續。。。

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