全栈工程师之路-中级篇之小程序开发-第二章第一节小程序的模板-评分星星模板

本章我们将以一个实战项目为主要内容，穿插讲解小程序的各种概念。

因为没有UI和后端，所以，我们这里使用豆瓣电影的API和小程序豆瓣评分作为学习材料。

最终我们将会完成一个类似下图的小程序。（大家可以搜索小程序，豆瓣评分，线上已经有了。）

首先我们来分析一下这个小程序，主要分为电影和个人中心（个人中心我们放后面讨论）。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。

（后续看公共API能够获取到什么数据我们就用什么数据。）

通过观察发现，界面上好多一样的元素，如

其中这个星级评分在别的地方中也经常使用到。

正如我们在代码复用中常做的一样，我们会将一些公共的、经常使用的业务逻辑代码提取成一个公共的函数，这就是所谓的封装。

在界面上我们也可以通过封装来管理一些经常出现的界面。

小程序就提供了这样的封装方法叫做模板。（这句话不太对，这个意思！）

这个模板化在angularjs（ionic1）中我们就有使用过，但是小程序只能把界面那部分内容封装起来。不能把逻辑代码分装。

我们先来创建小星星的那个模板。现在pages目录下新建public目录，用于存放公共的模板文件和公共方法。

在public目录下新建tpl目录，用于存放模板。

首先要有星星的三个状态，我是从豆瓣上拔下来的，三张图片。在最上层目录新建images文件夹。点击右侧...打开菜单栏，在硬盘中打开，然后把我们下载的三张图片放到这里面，刷新一下工具就有了。