【详细】小程序模板使用教程

模板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 可以自动解包 

效果如图