今天在開發小程式的時候，需要實現一個列表文章，而且每個item的佈局都一樣，所以我用了模板來實現：

.wxml檔案

<!--列表模板-->
     <template name="msgItem">
          <view class='content_head'>
            <view class='content_title'>
              <text>{{data_content_title}}</text>
            </view>
            <view class='author'>
              <text>Form:</text>
              <text>{{author}}</text>
            </view>
          </view>
          <view class='content_text'>
            <text >{{data_content_text}}</text>
          </view>
      </template>
      <!--迴圈輸出列表-->
      <view class='content_item' wx:for="{{item_list}}">
        <template is="msgItem" data="{{...item}}"/>
      </view>
 

.js檔案

 data: {
    item_list: [
      { 
        id: "1",
        data_content_title:"這裡是標題1, 
        data_content_text: "這裡是內容這裡是內容這裡是內容",
        author:"小華",
      },
      {
        id: "2",
        data_content_title: "這裡是標題2",
        data_content_text: "這裡是內容這裡是內容這裡是內裡",
        author: "小明",
      },
    ] 
  } 
 

.wxss檔案略

注意：

當使用模板時，要注意模板的作用域，開發文件中是這樣說的：

模板的作用域
模板擁有自己的作用域，只能使用 data 傳入的資料以及模版定義檔案中定義的 <wxs /> 模組。

比如說：因為在列表渲染中，迴圈的是 data 中的 item_list 這個陣列，所以，模板裡所有的 {{xxx}} 的資料必須在data 裡的item_list 數組裡定義，否則模板讀取不到資料。

 <view class='content_item' wx:for="{{item_list}}">

這樣就可以實現列表的迴圈渲染了。

但是，坑來了！

當你對 data :{ } 裡面其中一個元素進行重新賦值或者其它操作的時候，一般我們是這樣提取出來的：

var ctitle = this.data.title;

但是陣列中就不能這樣，要陣列加下標的格式：

var ctitle = this.data.item_list[0].title;

對陣列的某個元素 setData 時也要加下標，並且要加單引號在外面：

this.setData({ 'item_list[0].title': "我是標題" })

最後，我趟過的坑希望你們能順利跳過！！！有錯誤請指正！