小程序学习---模板

在编写小程序界面的时候，你会发现有很多东西非常类似，它们看起来就像一个组件一样。例如，我们可以看到豆瓣有一个5星的评分样式，如果要拿到小程序这里展示的话，本身是没有5星这个控件的（在android中有）。在小程序中，我们可以使用5个星状的图片来组成一个评分的工具条。你可以想象的到，这个评分工具就是5个image控件平铺排列，很简单的。

<view>
    <image src='/images/logo.jpg' class="start.png"</image>
    <image src='/images/logo.jpg' class="start.png"</image>
    <image src='/images/logo.jpg' class="start.png"</image>
    <image src='/images/logo.jpg' class="start.png"</image>
    <image src='/images/logo.jpg' class="start.png"</image>
</view>

上面的代码就可以简单的实现一个5星的评分工具，那如果我们要重复利用这个评分工具呢，是否每次都复制上面的代码？？？

一、小程序模板

   在小程序的wxml文件中，提供了模板机制，可以定义一个wxml的代码片段，然后在不同的地方调用

   1、定义模板

使用name属性，作为模板的名字。然后在内定义代码片段，我们来定义一个5星的评分模板

<template name="score">
    <image src="/star.png"/>
    <image src="/star.png"/>
    <image src="/star.png"/>
    <image src="/star.png"/>
    <image src="/star.png"/>
</template>

2、使用模板

1）使用 is 属性，声明需要的使用的模板，is=“模板名称”

2）使用import引入模板需要的wxml文件

例如要在index界面中使用评分模板

<import src="/pages/template/score-template.wxml" />
<view class='today-container'>
    <template is="score" /> <!—-注意名字-->
</view>

3、模板的样式

当我们在score.wxml中定义一个模板的时候，一般会同时匹配一个score.wxss样式文件。如果要使用样式文件那么你需要使用import语句引入，例如我们在index.wxml中引入了score.wxml文件，同时需要在index.wxss文件中引入score.wxss文件

@import "/pages/template/score.wxss"

二、需要传入数据的模板

    很多时候，我们的模板也是灵活的，他可以根据需要来传递不同的数据。同样还是上面的评分模板，我们来修改一下，让它实现不同的评分样式。例如可以让它显示更多的星星，或者用苹果图片来显示评分。

    下面我们来演示一个动态的评分条，评分图案以及个数都依赖js文件中的数据

<template name="score">
    <view class='temp-con'>
        <block wx:for="{{imgData}}">
            <image wx:if="{{item===1}}" src='{{imgPath_t}}' class='item-img' />
            <image wx:else src='{{imgPath_f}}' class='item-img' />
        </block>
    </view>
</template>

2、在使用template的时候，用data属性传入数据。注意，一般我们会将传入的数据展开（使用“…”语法）

<import src="/pages/template/score.wxml"/>
<view class='container'>
    <image class="background" src='/images/weather-back.jpg'></image>
    <view class="weather-container">
        <template is="score" data="{{...scoreData}}"/>
    </view>
</view>

Page({

    /**
     * 页面的初始数据
     */
    data: {
        scoreData:{
            imgData:[1,0,0,0,0,0],
            imgPath_t:"/images/cloud.png",
            imgPath_f:"/images/sun.png"
        }
    },
}）

3、需要在引用模板的wxml文件中使用import引入template文件，同时

需要在对应的wxss文件中引入模板的wxss文件