（十六）微信小程序：电影详情页

电影详情页

　　1.创建movie-details目录

　　　　（1）movie-details.wxml

<!--pages/movie/movie-details/movie-details.wxml-->
<import src="../stars-template/stars-template.wxml" />
<view class="container">
  <image class="head-img" src="{{movie.movieImg}}" />
  <view class="head-img-hover" data-src="{{movie.movieImg}}">
    <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}}"/>
  <view class="summary">
    <view class="original-title">
      <text>{{movie.originalTitle}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">评分</text>
      <template is="starTemplate" data="{{ star:movie.stars,average: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="100%">
      <block wx:for="{{movie.castsInfo}}" wx:for-item="item" wx:key="key">
        <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>

　　　　（2）movie-details.wxss

/* pages/movie/movie-details/movie-details.wxss */
@import "../stars-template/stars-template.wxss";

.container{
    display:flex;
    flex-direction: column;
    font-size: 20rpx;
}

.head-img{
    width:100%;
    height: 320rpx;
    filter: blur(10px);
    -webkit-filter:blur(10px);
}

.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;
}

　　　　　　对于背景图片进行虚化：filter属性

　　　　（3）movie-details.js

var utils = require("../../../utils/utils.js");
var appInstance = getApp();
Page({
  data: {
    movie: {}
  },

  onLoad: function (options) {
    utils.http("http://localhost:8888/v2/movie/subject/" + options.id, this.movieDetailsInfo,null,null);
    wx.showLoading({
      title: '加载中',
    })
  },
  movieDetailsInfo: function (data) {
    wx.hideLoading();
    /*
        1.电影图片：movieImg
        2.制片国家/地区：country
        3.电影名称：title
        4.繁体名称：original_title
        5.想看人数：wish_count
        6.短评数量：commentCount
        7.年代：year
        8.电影类型：generes
        9.评星：stars
        10.评分：score
        11.导演:director
        12.主演：casts
        13.主演信息：castsInfo
        14.简介：summary
    */
    if (!data) {
      return;
    }
    //处理一下导演
    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 temp = {
      movieImg: 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,
      stars: utils.star(data.rating.stars),
      score: data.rating.average,
      director: director,
      casts: utils.convertToCastString(data.casts),
      castsInfo: utils.convertToCastsString(data.casts),
      summary: data.summary
    }
    this.setData({
      movie: temp
    })
  }
})

　　　　两个函数需要在utils.js中声明：

　　　　　　// 演员名字用/隔开   function convertToCastString(casts)

　　　　　　　　   //存储信息：头像+名字    function convertToCastsString(casts)

// 演员名字用/隔开
function convertToCastString(casts) {
  var castsjoin = "";
  var castsfinal = "";
  for (var dic in casts) {
    castsjoin = castsjoin + casts[dic].name + " / ";
  }
  castsfinal = castsjoin.substring(0, castsjoin.length - 3);
  return castsfinal;
}

function convertToCastsString(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 = {
  http:http,
  star:star,
  cutTitle:cutTitle,
  convertToCastString,
  convertToCastsString

}

　　 2.在.js文件中添加函数detailsHandler（）

detailsHandler:function(event){
    var id = event.currentTarget.dataset.id;
    wx.navigateTo({
      url: './movie-details/movie-details?id='+id,
    })
  }

　　 3.电影详情页面效果　

　　　　　　　　

本节完成了电影详情页，下一节完成对于此小项目的全局优化~