慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-电影页面数据绑定（上）

电影页面数据绑定（上）

1.进入目录 pages/movies，修改文件 movies.js，获取豆瓣API数据

var app = getApp();
Page({
  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);
    this.getMovieListData(comingSoonUrl);
    this.getMovieListData(top250Url);
  },
  getMovieListData: function(url) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET',
      header: {
        "Content-Type": "json"
      },
      success: function(res) {
        console.log(res);
        that.processDoubanData(res.data);
      },
      fail: function(error) {
        console.log(error)
      },
    })
  }, 
  processDoubanData:function(moviesDouban) {
    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 = {
        title:title,
        average:subject.rating.average,
        coverageUrl:subject.images.large,
        movieId:subject.id
      }
      movies.push(temp);
    }
    this.setData({
      moives:movies
    });
  }
})

2.进入目录 pages/movies，修改文件 movies.wxml，添加动态数据

<import src="movie-list/movie-list-template.wxml" />
<view class="container">
  <view class="movies-template">
    <template is="movieListTemplate" data="{{movies}}" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" />
  </view>
  <view class="movies-template">
    <template is="movieListTemplate" />
  </view>
</view>

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

<import src="../movie/movie-template" />
<template name="movieListTemplate">
  <view class="movie-list-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="moive">
          <template is="movieTemplate" data="{{...moive}}"/>
        </block>
      </view>
    </view>
  </view>
</template>

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="{{average}}"/>
  </view>
</template>

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

<template name="starsTemplate">
  <view class="stars-container">
    <view class="stars">
      <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>

6.修改文件 app.js，添加全局变量　

text {
  font-family:MicroSoft Yahei;
  font-size:24rpx;
  color: #666;
}