微信的模版主要是用于公共界面管理，比如弹窗或公共页面都可以用模版定义。
一、模板创建
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标签声明需要使用的模板文件
三：数据传递
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="{{infoData: '这是一个参数'}}"/>
作者：木马不在转
链接：https://www.jianshu.com/p/cfca91e9a78b
网友评论