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
movie-list-template.wxml
正在热映 更多 movie-template.wxml
{{title}} 预览
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
{{title}} stars-template.wxml
{{average}} 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
{{categoryTitle}}