选项卡可以含有图标，配置方法如下：
{"pagePath": "pages/movies/index",
"text": "电影",
"iconPath": "images/tabbar/movie.png",
"selectedIconPath": "images/tabbar/movieSelected.png"
}
一个为默认图标，一个是选中时显示的图标。（请看图标路径，我在左侧目录树的根目录新建了images/tabbar目录，并放入了4张图标，图标资源在Github源码中有）
这样，首页Tab便完成了。接下来我们来分析页面结构，并实现一些公用的template模板文件。
分析开发需求作为编码者，在开始编码之前，我们要养成先从整体层面上分析整体需求的好习惯，有利于后续的代码编写及维护。
观察首页、更多页和电影详情页，可以很容易地归纳出一些可以共用的页面元素：1.首页由三大块组成，正在热映、即将上映和排行榜区块除了数据不同，页面结构是相同的（即红色框，后文我用block区块模板代指这块）；2.每个block模板中含有若干个海报模板，由电影海报、电影名称和评分条、评分数组成（蓝色框，后文称poster海报模板）；3.每个评分条是由5颗星星组成的（粉红框，后文称ratingbar评分条模板）。
评分条模板模板页面（template）是官方提供的一种实现页面元素复用、减少重复工作的良好实现形式。
从上面的分析中，我们发现这里提到的三个模板是层层嵌套的，因此，作为入门学习者，我们先从最内层的模板开始实现，即先实现评分条ratingbar模板文件。
评分星星有三种状态，我们在images目录中新建ratingbar目录，并将这三个星星图标放入。（Github源码中含有本文所需的所有素材）
在movies目录右键鼠标，依次新建名为ratingbar的目录和Page。打开app.json文件，我们发现开发者工具自动在pages值为我们配置了ratingbar页面的路径。
作为模板文件，是在其它页面中导入使用的，它不会单独被使用，因此其实它不需要在app.json的pages值中配置路径，并且该页面只需wxml和wxss即可，js和json文件都是用不上的，它所含的页面元素的数据和行为都是由引用它的页面来操纵的，后文会对此有所涉及。