微信小程序入門到實戰（四）

調試方法

小程序的調試和通常的網頁調試差很少，可是注意幾點：

• 調試文件的選擇

打開調試器，選中Sources頁籤，而後使用快捷鍵：ctrl+p打開搜索框，選擇後綴爲sm的文件進行調試。

• 數據綁定的展現

打開調試器，選中AppData頁籤，能夠查看到頁面數據綁定的詳細信息，是否正確綁定。記載着全部頁面的數據綁定內容。

經過上面這個圖片，咱們就能夠知道，只有在datesArry對象裏面有須要綁定在頁面上面的數據。

Template模版

wxml / wxss / js模塊的複用，更好的封裝ui和業務邏輯 增長複用性

當一塊區域須要在多個地方使用的時候，能夠把這個區域作成一個模版，在使用的時候調用這個模版便可，這樣即減小重複代碼的編寫，又易於維護，讓代碼整潔。

• 模版代碼的編寫

<template name='postItem'>
  <view class='box'>
    <view class='title-box'>
      <text class='title'>{{item.title}}</text>
      <text class='date'>{{item.date}}</text>
    </view>
    <image src='{{item.imgUrl}}' class='cont-image'></image>
    <text class='content'>{{item.content}}</text>
  </view>
</template>

爲了方便管理咱們的模版文件，能夠在pages文件夾下面，新建一個模版文件，裏面存放編寫的模版；咱們要使用標籤template來包裹代碼，而且要給其加一個name屬性，固然也要編寫對應的樣式，和正常寫樣式的方法沒有區別。

新建的模版文件裏面只能存放模版的wxml和wxss文件，目前小程序的模版文件裏面放入其餘的文件類型不起做用，不能進行復用，雖然不報錯，好比js文件。

template標籤只是一種佔位符，告訴編譯器這個地方是加載模版代碼的，當頁面編譯完成，這個標籤就消失，因此要對與模版文件響應事件，咱們就須要在加載模版文件的區域，使用一個能夠添加事件的標籤把其模版文件包裹起來，好比：view / block

<view bindtap=」 ....」> template模版代碼 </view>

• 使用模版代碼

編寫好了模版代碼，怎麼樣在須要加載模版代碼的地方使用呢？

首先，模版代碼是在其餘文件夾中，使用它，就必然要引入該模版文件，
通常在對應要引入模版文件的文件開頭部分引入：

// 在對應的wxml文件中開頭引入
<import  src = '模版wxml文件路徑' />

// 在對應的wxss文件中開頭引入，注意末尾的分號
@import '模版wxss文件路徑' ；

而後在引入模版文件的wxml文件，適當位置使用

<template  is = '模版的名字'   data="{{要綁定到模版的數據}}"

到此，簡單的模版引入和模版數據的綁定就完成，當咱們要循環模版的時候，只須要以下，在外面加一層標籤便可：

// bolck標籤的做用是做用事件到template模版上面
<block wx:for=" 服務器獲取的數據集"  wx:for-item='item' wx:for-index='index' >
    <template  is = '模版的名字'   data="{{要綁定到模版的數據，通常是服務器獲取的一個數據對象item}}"
</block>

模版循環

前一篇文章說了一下數據的循環，借用屬性wx:for=' '，經過默認獲得的item / index能夠知道對應的子對象數據和其索引值；可是咱們發現，每個模版綁定的數據項前面都要使用item.屬性值(子對象的屬性值)來綁定數據，item是多餘的，有沒有辦法去簡化？固然有！

<view wx:for='{{datesArry}}' wx:for-item='item' wx:for-index='idx'>
// 在對應的item的前面加上 ... 三個點
  <template is='postItem' data='{{...item}}'  />  
  // <view>{{idx}}</view>
</view>

在循環的子對象item前面加上...三個點，就行。簡單的一行代碼就實現了下圖的頁面。

前面加三個小點的做用：至關於把子對象給平鋪，直接展開了裏面的屬性值，就能夠直接在模版裏面綁定這些屬性值，不須要在模版裏面指定其數據源（這就是...的做用）

自定義屬性

自定義屬性通常說來都是使用data-開頭，綁定一些咱們須要存儲的信息，傳遞到其餘地方，好比點擊的頁面文章索引。

• 設置自定義屬性

設置自定義屬性很簡單，可是要注意一點的是，在操做模版的時候，必定要在其外面包裹一層view，才能進行操做；緣由是template標籤只是一個佔位符，編譯後就消失。

<view wx:for='{{datesArry}}' wx:for-item='item' data-postId='{{item.postId}} wx:for-index='idx' catchtap='onPostTap' '>
  <template is='postItem' data='{{...item}}' />
</view>

item.postId是從服務器上面獲取的，是數據源中的一個屬性。

• 獲取自定義屬性

獲取自定義屬性，固然是經過事件去獲取

onPostTap:function(event){
      var postId=event.currentTarget.dataset.postid;
      var postIdData = event.currentTarget.dataset;
      console.log(postId);   // 1 
      console.log(postIdData);
  }

event.currentTarget.dataset.postid：獲取的自定義屬性值

• event事件對象
• event.currentTarget：當前點擊的目標元素
• event.currentTarget.dataset：目標元素上面的自定義屬性集合

經過獲取到的自定義屬性，能夠做爲一個參數綁定一個連接上面，達到不一樣欄位的點擊跳轉到不一樣的頁面：

onPostTap:function(event){
      var postId=event.currentTarget.dataset.postid;
      wx.navigateTo({
        url: 'xxxx?id='+postId,
      })
  }

上面只是說明了在同一個頁面之間獲取自定義屬性，要是在不一樣頁面之間怎麼獲取自定義屬性，達到傳遞值的做用呢？

wx.navigateTo({
        url: 'xxxx?id='+postId,
      })

經過上面的方法把參數postId，傳遞出去，而後在要接收的頁面中使用options.id來獲取

onLoad: function (options) {
    var postId = options.id;
    console.log(options);
  }

options.id就是經過wx.navigateTo傳遞過去的postId