31.电影详情页面

movie-template.wxml

<view class="movie-container" catchtap="onMovieTap" data-movieId="{{movieId}}">

movie.js

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

util.js

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 = {  convertToStarArray: convertToStarArray,  http: http,  convertToCastString: convertToCastString,  convertToCastInfos: convertToCastInfos};

movie-detail.js

var util = require(‘../../../utils/util.js‘);var app=getApp()Page({  data:{    movie:{}  },  onLoad:function(options){    var movieId = options.id;    var url = app.globalData.g_baseUrl +      "/v2/movie/subject/" + movieId;    util.http(url,this.processDoubanData);  },  processDoubanData:function(data){    var 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: util.convertToStarArray(data.rating.stars),      score: data.rating.average,      director: director,      casts: util.convertToCastString(data.casts),      castsInfo: util.convertToCastInfos(data.casts),      summary: data.summary    }    console.log(movie)    this.setData({      movie:movie    })  }})

movie-detail.wxml

<import src="../stars/stars-template.wxml" /><view class="container">  <image class="head-img" src="{{movie.movieImg}}" mode="aspectFill" />  <view class="head-img-hover" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg">    <text class="main-title">{{movie.title}}</text>    <text class="sub-title">{{movie.country + " · "+movie.year}}</text>    <view class="like">      <text class="highlight-font">        {{movie.wishCount}}      </text>      <text class="plain-font">        人喜欢      </text>      <text class="highlight-font">        {{movie.commentCount}}      </text>      <text class="plain-font">        条评论      </text>    </view>  </view>  <image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"/>  <view class="summary">    <view class="original-title">      <text>{{movie.originalTitle}}</text>    </view>    <view class="flex-row">      <text class="mark">评分</text>      <template is="starsTemplate" data="{{stars:movie.stars, score:movie.score}}" />    </view>    <view class="flex-row">      <text class="mark">导演</text>      <text>{{movie.director.name}}</text>    </view>    <view class="flex-row">      <text class="mark">影人</text>      <text>{{movie.casts}}</text>    </view>    <view class="flex-row">      <text class="mark">类型</text>      <text>{{movie.generes}}</text>    </view>  </view>  <view class="hr"></view>  <view class="synopsis">    <text class="synopsis-font">剧情简介</text>    <text class="summary-content">{{movie.summary}}</text>  </view>  <view class="hr"></view>  <view class="cast">    <text class="cast-font"> 影人</text>    <scroll-view class="cast-imgs" scroll-x="true" style="width:100%">      <block wx:for="{{movie.castsInfo}}" wx:for-item="item">        <view class="cast-container">          <image class="cast-img" src="{{item.img}}"></image>          <text class="cast-name">{{item.name}}</text>        </view>      </block>    </scroll-view>  </view></view>

movie-detail.wxss

@import "../stars/stars-template.wxss";.container{    display:flex;    flex-direction: column;}.head-img{    width:100%;    height: 320rpx;}.head-img-hover{    width: 100%;    height: 320rpx;    position:absolute;    top:0;    left:0;    display:flex;    flex-direction: column;}.main-title{    font-size: 19px;    color:#fff;    font-weight:bold;    margin-top: 50rpx;    margin-left: 40rpx;    letter-spacing: 2px;}.sub-title{    font-size: 28rpx;    color:#fff;    margin-left: 40rpx;    margin-top: 30rpx;}.like{    display:flex;    flex-direction: row;    margin-top: 30rpx;    margin-left: 40rpx;}.highlight-font{    color: #f21146;    font-size:22rpx;    margin-right: 10rpx;}.plain-font{    color: #666;    font-size:22rpx;    margin-right: 30rpx;}.movie-img{    height:238rpx;    width: 175rpx;    position: absolute;    top:160rpx;    right: 30rpx;}.summary{    margin-left:40rpx;    margin-top: 40rpx;    color: #777777;}.original-title{    color: #1f3463;    font-size: 24rpx;    font-weight: bold;    margin-bottom: 40rpx;}.flex-row{    display:flex;    flex-direction: row;    margin-bottom: 10rpx;}.mark{    margin-right: 30rpx;    white-space:nowrap;    color: #999999;}.hr{    margin-top:45rpx;    height:1px;    width: 100%;    background-color: #d9d9d9;}.synopsis{    margin-left:40rpx;    display:flex;    flex-direction: column;    margin-top: 50rpx;}.synopsis-font{    color:#999;}.summary-content{    margin-top: 20rpx;    margin-right: 40rpx;    line-height:40rpx;    letter-spacing: 1px;}.cast{    margin-left:40rpx;    display:flex;    flex-direction: column;    margin-top:50rpx;}.cast-font{    color: #999;    margin-bottom: 40rpx;}.cast-container{    display:inline-flex;    flex-direction: column;    margin-bottom: 50rpx;    margin-right: 40rpx;    width: 170rpx;    text-align:center;    white-space: normal;}.cast-imgs{    white-space: nowrap;}.cast-img{    width: 170rpx;    height: 210rpx;}.cast-name{    margin: 10rpx auto 0;}

结果

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