小程序模板--评分星星

本章咱们将以一个实战项目为主要内容，穿插讲解小程序的各类概念。由于没有UI和后端，因此，咱们这里使用豆瓣电影的API和小程序豆瓣评分做为学习材料。最终咱们将会完成一个相似下图的小程序。（你们能够搜索小程序，豆瓣评分，线上已经有了。） 首先咱们来分析一下这个小程序，主要分为电影和我的中心（我的中心咱们放后面讨论）。电影主要分为近期上映、热门电影、电视剧、综艺四个模块。 （后续看公共API可以获取到什么数据咱们就用什么数据。） 经过观察发现，界面上好多同样的元素，如 其中这个星级评分在别的地方中也常常使用到。 正如咱们在代码复用中常作的同样，咱们会将一些公共的、常常使用的业务逻辑代码提取成一个公共的函数，这就是所谓的封装。 在界面上咱们也能够经过封装来管理一些常常出现的界面。 小程序就提供了这样的封装方法叫作模板。（这句话不太对，这个意思！） 这个模板化在AngularJS（ionic1）中咱们就有使用过，可是小程序只能把界面那部份内容封装起来。不能把逻辑代码分装。 咱们先来建立小星星的那个模板。如今pages目录下新建public目录，用于存放公共的模板文件和公共方法。 在public目录下新建tpl目录，用于存放模板。 首先要有星星的三个状态，我是从豆瓣上拔下来的，三张图片。在最上层目录新建images文件夹。点击右侧...打开菜单栏，在硬盘中打开，而后把咱们下载的三张图片放到这里面，刷新一下工具就有了。 新建stars.wxss和stars.wxml. 先编写代码以下：stars.wxml. 看上图咱们知道，这模板分为左边的星星和右边的分数。 而后咱们就能够是使用第一章第四节中提过的flex布局：http://blog.csdn.NET/onil_chen/article/details/76293294   [html] view plain copy <template name="starsTpl">   <!-- 这里要声明这个模板的名字 -->       <view class="rankcontauber">       <!-- 模板从这里开始的，每个view在新家的时候工具会自动加一个classname，这里按本身喜欢修改一下 -->           <view class="rankstars">           <!-- 这是咱们左边的星星数，咱们先放5个星星全满的，用的静态数据，咱们先看界面怎么编写 -->               <image src="/images/starfull.png"></image>               <image src="/images/starfull.png"></image>               <image src="/images/starfull.png"></image>               <image src="/images/starfull.png"></image>               <image src="/images/starfull.png"></image>           </view>           <!-- 右边的成绩，看得出来和上面的星星是左右布局的 -->           <text class="rankscore">10.0</text>       </view>   </template>   咱们暂时先编写这个模板，没有样式，也没有数据，咱们接着来看，如何使用这个模板。   咱们仍是拿初始页来编写demo。 运行代码，咱们可以看到刚才咱们编写的stars模板已经被成功引用进来了。 接下来咱们开始编写样式，达到咱们想要的效果。 首先咱们能够看出星星和分数是左右布局的，五个星星也是左右布局的，因此咱们能够声明最外层的view的display:flex;flex-direction: row; 而后再声明五个星星所在的view的display:flex;flex-direction: row;（不清楚的，能够查看第一章第四节http://blog.csdn.net/onil_chen/article/details/76293294） 咱们编写stars.wxss文件以下：   [html] view plain copy .rankcontauber{     display: flex;     flex-direction: row;   }   .rankstars{     display: flex;     flex-direction: row;     height: 25rpx;     margin-right: 6rpx;     margin-top: 12rpx;   }   .rankstars image{     padding-left: 3rpx;     height: 25rpx;     width: 25rpx;   }   .rankscore{     color: #4A6141   }   运行效果和刚才同样，由于咱们并无引用stars.wxss文件，因此打开index.wxss文件，在文件头部加入 @import "../public/tpl/stars.wxss";  运行效果以下： 基本上达到咱们要的效果了。接下来咱们修改一下stars.wxml文件，使得stars模板可以接收外部数据。 经过分析咱们知道了，这个小模块须要绑定的数据就是五个星星的状态和分数。 严格来讲，外部应该提供一个分数，咱们就可以实现这些数据的绑定，如angularjs中，咱们就是这么实现的。 可是因为小程序不能将逻辑代码分装到模板中，因此这里咱们须要一个表示星星状态的数据和分数。 咱们用0、一、2分别表明星星的三个状态。 五个同样的元素因此咱们使用wx:for进行循环。 由于没有找到相似ng-src的属性，因此，使用三个wx:if来控制星星状态。 修改stars.wxml代码以下： 而后修改index.wxml中引用starsTpl的地方。 <template is="starsTpl" data="{{starsArr:[2,2,2,2,2],starScore:12}}"></template> 这里做为直观的测试，咱们将传递的数据直接写在wxm中。运行代码效果以下所示： 咱们在接着修改index.js,在初始化数据中加入两个变量。 而后修改index.wxml中引用starsTpl的地方。 <template is="starsTpl" data="{{starsArr:starsArr,starScore:starScore}}"></template> 运行效果以下： 这样咱们就实现了，从最外层的逻辑代码一层层的往下传递数据，实现数据绑定。 -------------------------------------修改补充------------------------------------- 考虑了一下，仍是外部传进一个分数，自动设置星星状态，会比较方便，代码修改以下：（源文件中没有修改） 运行效果以下：