本篇內(nèi)容介紹了“微信小程序開發(fā)入門實例分析”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

為清原等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及清原網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站建設(shè)、成都網(wǎng)站制作、清原網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

調(diào)試方法

小程序的調(diào)試和一般的網(wǎng)頁調(diào)試差不多，但是注意幾點：

• 調(diào)試文件的選擇

打開調(diào)試器，選中Sources頁簽，然后使用快捷鍵：ctrl+p打開搜索框，選擇后綴為sm的文件進(jìn)行調(diào)試。

• 數(shù)據(jù)綁定的展示

打開調(diào)試器，選中AppData頁簽，可以查看到頁面數(shù)據(jù)綁定的詳細(xì)信息，是否正確綁定。記載著所有頁面的數(shù)據(jù)綁定內(nèi)容。

通過上面這個圖片，我們就可以知道，只有在datesArry對象里面有需要綁定在頁面上面的數(shù)據(jù)。

Template模版

wxml / wxss / js模塊的復(fù)用，更好的封裝ui和業(yè)務(wù)邏輯  增加復(fù)用性

當(dāng)一塊區(qū)域需要在多個地方使用的時候，可以把這個區(qū)域做成一個模版，在使用的時候調(diào)用這個模版即可，這樣即減少重復(fù)代碼的編寫，又易于維護(hù)，讓代碼整潔。

• 模版代碼的編寫

  
    
      {{item.title}}
      {{item.date}}
    
    
    {{item.content}}
  

為了方便管理我們的模版文件，可以在pages文件夾下面，新建一個模版文件，里面存放編寫的模版；我們要使用標(biāo)簽template來包裹代碼，并且要給其加一個name屬性，當(dāng)然也要編寫對應(yīng)的樣式，和正常寫樣式的方法沒有區(qū)別。

新建的模版文件里面只能存放模版的wxml和wxss文件，目前小程序的模版文件里面放入其他的文件類型不起作用，不能進(jìn)行復(fù)用，雖然不報錯，比如js文件。

template標(biāo)簽只是一種占位符，告訴編譯器這個地方是加載模版代碼的，當(dāng)頁面編譯完成，這個標(biāo)簽就消失，所以要對與模版文件響應(yīng)事件，我們就需要在加載模版文件的區(qū)域，使用一個可以添加事件的標(biāo)簽把其模版文件包裹起來，比如：view / block

template模版代碼

• 使用模版代碼

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

首先，模版代碼是在其他文件夾中，使用它，就必然要引入該模版文件，
一般在對應(yīng)要引入模版文件的文件開頭部分引入：

// 在對應(yīng)的wxml文件中開頭引入


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

然后在引入模版文件的wxml文件，適當(dāng)位置使用

  
到此，簡單的模版引入和模版數(shù)據(jù)的綁定就完成，當(dāng)我們要循環(huán)模版的時候，只需要如下，在外面加一層標(biāo)簽即可：
// bolck標(biāo)簽的作用是作用事件到template模版上面

    
模版循環(huán)
前一篇文章說了一下數(shù)據(jù)的循環(huán)，借用屬性wx:for=' '，通過默認(rèn)得到的item / index可以知道對應(yīng)的子對象數(shù)據(jù)和其索引值；但是我們發(fā)現(xiàn)，每一個模版綁定的數(shù)據(jù)項前面都要使用item.屬性值(子對象的屬性值)來綁定數(shù)據(jù)，item是多余的，有沒有辦法去簡化？當(dāng)然有！

// 在對應(yīng)的item的前面加上 ... 三個點
    
  // {{idx}}
在循環(huán)的子對象item前面加上...三個點，就行。簡單的一行代碼就實現(xiàn)了下圖的頁面。
前面加三個小點的作用：相當(dāng)于把子對象給平鋪，直接展開了里面的屬性值，就可以直接在模版里面綁定這些屬性值，不需要在模版里面指定其數(shù)據(jù)源（這就是...的作用）
自定義屬性
自定義屬性一般說來都是使用data-開頭，綁定一些我們需要存儲的信息，傳遞到其他地方，比如點擊的頁面文章索引。
設(shè)置自定義屬性
設(shè)置自定義屬性很簡單，但是要注意一點的是，在操作模版的時候，一定要在其外面包裹一層view，才能進(jìn)行操作；原因是template標(biāo)簽只是一個占位符，編譯后就消失。

  
item.postId是從服務(wù)器上面獲取的，是數(shù)據(jù)源中的一個屬性。
獲取自定義屬性
獲取自定義屬性，當(dāng)然是通過事件去獲取
  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：當(dāng)前點擊的目標(biāo)元素
event.currentTarget.dataset：目標(biāo)元素上面的自定義屬性集合
通過獲取到的自定義屬性，可以作為一個參數(shù)綁定一個鏈接上面，達(dá)到不同欄位的點擊跳轉(zhuǎn)到不同的頁面：
  onPostTap:function(event){
      var postId=event.currentTarget.dataset.postid;
      wx.navigateTo({
        url: 'xxxx?id='+postId,
      })
  }
上面只是說明了在同一個頁面之間獲取自定義屬性，要是在不同頁面之間怎么獲取自定義屬性，達(dá)到傳遞值的作用呢？
wx.navigateTo({
        url: 'xxxx?id='+postId,
      })
通過上面的方法把參數(shù)postId，傳遞出去，然后在要接收的頁面中使用options.id來獲取
 onLoad: function (options) {
    var postId = options.id;
    console.log(options);
  }
options.id就是通過wx.navigateTo傳遞過去的postId
“微信小程序開發(fā)入門實例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！
            
            
                        

            本文標(biāo)題：微信小程序開發(fā)入門實例分析            

            網(wǎng)頁地址：http://weahome.cn/article/jdccss.html