微信小程序入门级教程-13【完】

前言

搜索功能做完了，本节课我们开始写电影详情的功能了~

目录

https://www.jianshu.com/p/9c9b555b52e8

步骤

1. movies文件夹下新建movie-detail文件，并且把对应的文件全部建好。

2. 在电影模板movie-template.wxml中给每一个电影的view上增加一个点击事件，并且绑定上电影的ID，然后在点击事件中跳转到movie-details.wxml页面，并且在movie-details.js的onLoad函数中获取传过来的电影ID，并且引入utils工具类的http函数，请求豆瓣的api接口获取电影详情，具体代码如下：

// pages/movies/movie-detail/movie-detail.js
let utils = require("../../../utils/utils");
let app = getApp();
Page({
  onLoad(options) {
      let movieId = options.mid;
      let requestUrl = app.globalData.BASEPATH + "v2/movie/subject/" + movieId;
      utils.http(requestUrl, this.processDoubanData);
  },
  processDoubanData(data){
      console.log(data)
  }
})

3.因为电影详情中有很多二级数据和三级数据，所以必要的判空操作还是必要的，毕竟老电影的话，很有可能内容不全，这些错误都将导致小程序报错，所以我们来优化一下数据：

processDoubanData(data) {
  // 判空操作并且格式化我们需要的数据到变量movie
  if(!data){
    return false;
  }
  let director = {
    avatar: "",
    name: "",
    id: ""
  }
  if (data.directors[0] != null) {
    if (data.directors[0].avatars != null) {
      director.avatar = data.directors[0].avatars.large
    }
    director.name = data.directors[0].name;
    director.id = data.directors[0].id;
  }
  var movie = {
    movieImg: data.images ? data.images.large : "",
    country: data.countries[0],
    title: data.title,
    originalTitle: data.original_title,
    wishCount: data.wish_count,
    commentCount: data.comments_count,
    year: data.year,
    generes: data.genres.join("、"),
    stars: utils.converToStarsArray(data.rating.stars),
    score: data.rating.average,
    director: director,
    casts: utils.convertToCastString(data.casts),
    castsInfo: utils.convertToCastInfos(data.casts),
    summary: data.summary
  }
  this.setData({
    movie: movie
  })
}

4.然后我们来编写页面和页面的样式
movie-detail.wxml

    
    
        {{movie.title}}
        {{movie.country + " · "+movie.year}}
        
            
        {{movie.wishCount}}
      
            
        人喜欢
      
            
        {{movie.commentCount}}
      
            
        条评论
      
        
    
    
    
        
            {{movie.originalTitle}}
        
        
            评分