怎么在微信小程序中使用template模版？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

員工經(jīng)過(guò)長(zhǎng)期磨合與沉淀，具備了協(xié)作精神，得以通過(guò)團(tuán)隊(duì)的力量開(kāi)發(fā)出優(yōu)質(zhì)的產(chǎn)品。成都創(chuàng)新互聯(lián)堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡(jiǎn)單”。公司專注于為企業(yè)提供網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、電商網(wǎng)站開(kāi)發(fā)，微信小程序定制開(kāi)發(fā)，軟件定制網(wǎng)站等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

1. 創(chuàng)建 template 模版

不同于 page 和 Component 的創(chuàng)建， 在開(kāi)發(fā)者工具中并不能快速創(chuàng)建一個(gè) template 模版。所以需要單獨(dú)創(chuàng)建 wxss wxml 文件。

template.wxml 文件語(yǔ)法

一個(gè) template.wxml 文件中使用 <template> 標(biāo)簽包含一個(gè)模版， 一個(gè) template.wxml 文件可以包含多個(gè) <template>模版， 使用 name 屬性作為模版的名稱。

在模版中可以接受變量， 使用 {{}} 展示。 為變量的傳遞者由調(diào)用該模版的頁(yè)面?zhèn)鬟f。

<template name="A">
 <text>template name: {{name}}</text>
</template>
<template name="B">
 <text>template name: {{name}} {{msg}}</text>
</template>

template.wxss 模版樣式文件

模版可以擁有自己的樣式文件

text{
 color: #cccccc;
}

2. 引用 template 模版

• template 模版的引用需要使用 <import> 標(biāo)簽。 該標(biāo)簽的 src 屬性為需要引用模版的路徑。

• template 模版的使用用 <template> 標(biāo)簽。 使用 is 屬性來(lái)區(qū)別模版文件中定義的模版。

• 使用 data 傳入模版中的數(shù)據(jù)。

index.wxml

<import src="../tpls/template.wxml" />

<view>
 <template is="A" data="{{name}}"/>
 <template is="B" data="{{name, msg}}"/>
<view>

3. 引用模版樣式

在 調(diào)用頁(yè)面的 wxml 中引用了 template.wxml 后，模版的樣式并不會(huì)引用， 需要在調(diào)用頁(yè)面的 wxss 中單獨(dú)引用 template.wxss 文件。

index.wxss

@import "./tpls/template.wxss"

4. 模版文件中的事件處理

在模版中定義的事件, 需要調(diào)用頁(yè)面中執(zhí)行。

template.wxml

<template name="A">
 <text bindtap="handleTap">template name: {{name}}</text>
</template>

index.js

Page({
 data: {},
 handleTap() {
 console.log('template 模版 click')
 }
})

5.  import 有作用域

import 有作用域的概念，即只會(huì) import 目標(biāo)文件中定義的 template，而不會(huì) import 目標(biāo)文件中 import 的 template，簡(jiǎn)言之就是 import 不具有遞歸的特性。

例如：C 引用 B，B 引用A，在C中可以使用B定義的 template，在B中可以使用A定義的 template ，但是C不能使用A定義的template

6. include 配合 template 模版

如同使用 <import src="xx/xx/xx.wxml"> <tempalte is="A" /> 引用和使用模版一樣， 同樣也可以使用 <include src="xx/xx/xx.wxml />" 來(lái)引用一個(gè)模版。

需要注意的是：

• 使用 <include> 引用模版文件時(shí)， 并不能分別出模版文件的模版塊， 所以使用 <include> 引用的模版文件中只能定義一個(gè)模版塊。

• include 可以將目標(biāo)文件中除了 <template/> <wxs/> 外的整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置。

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

當(dāng)前標(biāo)題：怎么在微信小程序中使用template模版
轉(zhuǎn)載源于：http://sd-ha.com/article12/iecddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、App開(kāi)發(fā)、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、定制開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)