WeChat Mini Program Template

Template

WXML provides a template (template), which can define code snippets in the template and then call them in different places.

Define template

Use the name attribute as the name of the template. Then define the code snippet in <template/>, such as:

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

Use template

Use the is attribute to declare the template you need to use, Then pass in the data required by the template, such as:

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

The is attribute can use Mustache syntax to determine which template needs to be rendered at runtime:

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

The scope of the template

The template has its own scope and can only use the data passed in by data.