（十六）微信小程序：電影詳情頁

時間 2020-09-29

標籤十六微信程序詳情简体版

原文原文鏈接

電影詳情頁

　　1.建立movie-details目錄

　　　　（1）movie-details.wxmlweb

 1 <!--pages/movie/movie-details/movie-details.wxml-->
 2 <import src="../stars-template/stars-template.wxml" />
 3 <view class="container">
 4   <image class="head-img" src="{{movie.movieImg}}" />
 5   <view class="head-img-hover" data-src="{{movie.movieImg}}">
 6     <text class="main-title">{{movie.title}}</text>
 7     <text class="sub-title">{{movie.country + " · "+movie.year}}</text>
 8     <view class="like">
 9       <text class="highlight-font">
10         {{movie.wishCount}}
11       </text>
12       <text class="plain-font">
13         人喜歡
14       </text>
15       <text class="highlight-font">
16         {{movie.commentCount}}
17       </text>
18       <text class="plain-font">
19         條評論
20       </text>
21     </view>
22   </view>
23   <image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}"/>
24   <view class="summary">
25     <view class="original-title">
26       <text>{{movie.originalTitle}}</text>
27     </view>
28     <view class="flex-row">
29       <text class="mark">評分</text>
30       <template is="starTemplate" data="{{ star:movie.stars,average:movie.score }}" />
31     </view>
32     <view class="flex-row">
33       <text class="mark">導演</text>
34       <text>{{movie.director.name}}</text>
35     </view>
36     <view class="flex-row">
37       <text class="mark">影人</text>
38       <text>{{movie.casts}}</text>
39     </view>
40     <view class="flex-row">
41       <text class="mark">類型</text>
42       <text>{{movie.generes}}</text>
43     </view>
44   </view>
45   <view class="hr"></view>
46   <view class="synopsis">
47     <text class="synopsis-font">劇情簡介</text>
48     <text class="summary-content">{{movie.summary}}</text>
49   </view>
50   <view class="hr"></view>
51   <view class="cast">
52     <text class="cast-font"> 影人</text>
53     <scroll-view class="cast-imgs" scroll-x="true" style="width:100%">
54       <block wx:for="{{movie.castsInfo}}" wx:for-item="item" wx:key="key">
55         <view class="cast-container">
56           <image class="cast-img" src="{{item.img}}"></image>
57           <text class="cast-name">{{item.name}}</text>
58         </view>
59       </block>
60     </scroll-view>
61   </view>
62 </view>

movie-details.wxml

　　　　（2）movie-details.wxssapp

  1 /* pages/movie/movie-details/movie-details.wxss */
  2 @import "../stars-template/stars-template.wxss";
  3 
  4 .container{
  5     display:flex;
  6     flex-direction: column;
  7     font-size: 20rpx;
  8 }
  9 
 10 .head-img{
 11     width:100%;
 12     height: 320rpx;
 13     filter: blur(10px);
 14     -webkit-filter:blur(10px);
 15 }
 16 
 17 .head-img-hover{
 18     width: 100%;
 19     height: 320rpx;
 20     position:absolute;
 21     top:0;
 22     left:0;
 23     display:flex;
 24     flex-direction: column;
 25 }
 26 
 27 .main-title{
 28     font-size: 19px;
 29     color:#fff;
 30     font-weight:bold;
 31     margin-top: 50rpx;
 32     margin-left: 40rpx;
 33     letter-spacing: 2px;
 34 }
 35 
 36 .sub-title{
 37     font-size: 28rpx;
 38     color:#fff;
 39     margin-left: 40rpx;
 40     margin-top: 30rpx;
 41 }
 42 
 43 .like{
 44     display:flex;
 45     flex-direction: row;
 46     margin-top: 30rpx;
 47     margin-left: 40rpx;
 48 }
 49 
 50 .highlight-font{
 51     color: #f21146;
 52     font-size:22rpx;
 53     margin-right: 10rpx;
 54 }
 55 
 56 .plain-font{
 57     color: #666;
 58     font-size:22rpx;
 59     margin-right: 30rpx;
 60 }
 61 
 62 
 63 .movie-img{
 64     height:238rpx;
 65     width: 175rpx;
 66     position: absolute;
 67     top:160rpx;
 68     right: 30rpx;
 69 }
 70 
 71 .summary{
 72     margin-left:40rpx;
 73     margin-top: 40rpx;
 74     color: #777777;
 75 }
 76 
 77 .original-title{
 78     color: #1f3463;
 79     font-size: 24rpx;
 80     font-weight: bold;
 81     margin-bottom: 40rpx;
 82 }
 83 
 84 .flex-row{
 85     display:flex;
 86     flex-direction: row;
 87     margin-bottom: 10rpx;
 88 }
 89 
 90 .mark{
 91     margin-right: 30rpx;
 92     white-space:nowrap;
 93     color: #999999;
 94 }
 95 
 96 .hr{
 97     margin-top:45rpx;
 98     height:1px;
 99     width: 100%;
100     background-color: #d9d9d9;
101 }
102 
103 .synopsis{
104     margin-left:40rpx;
105     display:flex;
106     flex-direction: column;
107     margin-top: 50rpx;
108 }
109 
110 .synopsis-font{
111     color:#999;
112 }
113 
114 .summary-content{
115     margin-top: 20rpx;
116     margin-right: 40rpx;
117     line-height:40rpx;
118     letter-spacing: 1px;
119 }
120 
121 .cast{
122     margin-left:40rpx;
123     display:flex;
124     flex-direction: column;
125     margin-top:50rpx;
126 }
127 
128 .cast-font{
129     color: #999;
130     margin-bottom: 40rpx;
131 }
132 
133 .cast-container{
134     display:inline-flex;
135     flex-direction: column;
136     margin-bottom: 50rpx;
137     margin-right: 40rpx;
138     width: 170rpx;
139     text-align:center;
140     white-space: normal;
141 }
142 
143 .cast-imgs{
144     white-space: nowrap;
145 }
146 
147 .cast-img{
148     width: 170rpx;
149     height: 210rpx;
150 }
151 .cast-name{
152     margin: 10rpx auto 0;
153 }

movie-details.wxss

　　　　　　對於背景圖片進行虛化：filter屬性xss

　　　　（3）movie-details.jside

 1 var utils = require("../../../utils/utils.js");
 2 var appInstance = getApp();
 3 Page({
 4   data: {
 5     movie: {}
 6   },
 7 
 8   onLoad: function (options) {
 9     utils.http("http://localhost:8888/v2/movie/subject/" + options.id, this.movieDetailsInfo,null,null);
10     wx.showLoading({
11       title: '加載中',
12     })
13   },
14   movieDetailsInfo: function (data) {
15     wx.hideLoading();
16     /*
17         1.電影圖片：movieImg
18         2.製片國家/地區：country
19         3.電影名稱：title
20         4.繁體名稱：original_title
21         5.想看人數：wish_count
22         6.短評數量：commentCount
23         7.年代：year
24         8.電影類型：generes
25         9.評星：stars
26         10.評分：score
27         11.導演:director
28         12.主演：casts
29         13.主演信息：castsInfo
30         14.簡介：summary
31     */
32     if (!data) {
33       return;
34     }
35     //處理一下導演
36     var director = {
37       avatar: "",
38       name: "",
39       id: ""
40     }
41     if (data.directors[0] != null) {
42       if (data.directors[0].avatars != null) {
43         director.avatar = data.directors[0].avatars.large;
44       }
45       director.name = data.directors[0].name;
46       director.id = data.directors[0].id;
47     }
48     var temp = {
49       movieImg: data.images.large,
50       country: data.countries[0],
51       title: data.title,
52       originalTitle: data.original_title,
53       wishCount: data.wish_count,
54       commentCount: data.comments_count,
55       year: data.year,
56       generes: data.genres,
57       stars: utils.star(data.rating.stars),
58       score: data.rating.average,
59       director: director,
60       casts: utils.convertToCastString(data.casts),
61       castsInfo: utils.convertToCastsString(data.casts),
62       summary: data.summary
63     }
64     this.setData({
65       movie: temp
66     })
67   }
68 })

movie-details.js

　　　　兩個函數須要在utils.js中聲明：

　　　　　　// 演員名字用/隔開 function convertToCastString(casts)

　　　　　　　　 //存儲信息：頭像+名字 function convertToCastsString(casts)函數

 1 // 演員名字用/隔開
 2 function convertToCastString(casts) {
 3   var castsjoin = "";
 4   var castsfinal = "";
 5   for (var dic in casts) {
 6     castsjoin = castsjoin + casts[dic].name + " / ";
 7   }
 8   castsfinal = castsjoin.substring(0, castsjoin.length - 3);
 9   return castsfinal;
10 }
11 
12 function convertToCastsString(casts) {
13   //存儲信息：頭像+名字
14   var castsArray = [];
15   for (var idx in casts) {
16     var cast = {
17       img: casts[idx].avatars ? casts[idx].avatars.large : "",
18       name: casts[idx].name
19     }
20     castsArray.push(cast);
21   }
22   return castsArray;
23 }
24 module.exports = {
25   http:http,
26   star:star,
27   cutTitle:cutTitle,
28   convertToCastString,
29   convertToCastsString
30 
31 }

utils.js中的兩個聲明函數

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

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