小程序 組件通訊

1.組件框架 Exparser(內置組件、自定義組件)

WXML屬性值傳遞是從父組件向子組件的基本通訊方式，而事件系統是從子組件向父組件的基本通訊方式。

事件能夠分爲冒泡事件和非冒泡事件。冒泡事件還能夠劃分爲在Shadow Tree上冒泡的事件和在Composed Tree上冒泡的事件。若是在Shadow Tree上冒泡，則冒泡只會通過這個組件Shadow Tree上的節點，這樣能夠有效控制事件冒泡通過的範圍。

//input-with-label的WXML

<label>

  <input />

  <slot />

</label>

//頁面WXML

<view>

  <input-with-label>

    <button />

  </input-with-label>

</view>

用上面的例子來講，當在 button 上觸發一個事件時：

l 若是事件是非冒泡的，那隻能在 button 上監聽到事件；

l 若是事件是在 Shadow Tree 上冒泡的，那 button 、 input-with-label 、view 能夠依次監聽到事件；

l 若是事件是在 Composed Tree 上冒泡的，那 button 、 slot 、label 、 input-with-label 、 view 能夠依次監聽到事件。

 2.原生組件（由客戶端原生參與組件的渲染）

常見的原生組件：

video	視頻	是	播放視頻
map	地圖	是	展現地圖
canvas	畫布	是	提供一個能夠自由繪圖的區域
picker	彈出式選擇器	否	初始時沒有界面，點擊時彈出選擇器

最主要的【限制】：一些CSS樣式沒法應用於原生組件，例如，不能在父級節點使用overflow:hidden來裁剪原生組件的顯示區域；不能使用transformrotate讓原生組件產生旋轉等。

原生組件會浮於頁面其餘組件之上（至關於擁有正無窮大的z-index值）使其它組件不能覆蓋在原生組件上展現。想要解決這個問題，能夠考慮使用cover-view和cover-image組件。這兩個組件也是原生組件，一樣是脫離WebView的渲染流程外，而原生組件之間的層級就能夠按照必定的規則控制。

3. 通訊性能優化

頁面初始化的時間大體由頁面初始數據通訊時間和初始渲染時間兩部分構成。

初始渲染完畢後，視圖層能夠在開發者調用setData後執行界面更新。邏輯層還會將setData所設置的數據字段與data合併，使開發者能夠用this.data讀取到變動後的數據。

開發者在執行setData調用時，最好遵循如下原則：
1.不要過於頻繁調用setData，應考慮將屢次setData合併成一次setData調用；
2.數據通訊的性能與數據量正相關，於是若是有一些數據字段不在界面中展現且數據結構比較複雜或包含長字符串，則不該使用setData來設置這些數據；
3.與界面渲染無關的數據最好不要設置在data中，能夠考慮設置在page對象的其餘字段下。

視圖層將事件反饋給邏輯層時，通訊的方向是從視圖層到邏輯層。由於這個通訊過程是異步的，會產生必定的延遲，延遲時間一樣與傳輸的數據量正相關，數據量小於64KB時在30ms內。下降延遲時間的方法主要有兩個：

1. 去掉沒必要要的事件綁定（WXML中的bind和catch），從而減小通訊的數據量和次數；
2. 事件綁定時須要傳輸target和currentTarget的dataset，於是不要在節點的data前綴屬性（data-XXX）中放置過大的數據。

優化策略能夠概括爲三點：精簡代碼，下降WXML結構和JS代碼的複雜性；合理使用setData調用，減小setData次數和數據量；必要時使用分包優化（app.json中subPackages）。

4. 原生組件通訊

【非原生組件】在setData的數據通訊流程中，數據從邏輯層通過native層轉發，傳入視圖層的WebView，再通過一系列渲染步驟以後傳入組件。

 

一些原生組件支持使用context來更新組件。而使用context時，數據從邏輯層傳到native層後，直接傳入組件中，這樣能夠顯著下降傳輸延遲。