边做边学入门微信小程序之仿豆瓣评分 (6)

然后将ratingbar.wxml文件内容修改为：

<!--pages/movies/ratingbar/ratingbar.wxml-->
<view class=http://www.likecs.com/'ratingbar-stars'>
<!--count数组长度为5，共5次循环显示5颗星星-->
<block wx:for=http://www.likecs.com/"{{count}}">
<!--全黄星星-->
<image wx:if=http://www.likecs.com/"{{stars/10>=index+1}}" src=http://www.likecs.com/'/images/ratingbar/star_fill_whole.png' />
<!--半黄半灰星星-->
<image wx:elif=http://www.likecs.com/"{{stars/10>=index && stars%10!=0}}" src=http://www.likecs.com/'/images/ratingbar/star_fill_half.png' />
<!--全灰星星-->
<image wx:else src=http://www.likecs.com/'/images/ratingbar/star_fill_none.png' />
</block>
</view>

按Ctrl+S保存看看模拟器的效果，把stars的值改为其它数（0-50之间）试试看星星的显示效果吧。Tips：这里的条件语句是研究豆瓣电影API里电影评分的规律得来的。它的stars取值为0/5/10……40/45/50。

据我们之前对豆瓣评分小程序的分析，评分条一般作为一个元素在相关页面中显示，不会独立作为页面来显示。小程序官方提供了机制来解决这种复用性的问题，代码片段一处编写，多处使用，极大地精简了代码的臃肿，也令程序员有更多精力专注于必要的地方。其结构如下：

<template name=http://www.likecs.com/"模板名称">
<!--这里是要复用的代码片段-->
</template>

我们将刚才编写的ratingbar.wxml代码最外层加上模板标识：

<!--pages/movies/ratingbar/ratingbar.wxml-->
<template name=http://www.likecs.com/"template-ratingbar-stars">
<view class=http://www.likecs.com/'ratingbar-stars'>
<!--数组长度为5，共5次循环显示5颗星星-->
<block wx:for=http://www.likecs.com/"{{[3,5,6,8,9]}}">
<!--全黄星星-->
<image wx:if=http://www.likecs.com/"{{stars/10>=index+1}}" src=http://www.likecs.com/'/images/ratingbar/star_fill_whole.png' />
<!--半黄半灰星星-->
<image wx:elif=http://www.likecs.com/"{{stars/10>=index && stars%10!=0}}" src=http://www.likecs.com/'/images/ratingbar/star_fill_half.png' />
<!--全灰星星-->
<image wx:else src=http://www.likecs.com/'/images/ratingbar/star_fill_none.png' />
</block>
</view>
</template>

模板名称是template-ratingbar-stars，在其它页面引入本模板后，根据该名称即可找到此模板。因为评分条有且只有5颗星星，所以这里将count的值直接写在此处wx:for="{{[3,5,6,8,9]}}"，然后我们把ratingbar.js中的相关值注释掉：

Page({
data: {
// count:[3,5,6,8,9],
// stars:16
}
})

因为作为模板，将在多处调用，其所使用的值（如这里的stars）将由调用的地方传入，也正因为这样，才有复用性可言。其实，模板文件只有wxml和wxss有用，js和json文件删除亦可。

电影海报模板

接下来，我们来编写电影海报，就是蓝框这个：

img有多处使用了这样的结构，显然，也应当是一个模板文件。

 

我们可以参照编写评分条模板的步骤，先将其当作为一个页面，配置在小程序的首页，在js中模拟数据，调试成功后，再改成模板页面。

首先，在movies目录下新建poster目录和poster页面，在app.json的pages属性中，将poster页面路径放在首位（ratingbar路径可以删除），以便在模拟器中查看效果和调试。

{
"pages": [
"pages/movies/poster/poster",
"pages/movies/ratingbar/ratingbar",
"pages/movies/index",
"pages/mine/mine"
],
……
}