慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-7.15星星评分组件的实现

第7章 开始制作电影资讯页面

7.15.星星评分组件的实现

1.在项目下新建目录 utils

2.进入项目下目录 utils，新建文件 util.js

function convertToStarsArray(stars) {
  var num = stars.toString().substring(0, 1);
  var array = [];
  for (var i = 1; i <= 5; i++) {
    if (i <= num) {
      array.push(1);
    } else {
      array.push(0);
    }
  }
  return array;
}

module.exports = {
  convertToStarsArray: convertToStarsArray
}

3.进入目录 pages/movies，修改文件 movies.js，包含 util.js 文件，添加星星代码

var util = require('../../utils/util.js')
var app = getApp();
Page({
  data: {
    inTheaters: {},
    comingSoon: {},
    top250: {}
  },
  onLoad: function(event) {
    var inTheatersUrl = app.globalData.doubanBase + "/v2/movie/in_theaters" + "?start=0&count=3";
    var comingSoonUrl = app.globalData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";
    var top250Url = app.globalData.doubanBase + "v2/movie/top250" + "?start=0&count=3";
    this.getMovieListData(inTheatersUrl, "inTheaters");
    this.getMovieListData(comingSoonUrl, "comingSoon");
    this.getMovieListData(top250Url, "top250");
  },
  getMovieListData: function(url, settedKey) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function(res) {
        console.log(res);
        that.processDoubanData(res.data, settedKey);
      },
      fail: function(error) {
        console.log(error)
      },
    })
  },
  processDoubanData: function(moviesDouban, settedKey) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx];
      var title = subject.title;
      if (title.length >= 6) {
        title = title.substring(0, 6) + '...';
      }
      var tmep = {
        stars: util.convertToStarsArray(subject.rating.stars),
        title: title,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp);
    }
    var readyData = {};
    readyData[settedKey] = {
      movies:movies
    };
    this.setData(readyData);
  }
})

4.进入目录 pages/movies/moive，修改文件 movie-template.wxml，添加星星动态数据

<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
  <view class="movie-container">
    <image class="movie-image" src="{{coverageUrl}}"></image>
    <text class="movie-title">{{title}}</text>
    <template is="starsTemplate" data="{{stars:stars, score:average}}"/>
  </view>
</template>

5.进入目录 pages/movies/stars，修改文件 stars-template.wxml，添加星星动态数据　　

<template name="starsTemplate">
  <view class="stars-container">
    <view class="stars">
      <block wx:for="{{stars}}" wx:for-item="i">          
        <image wx:if="{{i}}" src="/images/icon/star.png"></image>
        <image wx:else src="/images/icon/none-star.png"></image>
        <!-- <image wx:if="{{i==1}}"></image>
        <image wx:elif="{{i==2}}"></image>
        <image wx:elif="{{i==2}}"></image>
        <image wx:elif="{{i==2}}"></image>
        <image wx:else></image> -->
      </block>
      <!-- <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image> -->
    </view>
    <text class="star-score">{{average}}</text>
  </view>
</template>