微信小程序实战–集阅读与电影于一体的小程序项目（五）

21.电影页面数据绑定

movies.js

var app = getApp();
Page({
  data: {
    inTheaters: {},
    comingSoon: {},
    top250: {},
  },

  /**
   * 生命周期函数--监听页面加载
   */
   : function (options) {
    var  Url = app.globalData.g_ Url;
    var inTheatersUrl =  Url +\"/v2/movie/in_theaters\" + \"?start=0&count=3\";
    var comingSoonUrl =  Url + \"/v2/movie/coming_soon\" + \"?start=0&count=3\";
    var top250Url =  Url + \"/v2/movie/top250\" + \"?start=0&count=3\";
    this.getMovieList(inTheatersUrl, \"inTheaters\")
    this.getMovieList(comingSoonUrl, \"comingSoon\");
    this.getMovieList(top250Url, \"top250\");
  },

  getMovieList(url, setKey) {
    var that = this
    wx.request({
      url: url,
      data: {},
      method: \'GET\',
      header: {
        \'content-type\': \'json\' // 默认值 application/json
      },
      success: function (res) {
        console.log(res)
        that.processDoubanDate(res.data, setKey)
      }
    })
  },

  processDoubanDate: function (moviesDouban, setKey) {
    var movies = [];
    for (var idx in moviesDouban.subjects) {
      var subject = moviesDouban.subjects[idx]
      var   = subject. ;
      if ( .length >= 6) {
          =  .substring(0, 6) + \"...\";
      }
      var temp = {
         :  ,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp)
    }
    var readyData = {};
    readyData[setKey] = {
      movies: movies
    }
    this.setData(readyData);
      
  }
})

movies.w

<import src=\"movie-list/movie-list-template.w \" />

<view class=\"container\">
  <view class=\"movies-template\">
    <template is=\"movielistTemplate\" data=\"{{...inTheaters}}\" />
  </view>
  <view class=\"movies-template\">
    <template is=\"movielistTemplate\" data=\"{{...comingSoon}}\" />
  </view>
  <view class=\"movies-template\">
    <template is=\"movielistTemplate\" data=\"{{...top250}}\" />
  </view>
</view>

movie-list-template.w

<import src=\"../movie/movie-template.w \" />
<template name=\"movielistTemplate\">
  <view class=\"movie-lsit-container\">
    <view class=\"inner-container\">
      <view class=\"movie-head\">
        <text class=\"slogan\">正在热映</text>
        <view class=\"more\">
          <text class=\"more-text\">更多</text>
          <image class=\"more-img\" src=\"/images/icon/arrow-right.png\"></image>
        </view>
      </view>

      <view class=\"movies-container\">
        <block wx:for=\"{{movies}}\" wx:for-item=\"movie\">
        <template is=\"movieTemplate\" data=\"{{...movie}}\" />
        </block>
      </view>
    </view>
  </view>

</template>

movie-template.w

<import src=\"../stars/stars-template.w \" />
<template name=\"movieTemplate\">
    <view class=\"movie-container\">
      <image class=\"movie-img\" src=\'{{coverageUrl}}\'></image>
      <text class=\"movie- \">{{ }}</text>
      <template is=\"starsTemplate\" data=\"{{average}}\" />
    </view>
  </template>

预览

22.星星评分组件的实现

utils/util.js

function convertToStarArray(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 = {
  convertToStarArray: convertToStarArray,
};

movies.js

var util = require(\'../../utils/util.js\')

var temp = {
        stars: util.convertToStarArray(subject.rating.stars),
         :  ,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id,
      }

movie.w

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

stars-template.w

<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>
      </block>
    </view>
    <text class=\"star-score \">{{average}}</text>
  </view>
</template>

23.更换电影分类标题

movies.js

this.getMovieList(inTheatersUrl, \"inTheaters\", \"正在热映\")
this.getMovieList(comingSoonUrl, \"comingSoon\", \"即将上映\");
this.getMovieList(top250Url, \"top250\", \"豆瓣Top250\");

 getMovieList(url, setKey, category ) {
    .
    .
    .
      success: function (res) {
        console.log(res)
        that.processDoubanDate(res.data, setKey,category )
      }
    })
  },

processDoubanDate: function (moviesDouban, setKey,category ) {
    .
    .
    .
    
    readyData[setKey] = {
      movies: movies,
      category : category 
    }
    this.setData(readyData);
      
  }

movie-list-template.w

<text class=\"slogan\">{{category }}</text>