微信小程序-模版详解template
微信的模版主要是用于公共界面管理,比如弹窗或公共页面都可以用模版定义。
一、模版创建
1、首先在pages文件夹中新建一个template文件夹,文件夹中新建一个template.wxml文件
<!--template.wxml--><template name="msgItem"> <view> <text class="info">This is template.wxml文件,我是一个模板</text> </view></template>
2、接下来我们就给模板增加样式文件,在pages/template文件夹中新建一个template.wxss文件,然后对模板文件,添加一个简单样式。
/* 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、当前页面样式导入
/**index.wxss**/@import "../template/template.wxss";
注意
:(1)index.wxml中template 标签的is属性与template.wxml中template 标签的name属性值相同
(2)index.wxml文件中要通过import标签声明需要使用的模板文件
运行效果:
屏幕快照 2018-09-27 下午8.37.16.png
三:数据传递
1、有时候模版需要外面给他传递数据显示,这时先定义参数
<!--template.wxml--><template name="msgItem"> <view> <text class="info">{{infoData}}</text> </view></template>
2、接下来我们在index.wxml中传递模板中所需要的参数,修改后的代码如下:
<!--index.wxml--><!-- 声明需要使用的模板文件 --><import src ="../template/template.wxml"/><view>This is index.wxml</view><!--使用--><template is="msgItem" data="{{'这是一个参数'}}"/>
注意
:在<data="{{'这是一个参数'}}">中传多少个参数,模版里才能获取多少个参数,比如模版需要2个参数,传参的时候要逗号添加,如:<data="{{'这是一个参数','这是第二个参数'}}">