【详细】小程序模板使用教程m037218227的博客-

模板template

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

1. 定义模板

（1）定义模板wxml

（2）定义模板wxss

2. 使用模板

（1）常规使用

（2）高效使用

定义模板

（1）wxml

 <!--templates/message/message.wxml--> <template name='message'> //模板名称   <view class="message-group">     // 模板属性     <text class='content'>{{content}}</text>     <text class='friend'>{{friend}}</text>     <text class='time'>{{time}}</text>   </view> </template>

（2）wxss

 /* templates/message/message.wxss */ // 模板布局 .message-group {   height: 50px;   border-bottom: 1px solid #e4e4e4;   line-height: 50px；; }  .message-group .content {   float: left;   align-content: center;   justify-content: center; }  .message-group .friend {   float: right;   font-size: burlywood;   font-size: 12p }

使用模板 

常规使用模板

 <!-- 先导入模板 --> <!-- ../../../ 返回顶层目录 --> <import src="../../../templates/message/message.wxml"/>  <!-- 引用模板 --> <template is="message" data="{{content:'我们一起去唱歌吧！', firend:'周杰伦'}}"/>

效果如图

高效使用模拟服务端请求

js

 //js文件，绑定数据   data: {     messages: [{         content: '我们一起去唱歌吧！',         friend: '周杰伦'       },       {         content: '我给你做十二道锋味！',         friend: '谢霆锋'       }     ]   }

 wxml

 <!-- 循环取数据，模仿服务端 --> <template is = "message" wx:for="{{messages}}" data="{{content:item.content, friend:item.friend}}"/>  <!-- ...item自动解包 --> <template is = "message" wx:for="{{messages}}" data="{{...item}}"/> 

…item 可以自动解包 

效果如图