小程序学习---模板

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

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

一、小程序模板

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

   1、定义模板

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

2、使用模板

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

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

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

3、模板的样式

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

二、需要传入数据的模板

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

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