《微信小程序程序設計與開發(fā)》課件 第七章 更多電影與電影詳情

第七章

主講人：XX更多電影與電影詳情本章目標掌握封裝http請求的API使用實現(xiàn)分頁顯示更多電影數(shù)據(jù)掌握頁面下拉刷新數(shù)據(jù)和下滑加載更多數(shù)據(jù)API的使用

完成電影詳情頁面功能任務一：完成“更多”電影頁面功能“更多電影”最終效果任務描述：在電影首頁中分別展示三種類型的電影列表，如果用戶需要查看每種類型的全部電影，可以點擊對應的類型的“更多”鏈接按鈕來顯示全部內(nèi)容，我們需要在一個新的頁面中進行顯示，因此需要新創(chuàng)建頁面。完成此頁面，我們本次的任務的工作內(nèi)容如下：(1)從電影首頁跳轉到更多電影頁面。(2)通過使用自定義組件的方式顯示更多電影數(shù)據(jù)。(3)對微信小程序wx.request發(fā)送http/http的請求方法進行封裝。完成“更多”電影頁面功能步驟-1步驟1：新建“更多”電影頁面，完成從電影首頁跳轉到更多電影頁面。

//跳轉到更多電影頁面

onGotoMore(event)

{

console.log('ongGotoMore',

event);

const

category

=

event.currentTarget.dataset.type;

//路由到更多頁面

wx.navigateTo({url:

'/pages/more-movie/more-movie?category='

+

category,

})

}創(chuàng)建more-moive頁面后目錄結構完成“更多”電影頁面功能步驟-2步驟2：通過自定義組件構建更多電影頁面骨架與樣式<view

class="container">

<block

wx:for="{{movies}}"wx:for-item="movie"wx:key="mid">

<!--使用自定義組件-->

<hp-movie

movie="{{movie}}"></hp-movie>

</block></view>更多電影頁面骨架(使用自定義組件構建頁面骨架).container{

display:

flex;

flex-direction:

row;

flex-wrap:

wrap;

padding-top:

30rpx;

padding-bottom:

30rpx;

justify-content:

space-between;}

.movie{

margin-bottom:

30rpx;}更多電影頁面樣式完成“更多”電影頁面功能步驟-3步驟3-1：對http請求數(shù)據(jù)進行封裝；對微信小程序中的http請求進行封裝，我們在util目錄中添加兩個js文件，分別為config.js和request.js。config.js表示項目相關配置，這里主要是針對http的請求地址的配置，而request.js中對微信API的wx.request進行封裝//配置服務器相關信息export

default

{host:

'/v2',}config.js基于http請求相關配置import

config

from

'./config'

//使用ES6中的Promoise方式對http請求進行封裝，避免回調(diào)地獄export

default

(url,

data

=

{},

method

=

'GET')

=>

{

return

new

Promise((resolve,

reject)

=>

{

wx.request({url:

config.host

+

url,

data,

method,header:

{

"content-type":

"json"

},

success:

(res)

=>

{

//resolve修改promise的狀態(tài)為成功狀態(tài)resolved

resolve(res.data);

},

fail:

(err)

=>

{

//reject修改promise的狀態(tài)為失敗狀態(tài)rejected

reject(err);

}

});

});}使用ES6的Promoise風格對http請求進行封裝完成“更多”電影頁面功能步驟-3步驟3-2：調(diào)用http封裝方法獲得服務器端數(shù)據(jù)頁面加載時，從服務器獲得更多電影數(shù)據(jù)對服務器獲得的電影詳細數(shù)據(jù)進行處理

/***生命周期函數(shù)--監(jiān)聽頁面加載*/

onLoad:

async

function

(options)

{

const

category

=

options.category;

this.data._category

=

category;

let

url

=

"/movie/"

+

category;

let

data

=

{start:0,count:12

};

let

httpData

=

await

request(url,data);

let

moives

=

this.getMoreMovieDataList(httpData);

this.setData({movies:moives

});

}/處理數(shù)據(jù)

getMoreMovieDataList(httpData)

{

var

movies

=[];

for(let

i

in

httpData.subjects){

let

subject

=

httpData.subjects[i];

let

title

=

subject.title;

let

stars

=

subject.rating.stars

/

10;

let

score

=

subject.rating.average;

let

mid

=

subject.id;

console.log("starts:",

stars);

if(title.length>=

6){

//設置標題顯示長度，超過6個字符進行截斷使用...進行代替

title

=

title.substring(0,

6)+

'...';

}

var

temp

=

{title:

title,stars:

stars,score:

score,movieImagePth:

subject.images.large,movieId:

mid

}

movies.push(temp);

}

return

movies;

},任務二：完成刷新電影頁面與加載更多功能下拉刷新頁面效果任務描述：基于上一個任務實現(xiàn)了“更多”電影列表的顯示，我們主要的任務實現(xiàn)下拉刷新頁面功能和上滑分頁加載更多數(shù)據(jù)內(nèi)容。在App的應用中，下拉刷新和上滑加載更多是一組比較經(jīng)典的操作，在小程序中的頁面Page對象中：onPullDownRefresh方法，觸發(fā)下拉刷新對應方法。onReachBottom方法，觸發(fā)上滑觸底對應方法。實現(xiàn)頁面下拉刷新功能實現(xiàn)步驟-1步驟1：調(diào)在more-movie.json文件中，配置enablePullDownRefresh選項{

"usingComponents":

{

"hp-movie":"/components/movie/index"

},

"enablePullDownRefresh":

true,

"backgroundTextStyle":

"dark"}下拉刷新等待標識步驟2：在more-moive.js文件中添加onPullDownRefresh方法，并完成刷新的邏輯/***頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作*/

onPullDownRefresh:

async

function

()

{

console.log("===onPullDownRefresh=====");

let

url

=

"/movie/"

+

this.data._category;

let

data

=

{start:0,count:12

};

let

httpData

=

await

request(url,data);

let

moives

=

this.getMoreMovieDataList(httpData);

this.setData({movies:moives

});

}3次刷新NetWork面板顯示情況實現(xiàn)頁面下拉刷新功能實現(xiàn)步驟-2實現(xiàn)頁面下拉刷新功能實現(xiàn)步驟-3步驟3：主動調(diào)用wx.stopPullDownRefresh()方法可以完成當前頁面停止刷新效果修改下拉刷新代碼，完成主動停止頁面刷新效果/***頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作*/

onPullDownRefresh:

async

function

()

{

console.log("===onPullDownRefresh=====");

let

url

=

"/movie/"

+

this.data._category;

let

data

=

{start:0,count:12

};

let

httpData

=

await

request(url,data);

let

moives

=

this.getMoreMovieDataList(httpData);

this.setData({movies:moives

});

wx.stopPullDownRefresh();

},3次刷新NetWork面板顯示情況實現(xiàn)上滑加載更多數(shù)據(jù)步驟-1在more-moive.js頁面實現(xiàn)onReachBottom方法，其主要的邏輯就是分頁加載數(shù)據(jù)/***頁面上拉觸底事件的處理函數(shù)*/

onReachBottom:async

function

()

{

console.log("=====onReachBottom====");

let

url

=

"/movie/"+this.data._category;

let

data

=

{

start:this.data.movies.length,count:12

};

let

httpData

=

await

request(url,data);

let

moives

=

this.getMoreMovieDataList(httpData);

this.setData({movies:moives

});

}處理分頁加載數(shù)據(jù)邏輯//處理數(shù)據(jù)

getMoreMovieDataList(httpData)

{

var

movies

=[];

for(let

i

in

httpData.subjects){

let

subject

=

httpData.subjects[i];

let

title

=

subject.title;

let

stars

=

subject.rating.stars

/

10;

let

score

=

subject.rating.average;

let

mid

=

subject.id;

console.log("starts:",

stars);

if(title.length>=

6){

//設置標題顯示長度，超過6個字符進行截斷使用...進行代替

title

=

title.substring(0,

6)+

'...';

}

var

temp

=

{title:

title,stars:

stars,score:

score,movieImagePth:

subject.images.large,movieId:

mid

}

movies.push(temp);

}

var

totalMovies

=[];

//上滑加載新的數(shù)據(jù)追加到原movies數(shù)組中

totalMovies

=

this.data.movies.concat(movies);

return

totalMovies;

}修改電影處理邏輯，實現(xiàn)數(shù)組追加數(shù)據(jù)完成更多電影頁面優(yōu)化步驟-1步驟1：根據(jù)用戶在電影首頁進入“更多”頁面，動態(tài)設置“更多”頁面標題

onReady:

function

()

{

let

title

=

"電影";

if(this.data._category

==

'in_theaters'){

title

=

"正在熱映";

}else

if(this.data._category

==

'coming_soon'){

title

=

"即將上映";

}else

if(this.data._category

==

'top250'){

title

=

"豆瓣Top250";

}

wx.setNavigationBarTitle({title:

title,

})

}在頁面動態(tài)設置標題效果完成更多電影頁面優(yōu)化步驟-2基本上是在進行http請求的前一步調(diào)用wx.showNavigationBarLoading()提示用戶數(shù)據(jù)加載，當完成數(shù)據(jù)綁定后表示數(shù)據(jù)已經(jīng)完成渲染后就應該調(diào)用wx.hideNavigationBarLoading()方法隱藏狀態(tài)圖標onReachBottom:

async

function

()

{

console.log("=====onReachBottom====");

let

url

=

"/movie/"

+

this.data._category;

let

data

=

{start:

this.data.movies.length,count:

12

};

//顯示loading提示

wx.showNavigationBarLoading();

let

httpData

=

await

request(url,

data);

let

moives

=

this.getMoreMovieDataList(httpData);

this.bindMoivesData(moives);

}在分頁加載更多數(shù)據(jù)處理方法，http請求前顯示loading圖標

//綁定數(shù)據(jù)處理

bindMoivesData(data)

{

this.setData({movies:

data

});

//隱藏loading加載圖標

wx.hideNavigationBarLoading();

},完成數(shù)據(jù)綁定后，隱藏loading加載圖標任務三：完成電影詳情頁面功能電影詳情頁面任務描述：當用戶單擊電影圖片進入電影詳情頁面，本小節(jié)任務主要完成此電影信息的展示和電影海報的展示功能。其電影詳細信息主要內(nèi)容包括三個部分：電影基本信息、劇情簡介、影人。在影人展示部分需要同時展示多個不同影人信息。其完成此功能步驟：新建電影詳情頁面，完成從不同模塊中的電影跳轉到電影詳情頁面的功能實現(xiàn)。完成電影詳情頁面的骨架與樣式。編寫電影詳情頁面的業(yè)務邏輯代碼。設置電影頁面的導航標題。完成電影詳情頁面中預覽電影海報功能實現(xiàn)電影詳情功能步驟-1步驟1：新建電影詳情頁面，完成從不同模塊中的電影跳轉到電影詳情頁面的功能實現(xiàn)。新添加電影詳情頁面目錄結構

/***組件的方法列表*/methods:

{

onGoToDetail:

function

(event)

{

//獲得電影編號

const

mid

=

this.properties.movie.movieId;

console.log("===mid===",

mid);

wx.navigateTo({url:

'/pages/movie-detail/movie-detail?mid='

+

mid

})

}

}在hp-movie自定義組件中實現(xiàn)頁面跳轉方法實現(xiàn)電影詳情功能步驟-2步驟2-1：完成電影詳情頁面的骨架。

<!--電影詳情頭部內(nèi)容-->

<image

mode="aspectFill"class="head-img"src="{{movie.movieImage}}"></image>

<view

class="head-img-hover">

<text

class="main-title">{{movie.title}}</text>

<text

class="sub-title">{{movie.subTitle}}</text>

<view

class="like">

<text

class="highlight-font">{{movie.wishCount}}</text>

<text

class="plain-font">人喜歡</text>

<text

class="highlight-font">{{movie.commentsCount}}</text>

<text

class="plain-font">條評論</text>

</view>

<image

bind:tap="onViewPost"class="movie-img"src="{{movie.movieImage}}"></image>

</view>

<!--劇情簡介-->

<view

class="summary">

<view

class="original-title">

<text>{{movie.originaTitle}}</text>

</view>

<view

class="flex-row">

<text

class="mark">評分</text>

<view

class="score-container">

<l-rate

disabled="{{true}}"size="22"score="{{movie.stars}}"/>

<text

class="average">{{movie.score}}</text>

</view>

</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="casts">

<text

class="cast-font">影人</text>

<scroll-view

enable-flex

scroll-x

class="casts-container">

<block

wx:for="{{movie.castsInfo}}"wx:key="index">

<view

class="cast-container">

<image

class="cast-img"src="{{item.img}}"></image>

<text>{{item.name}}</text>

</view>

</block>

</scroll-view>

</view>實現(xiàn)電影詳情功能步驟-2步驟2-2：完成電影詳情頁面樣式。.container{

display:

flex;

flex-direction:

column;}

.head-img{

width:

100%;

height:

320rpx;

-webkit-filter:blur(20px);

}

.head-img-hover{

width:

100%;

height:

320rpx;

position:

absolute;

display:

flex;

flex-direction:

column;}

.main-title{

font-size:38rpx;

color:#fff;

font-weight:bold;

letter-spacing:

2px;

margin-top:

50rpx;

margin-left:

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

align-items:

baseline;

margin-bottom:

10rpx;}

.mark{

margin-right:

30rpx;

white-space:nowrap;

color:

#999999;}

.score-container{

display:

flex;

flex-direction:

row;

align-items:

baseline;}

.average{

margin-left:20rpx;

margin-top:4rpx;}

.hr{

margin-top:45rpx;

width:

100%;

height:

1px;

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

.casts{

display:

flex;

flex-direction:

column;

margin-top:50rpx;

margin-left:40rpx;}.cast-font{

color:

#999;

margin-bottom:

40rpx;}

.cast-img{

width:

170rpx;

height:

210rpx;

margin-bottom:

10rpx;}

.casts-container{

display:

flex;

flex-direction:

row;

margin-bottom:

50rpx;

margin-right:

40rpx;

height:

300rpx;}

.cast-container{

display:

flex;

flex-direction:

column;

align-items:

center;

margin-right:

40rpx;}實現(xiàn)電影詳情功能步驟-3步驟3：編寫電影詳情頁面的業(yè)務邏輯代碼。

/***生命周期函數(shù)--監(jiān)聽頁面加載*/

onLoad:

async

function

(options)

{

//獲得電影編號

const

mid

=

options.mid;

//發(fā)送http請求獲取對應電影對象明細

let

url

=

"/movie/subject/"

+

mid;

let

httpData

=

await

request(url);

let

moiveData

=

this.getMovieData(httpData);

this.setData({movie:

moiveData

});

},//處理電影詳情數(shù)據(jù)

getMovieData:

function

(data)

{

if(!data){

return;

}

//定義導演對象

var

director

=

{avator:

"",name:

"",id:

""

};

if(data.directors[0]!=

null){

if(data.directors[0].avatars

!=

null){

//獲得導演圖像路徑

director.avator

=

data.directors[0].avatars.large;

}

//導演姓名

director.name

=

data.directors[0].name;

director.id

=

data