微信小程式（模板）

2021-07-27 09:21:59 字數 1599 閱讀 6247

1.模板：

wxml提供模板（template），可以在模板中定義**片段，然後在不同的地方呼叫。

定義模板：

使用name屬性，作為模板的名字。然後在內定義**片段，如：

name="postitem">


class="post-container">


class="post-author-date">


class="post-author"


src="


}">


image>


class="post-date">


}text>


view>


view>


template>
使用模板：

使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入，如：

src="post-item/post-item-template.wxml"/>


// 注意：在使用模板的時候應該首先用import來引入模板，然後再使用


wx:for="


}">


is="postitem"


data="


}" />


//模板的作用域：


//模板擁有自己的作用域，只能使用data傳入的資料。


block>
同樣在建立乙個post-item-template.wxml模板的時候，同時也應該建立乙個post-item-template.wxss檔案來編寫模板的樣式，也應該在需要使用模板的資料夾下的wxss檔案中使用@import 「post-item/post-item-template.wxss」;來引入模板wxss樣式檔案。

2.在對載入進來的模板進行事件繫結的時候需要注意的是：

先看幾段**：

錯誤的事件繫結做法：

wx:for="}"


wx:key="


}">


is="postitem"


data="}"


catchtap="onposttap" />


block>
注意：因為此時的template模板並不存在於頁面中，只是相當於乙個佔位符，在頁面載入完成後就消失了，此處對template模板進行事件繫結並不會有任何的效果。

如圖所示：

正確的事件繫結做法：

wx:for="}"


wx:key="


}">


catchtap="onposttap">


is="postitem"


data="


}" />


view>


block>
注意：這裡我們可以在模板外面使用乙個view標籤來進行包裹，然後再view標籤上進行事件繫結。就會達到我們所預期的效果。

微信小程式 模板

wxml提供模板 template 可以在模板中定義 片段，然後在不同的地方呼叫。使用 name 屬性，作為模板的名字。然後在內定義 片段，如 time 使用 is 屬性，宣告需要的使用的模板，然後將模板所需要的 data 傳入，如 page is 屬性可以使用 mustache 語法，來動態決定具...

微信小程式 模板（template）

以mui的例項首頁和列表頁面為例項 通過上圖，可以看出兩個頁面的列表部分很相近，以每行作為單元製作模板。1 模板存放的位置以及使用模板頁面存放的位置 template模板的wxml 注意 上邊在同乙個wxml檔案內建立了兩個模板，乙個右側有箭頭，乙個右側無箭頭，以name名識別。template模板...

template模板微信小程式

contentitem mini button view template contentitem data contentitem mini button view template home.wxml中引入 import src wxml btntext.wxml contentitem dat...