小程序学习---模板

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

点击(此处)折叠或打开

1. view>
   
2.     image src='/images/logo.jpg' class="start.png"/image>
   
3.     image src='/images/logo.jpg' class="start.png"/image>
   
4.     image src='/images/logo.jpg' class="start.png"/image>
   
5.     image src='/images/logo.jpg' class="start.png"/image>
   
6.     image src='/images/logo.jpg' class="start.png"/image>
   
7. /view>

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

一、小程序模板

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

   1、定义模板

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

点击(此处)折叠或打开

1. template name="score">
   
2.     image src="/star.png"/>
   
3.     image src="/star.png"/>
   
4.     image src="/star.png"/>
   
5.     image src="/star.png"/>
   
6.     image src="/star.png"/>
   
7. /template>

2、使用模板

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

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

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

点击(此处)折叠或打开

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

3、模板的样式

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

点击(此处)折叠或打开

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

二、需要传入数据的模板

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

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

点击(此处)折叠或打开

1. template name="score">
   
2.     view class='temp-con'>
   
3.         block wx:for="{{imgData}}">
   
4.             image wx:if="{{item===1}}" src='{{imgPath_t}}' class='item-img' />
   
5.             image wx:else src='{{imgPath_f}}' class='item-img' />
   
6.         /block>
   
7.     /view>
   
8. /template> 

1. 
   
2. 
   
3.     
   
4.     
   
5.         
   
6.     
   
7. 
   
8. 
   
9. 
   
10.   
    
11.     
    
12.      
    
13.      
    
14.     
    
15.         
    
16.             
    
17.             
    
18.             
    
19.         
    
20.