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

結果

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的微信小程序实战–集阅读与电影于一体的小程序项目（八）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。