一、Template的組成
Template 只由 wxml和wxss兩個文件組成,js和json均無作用。
二、Template的使用
Template可以理解為直接將源碼替換到這個地方,所以除了在 引用頁面(使用Template的頁面) 里引用Template的wxml之外,引用頁面也需要引用Template的wxss。
- 在引用頁面的
wxml里引用Template的wxml
<!-- 注意這個標簽結尾一定要加反斜杠 -->
<import src="Template.wxml所在的相對地址/絕對地址" />
<template is="template設置的name" data="傳入的data" />
- 在引用頁面的
wxss里引用Template的wxss
@import "Template.wxss所在的相對地址/絕對地址"
三、Template里面引用資源
Template里面引用images這種資源時要注意 相對路徑/絕對路徑,因為Template本質是 將源碼加入引用的頁面,如果引用的頁面和Template所在的目錄不是同一級,相對路徑就會出錯,所以這里推薦凡是Template里面引用的資源一律使用絕對路徑
四、Template里的數據傳遞

注意第一個Template里的data加了...
五、多組數據使用多層嵌套的Template
在開發微信小程序的過程中遇到這樣一個問題,即 多組同種不同鍵 的數據 要綁定到 多層嵌套的Template里時,會遇到data名稱不符的問題。看下面例子:
代碼片段(說明已經卸載注釋里面了):
問題:
現在外面有多種 不同鍵名 的同類數據,這里究竟填哪個名字啊?有沒有什么辦法讓代碼二 的wx:for只需要填一個統一的鍵名?
解jio方案一之 循環for-item一統template:
采用循環的方式,設置wx:for-item讓傳入的鍵名都相同
這里,所有的鍵名都統一叫item,不會有其他的情況,解決了鍵名不一樣的問題。
解jio方案二之 ...展開嵌套{}一統template:
本解決方案采用 加一層{},再用...展開的辦法 解決不同名的問題,一臉懵逼的小伙伴們不要急,下面就是示例
解釋一下,原來是這樣的結構:
{
top250:[...],
inTheater:[...],
comingSoon:[...]
}
后來變成這樣的結構,外面的鍵名不一樣,展開后的鍵名是一樣的:
{
top250:{movies:[...]},
inTheater:{movies:[...]},
comingSoon:{movies:[...]}
}
然后問題就變成了如何展開top250、comingSoon等鍵了,微信小程序提供了...,使用方式就像步驟三里的一樣,在前面加三個點,就能撥開外層的{},直接把里面的內容往下面傳
總結
其實兩個方案都有異曲同工之妙,都是往Template里面傳相同的鍵名,第一種方案比較直接,直接用wx:for-item指定一個鍵名,然后循環設置;第二種比較麻煩,要修改js,將數據多加一層,然后里面的鍵名仍都保持一樣,一旦展開里面的鍵名也就一樣了








