微信小程式檢視層提供了 模板(template)，可以在模板中定義程式碼片段，然後在不同的地方呼叫。結果在資料渲染那懵逼了。按照官網上對模板的說明和對資料的載入。

1、定義模板

　　使用name屬性，作為模板的名字。然後在<template/>內定義程式碼片段，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">　　//此處的name 有ID的意味，便於其他頁面載入該模板時使用和查詢
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
 

2、使用模板

　　先將模板的wxml檔案和wxss檔案路勁連結 匯入到需要使用模板的wxml檔案和wxss檔案內，然後在需要匯入模板的wxml檔案內使用 is屬性，宣告需要的使用的模板，然後將模板所需要的data傳入，如：

<import src="../template/msgItem/msgItem.wxml"/>　　　　
<template is="msgItem" data="{{...item}}"/>　　<!--{{...item}}  ...是將資料展開，即這樣將資料傳輸到模板時，實際上是將item按鍵值對展開-->
Page({
    data: {
        item: {
            index: 0,
            msg: 'this is a template',
            time: '2016-09-15'
        }
    }
});
 

@import "../template/msgItem/msgItem.wxss";

　　is屬性 可以使用Mustache語法，來動態決定具體需要渲染哪個模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
 

3、模板資料傳入

　　在頁面的 template 標籤中將模板所需要的data傳入，如：

<!--展開：-->
<template is="lookRecord"  data="{{...followRecords}}"/>

　　展開：傳入的資料已經按鍵值對模式被一一展開，直接通過物件的屬性就能獲取物件中的值，這點跟VUE的模板使用差不多。但如果模板中存在 wx:for="{{followRecords}}" 運用，即傳入的物件中某個屬性的值是一個陣列Array，系統則會報渲染結構錯誤，找不到屬性。

，這時這種展開式傳值就不行了。

　　那就採用不展開的形式。不展開：傳入的資料在模板中按照屬性一對一呼叫的方式獲取資料，如：

<!--不展開：-->
<template is="lookRecord"  data="{{lookRecord}}"/>

<view class="information-feedback-area" wx:for="{{lookRecord.feedbackBasicInfor}}" wx:for-index="index" wx:for-item="indexData">
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[0].option}}</text>
            <image class="information-options-image" src="{{indexData[0].icon}}"></image>
        </view>
    </view>
    <view class="information-feedback-options">
        <view class="information-feedback-item">
            <text class="information-options-title">{{indexData[1].option}}</text>
            <image class="information-options-image" src="{{indexData[1].icon}}"></image>
        </view>
    </view>
</view>

4、模板點選互動

　　在理清楚資料的獲取和渲染後，模板中繫結事件，實現正常互動，就是最後的問題了。由於模板(template)沒有自己的JS檔案，所以模板的互動功能方法都是寫在引用該模板的頁面的JS控制模組內。如：

　　我在 detailedInformation 頁面呼叫了 basicInformation模板，那麼 模板basicInformation 內的所有互動功能都是寫在detailedInformation.js內的。下面定義事件，如：

//detailedInformation.js
templateInteraction: function () {
    var tampData = this.data.item;
    tampData.clickAction = "nodeOperation ";
    this.setData({item: tampData})
},
nodeOperation: function () {
    console.log("模板互動功能方法執行！")
},

　　然後在模板中繫結該事件，如：

<template is="basicInformation" data="{{item}}"></template>

<template name="basicInformation">
    <view class="information-container">
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">電\r\t\r\t\r\t\r\t\r\t\r\t話1:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho1}}">{{basicInformation.phone1}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho1}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
        <view class="information-text-area">
            <view style="float: left;width: 19%">
                <text class="information-text-title">電\r\t\r\t\r\t\r\r\t\r\t話2:</text>
            </view>
            <view style="float: left;width: 81%">
                <text class="information-text-info" value="{{basicInformation.pho2}}">{{basicInformation.phone2}}</text>
                <image class="information-text-image" src="{{phone}}" id="{{basicInformation.pho2}}"
                       bindtap="{{item.clickAction}}"></image>
            </view>
        </view>
    </view>
</template>

　　這樣點選模板中的具體元素就可以呼叫該方法了。雖然這樣可以呼叫事件方法，但是僅適用於結構簡單，且是迴圈出來的節點(因為基本功能都一樣，操作也基本相同)。但對於結構複雜，功能需求不同的節點則不能適用。這個時候就只能具體節點具體功能具體定義事件了。

　　當然絕大部分模板的互動功能都不多，既然都在用模板了，那麼肯定是以資料展示為主，沒事去操作它幹嘛。包含大量操作和互動功能的直接寫頁面，誰還整模板，自己坑自己麼。