微信小程序-temlate模板学习

模板和组件有点相似，但是两者最大的区别就是：

模板主要用于显示，方法需要在被调用的页面中进行定义。
组件则是拥有自己的业务逻辑，可以当作是一个独立的页面。

总结就是：演示一些数据使用模板就可以，涉及到许多业务逻辑和交互，最好使用组件。今天将对模板template进行基础学习。

目录如下：

<!--pages/tabbar2/template/template01/template01.wxml-->
<view>
    模板示例
</view>


<template name="userTemp">
    <view class="user">
        <view>姓名：{{item.name}}</view>
        <view>性别：{{item.sex}}</view>
        <view>年龄：{{item.age}}</view>
    </view>
</template>


<template name="msgItem">
  <view>
    <view> {{index}}: {{msg}} </view>
    <view> Time: {{time}} </view>
  </view>
</template>

<template name="weekend">
    <view class="box">
        <view>今天是：{{item.day}} </view>
        <view>我准备：{{item.con}} </view>
        <view>运动有：{{item.relax}} </view>
        <view>今天是：{{item.day}} </view>
    </view>
</template>

注意！template下wxss/js 写了都不能有效

<!--pages/tabbar2/templatetest/template01/index/index.wxml-->
<import src="../template01/template01" />


<view class="container">
    <block  wx:for="{{users}}" wx:for-item="item">
        <template is="userTemp" data="{{item}}" />
    </block>

    <template is="msgItem" data="{{...item}}"/>　
    
    <block wx:for="{{weekendItem}}">
        <template is="weekend" data="{{item}}"></template>        
    </block>
</view>

// pages/tabbar2/templatetest/template01/index/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        users:[
            {
                name:'张三',
                sex:'男',
                age:'18'
            },{
                name:'李四',
                sex:'男',
                age:'18'
            },{
                name:'桃儿',
                sex:'男',
                age:'18'
            },
        ],
        item: {
            index: 0,
            msg: 'this is a template',
            time: '2016-09-15'
        },
        weekendItem:[
            {
                day: 'Mon',
                con: '学习',
                relax: 'running'
            },
            {
                day: 'Thur',
                con: '工作',
                relax: 'running'
            },
            {
                day: 'Wed',
                con: '看书',
                relax: 'running'
            },
        ]
    },

/* pages/tabbar2/templatetest/template01/index/index.wxss */
.user{
    display: flex;
}
.user view{
    border: 1px solid;
    width: 200rpx;
    box-sizing: border-box;
}
.box{
    margin: 10rpx;
    border: 2rpx solid pink;
}