微信小程序-模版詳解<template>

微信的模版主要是用于公共界面管理,比如彈窗或公共頁面都可以用模版定義。

一、模版創(chuàng)建

1、首先在pages文件夾中新建一個(gè)template文件夾,文件夾中新建一個(gè)template.wxml文件

<!--template.wxml-->
<template name="msgItem">
  <view>
    <text class="info">This is template.wxml文件,我是一個(gè)模板</text>
  </view>
</template>

2、接下來我們就給模板增加樣式文件,在pages/template文件夾中新建一個(gè)template.wxss文件,然后對模板文件,添加一個(gè)簡單樣式。

/* pages/template/template.wxss */
.template_style{
  font-size: 30rpx;
  color: #000000;
}
二:模版使用

1、然后在我們要使用的wxml加載

<!--index.wxml-->
<!-- 聲明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>

<view>This is index.wxml</view>
<!--使用-->
<template is="msgItem"/>

2、當(dāng)前頁面樣式導(dǎo)入

/**index.wxss**/
@import "../template/template.wxss";

注意
(1)index.wxml中template 標(biāo)簽的is屬性與template.wxml中template 標(biāo)簽的name屬性值相同
(2)index.wxml文件中要通過import標(biāo)簽聲明需要使用的模板文件
運(yùn)行效果:

屏幕快照 2018-09-27 下午8.37.16.png

三:數(shù)據(jù)傳遞

1、有時(shí)候模版需要外面給他傳遞數(shù)據(jù)顯示,這時(shí)先定義參數(shù)

<!--template.wxml-->
<template name="msgItem">
  <view>
    <text class="info">{{infoData}}</text>
  </view>
</template>

2、接下來我們在index.wxml中傳遞模板中所需要的參數(shù),修改后的代碼如下:

<!--index.wxml-->
<!-- 聲明需要使用的模板文件 -->
<import src ="../template/template.wxml"/>

<view>This is index.wxml</view>
<!--使用-->
<template is="msgItem"  data="{{'這是一個(gè)參數(shù)'}}"/>

注意
在<data="{{'這是一個(gè)參數(shù)'}}">中傳多少個(gè)參數(shù),模版里才能獲取多少個(gè)參數(shù),比如模版需要2個(gè)參數(shù),傳參的時(shí)候要逗號添加,如:<data="{{'這是一個(gè)參數(shù)','這是第二個(gè)參數(shù)'}}">

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容