【詳細】小程序模板使用教程

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

效果如圖