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

21.电影页面数据绑定

movies.js

var app = getApp();Page({  data: {    inTheaters: {},    comingSoon: {},    top250: {},  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var baseUrl = app.globalData.g_baseUrl;    var inTheatersUrl = baseUrl +"/v2/movie/in_theaters" + "?start=0&count=3";    var comingSoonUrl = baseUrl + "/v2/movie/coming_soon" + "?start=0&count=3";    var top250Url = baseUrl + "/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 title = subject.title;      if (title.length >= 6) {        title = title.substring(0, 6) + "...";      }      var temp = {        title: title,        average: subject.rating.average,        coverageUrl: subject.images.large,        movieId: subject.id      }      movies.push(temp)    }    var readyData = {};    readyData[setKey] = {      movies: movies    }    this.setData(readyData);        }})

movies.wxml

<import src="movie-list/movie-list-template.wxml" /><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.wxml

<import src="../movie/movie-template.wxml" /><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.wxml

<import src="../stars/stars-template.wxml" /><template name="movieTemplate">    <view class="movie-container">      <image class="movie-img" src='{{coverageUrl}}'></image>      <text class="movie-title">{{title}}</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),        title: title,        average: subject.rating.average,        coverageUrl: subject.images.large,        movieId: subject.id,      }

movie.wxml

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

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>      </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, categoryTitle) {    .    .    .      success: function (res) {        console.log(res)        that.processDoubanDate(res.data, setKey,categoryTitle)      }    })  },processDoubanDate: function (moviesDouban, setKey,categoryTitle) {    .    .    .        readyData[setKey] = {      movies: movies,      categoryTitle: categoryTitle    }    this.setData(readyData);        }

movie-list-template.wxml

<text class="slogan">{{categoryTitle}}</text>