1. 程式人生 > >小程式學習(一)

小程式學習(一)

先來學習幾個js方法:

  1. concat():用於連線兩個或多個數組,該方法不會改變現有的陣列,而僅僅會返回被連線陣列的一個副本。

  2. unshift() : 方法可向陣列的開頭新增一個或更多元素,並返回新的長度

開始我們的小程式學習

  1. bind事件繫結不會阻止冒泡事件向上冒泡,catch事件繫結可以阻止冒泡事件向上冒泡。

  2. 自基礎庫版本 1.5.0 起,觸控類事件支援捕獲階段。捕獲階段位於冒泡階段之前,且在捕獲階段中,事件到達節點的順序與冒泡階段恰好相反。需要在捕獲階段監聽事件時,可以採用capture-bind、capture-catch關鍵字,後者將中斷捕獲階段和取消冒泡階段。

  3. 事件物件:

    target:被點選的元件

    currentTarget:當前事件繫結的元件

  4.  在元件中可以定義資料,這些資料將會通過事件傳遞給 SERVICE。 書寫方式: 以data-開頭,多個單詞由連字元-連結,不能有大寫(大寫會自動轉成小寫)如data-element-type,最終在 event.currentTarget.dataset 中會將連字元轉成駝峰elementType。

    示例:

    <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

    Page({

      bindViewTap:function(event){

        event.currentTarget.dataset.alphaBeta === 1 // - 會轉為駝峰寫法

        event.currentTarget.dataset.alphabeta === 2 // 大寫會轉為小寫

      }

    })

說明: target 和 currentTarget 可以參考上例中,點選 inner view 時,handleTap3 收到的事件物件 target 和 currentTarget 都是 inner,而 handleTap2 收到的事件物件 target 就是 inner,currentTarget 就是 middle。    

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">

  outer view

  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">

    inner view

  </view>

</view>

如果將上面程式碼中的第一個capture-bind改為capture-catch,將只觸發handleTap2。

<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">

  outer view

  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">

    inner view

  </view>

</view>

5. 小程式的生命週期函式

模組化:

module.exports = {

    loadInfo: loadInfo

}

注意: <block/> 並不是一個元件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。