Template of WeChat mini-app tutorial and Wechat mini-app Template

Small Program template for tutorials

Series of articles:

Mini-program tutorial-WXSS
References to mini-program tutorials
Events of mini-program tutorials
Small Program tutorial Template
List rendering of Applet tutorials
Conditional rendering of mini-program tutorials
Data Binding in applet tutorial
Mini-program tutorial-WXML

Template

WXML provides a template that defines code snippets in the template and calls them in different places.

Define Template

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

<!-- 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 to be used, and then pass the data required by the template, such:

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

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

The is attribute can use the Mustache syntax to determine the template to be rendered during the 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>

Template Scope

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

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!