第七章 電影首頁

movie.wxml

這里首先規(guī)劃了單個電影小模版，由一張圖片，名字，星星圖片，評分組成；然后形成每一個電影l(fā)ist，循環(huán)重復。有模板的組件，對于后面的開發(fā)，百利而無一害，十分方便。而這一系列的模板都有star，movie，movie-list，movie-grid。下面來闡述其：

stars-template.wxml 

movie-template.wxml 

movie-list-template.wxml 

movie-grid-template.wxml 

movie.js交互實現(xiàn)從服務器公共api獲取數(shù)據(jù)

var util = require('../../utils/util.js')
var app = getApp();
Page({
  //RESFul API JSON
  //SOAP XML WSDL
  data: {
    inTheaters: {},
    comingSoon: {},
    top250: {},
    searchResult: {},
    containerShow: true,
    searchPanelShow: false,
  },
  onLoad: function (options) {
    // 生命周期函數(shù)--監(jiān)聽頁面加載
    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", "豆瓣Top250");
  },

  onMoreTap: function (event) {
    var category = event.currentTarget.dataset.category;
    wx.navigateTo({
      url: 'more-movie/more-movie?category=' + category,
    })
  },
  onMovieTap: function (event) {
    var movieId = event.currentTarget.dataset.movieid;
    wx.navigateTo({
      url: 'movie-detail/movie-detail?id=' + movieId
    })
  },

  getMovieListData: function (url, settedKey, catetoryTitle) {
    var that = this;
    wx.request({
      url: url,
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        'content-type': 'application/xml'
      }, // 設置請求的 header
      success: function (res) {
        that.processDoubanDat(res.data, settedKey, catetoryTitle)
      },
      fail: function (error) {
        console.log(error)
      },
    })
  },
  onCancelImgTap: function (event) {
    this.setData({
      containerShow: true,
      searchPanelShow: false,
      searchResult: {}
    })
  },
  onBindFocus: function (event) {
    this.setData({
      containerShow: false,
      searchPanelShow: true
    })
  },
  onBindConfirm: function (event) {
    var text = event.detail.value;
    var searchUrl = app.globalData.doubanBase + "/v2/movie/search?q=" + text;
    this.getMovieListData(searchUrl, "searchResult", "")
  },
  //做數(shù)據(jù)處理
  processDoubanDat: function (moviesdouban, settedKey, catetoryTitle) {
    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 = {
        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] = {
      catetoryTitle: catetoryTitle,
      movies: movies
    };
    this.setData(readyData);
  }
})

•  

網(wǎng)絡請求api是wx.request(object)，這是小程序與開發(fā)者的服務器實現(xiàn)數(shù)據(jù)交互的一個很重要的api。 

---

第八章 電影更多

more-movie.wxml

這就是寫好template的好處，在后面復雜的代碼編寫中，就很簡單的完成一個頁面的設計。

more-movie.js

var app = getApp();
var util = require('../../../utils/util.js');
Page({
  data: {
    movies: {},
    navigateTitle: "",
    requestUrl: "",
    totalCount: 0,
    isEmpty: true,
  },
  onLoad: function (options) {
    var category = options.category;
    this.data.navigateTitle = category;
    var dataUrl = "";
    switch (category) {

      case "正在熱映":
        dataUrl = app.globalData.doubanBase + "/v2/movie/in_theaters";
        break;
      case "即將上映":
        dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon";
        break;
      case "豆瓣Top250":
        dataUrl = app.globalData.doubanBase + "/v2/movie/top250";
        break;
    }
    this.data.requestUrl = dataUrl;
    util.http(dataUrl, this.processDoubanDat)
  },
  onReachBottom: function (event) {
    var nextUrl = this.data.requestUrl + "?start=" + this.data.totalCount + "&count=20";
    util.http(nextUrl, this.processDoubanDat);
    wx.showNavigationBarLoading();
  },
  onPullDownRefresh: function () {
    var refreshUrl = this.data.requestUrl + "?start=0&count=20";
    this.data.movies = {};
    this.data.isEmpty = true;
    this.data.totalCount = 0;
    util.http(refreshUrl, this.processDoubanDat)
    wx.showNavigationBarLoading();
  },
  processDoubanDat: 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 temp = {
        stars: util.convertToStarsArray(subject.rating.stars),
        title: title,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp)
    }
    var totalMovies = {};
    //如果要綁定新加載的數(shù)據(jù)，那么需要同舊有的數(shù)據(jù)合并在一起
    if (!this.data.isEmpty) {
      totalMovies = this.data.movies.concat(movies);
    }
    else {
      totalMovies = movies;
      this.data.isEmpty = false;
    }
    this.setData({
      movies: totalMovies
    });
    this.data.totalCount += 20;
    wx.hideNavigationBarLoading();
    wx.stopPullDownRefresh();
  },

  onReady: function (event) {
    wx.setNavigationBarTitle({
      title: this.data.navigateTitle,
    })
  },
  onMovieTap: function (event) {
    var movieId = event.currentTarget.dataset.movieid;
    wx.navigateTo({
      url: '../movie-detail/movie-detail?id=' + movieId
    })
  },
})

•  

---

在兩個js文件中都有util.js的插入，而這個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;
}
function http(url, callBack) {
  var that = this;
  wx.request({
    url: url,
    method: 'GET',
    header: {
      'content-type': 'application/xml'
    },
    success: function (res) {
      callBack(res.data);//回調(diào)函數(shù)
    },
    fail: function (error) {
      console.log(error)
    },
  })
}
function convertToCastString(casts) {
  var castsjoin = "";
  for (var idx in casts) {
    castsjoin = castsjoin + casts[idx].name + " / ";
  }
  return castsjoin.substring(0, castsjoin.length - 2);
}

function convertToCastInfos(casts) {
  var castsArray = []
  for (var idx in casts) {
    var cast = {
      img: casts[idx].avatars ? casts[idx].avatars.large : "",
      name: casts[idx].name
    }
    castsArray.push(cast);
  }
  return castsArray;
}

module.exports = {
  convertToStarsArray: convertToStarsArray,
  http: http,
  convertToCastString: convertToCastString,
  convertToCastInfos: convertToCastInfos
}