《微信小程序程序设计与开发》课件 第七章 更多电影与电影详情

第七章

主讲人：XX更多电影与电影详情本章目标掌握封装http请求的API使用实现分页显示更多电影数据掌握页面下拉刷新数据和下滑加载更多数据API的使用

完成电影详情页面功能任务一：完成“更多”电影页面功能“更多电影”最终效果任务描述：在电影首页中分别展示三种类型的电影列表，如果用户需要查看每种类型的全部电影，可以点击对应的类型的“更多”链接按钮来显示全部内容，我们需要在一个新的页面中进行显示，因此需要新创建页面。完成此页面，我们本次的任务的工作内容如下：(1)从电影首页跳转到更多电影页面。(2)通过使用自定义组件的方式显示更多电影数据。(3)对微信小程序wx.request发送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,

})

}创建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请求数据进行封装；对微信小程序中的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请求进行封装，避免回调地狱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的状态为成功状态resolved

resolve(res.data);

},

fail:

(err)

=>

{

//reject修改promise的状态为失败状态rejected

reject(err);

}

});

});}使用ES6的Promoise风格对http请求进行封装完成“更多”电影页面功能步骤-3步骤3-2：调用http封装方法获得服务器端数据页面加载时，从服务器获得更多电影数据对服务器获得的电影详细数据进行处理

/***生命周期函数--监听页面加载*/

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

});

}/处理数据

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;

},任务二：完成刷新电影页面与加载更多功能下拉刷新页面效果任务描述：基于上一个任务实现了“更多”电影列表的显示，我们主要的任务实现下拉刷新页面功能和上滑分页加载更多数据内容。在App的应用中，下拉刷新和上滑加载更多是一组比较经典的操作，在小程序中的页面Page对象中：onPullDownRefresh方法，触发下拉刷新对应方法。onReachBottom方法，触发上滑触底对应方法。实现页面下拉刷新功能实现步骤-1步骤1：调在more-movie.json文件中，配置enablePullDownRefresh选项{

"usingComponents":

{

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

},

"enablePullDownRefresh":

true,

"backgroundTextStyle":

"dark"}下拉刷新等待标识步骤2：在more-moive.js文件中添加onPullDownRefresh方法，并完成刷新的逻辑/***页面相关事件处理函数--监听用户下拉动作*/

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面板显示情况实现页面下拉刷新功能实现步骤-2实现页面下拉刷新功能实现步骤-3步骤3：主动调用wx.stopPullDownRefresh()方法可以完成当前页面停止刷新效果修改下拉刷新代码，完成主动停止页面刷新效果/***页面相关事件处理函数--监听用户下拉动作*/

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面板显示情况实现上滑加载更多数据步骤-1在more-moive.js页面实现onReachBottom方法，其主要的逻辑就是分页加载数据/***页面上拉触底事件的处理函数*/

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

});

}处理分页加载数据逻辑//处理数据

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

=[];

//上滑加载新的数据追加到原movies数组中

totalMovies

=

this.data.movies.concat(movies);

return

totalMovies;

}修改电影处理逻辑，实现数组追加数据完成更多电影页面优化步骤-1步骤1：根据用户在电影首页进入“更多”页面，动态设置“更多”页面标题

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,

})

}在页面动态设置标题效果完成更多电影页面优化步骤-2基本上是在进行http请求的前一步调用wx.showNavigationBarLoading()提示用户数据加载，当完成数据绑定后表示数据已经完成渲染后就应该调用wx.hideNavigationBarLoading()方法隐藏状态图标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);

}在分页加载更多数据处理方法，http请求前显示loading图标

//绑定数据处理

bindMoivesData(data)

{

this.setData({movies:

data

});

//隐藏loading加载图标

wx.hideNavigationBarLoading();

},完成数据绑定后，隐藏loading加载图标任务三：完成电影详情页面功能电影详情页面任务描述：当用户单击电影图片进入电影详情页面，本小节任务主要完成此电影信息的展示和电影海报的展示功能。其电影详细信息主要内容包括三个部分：电影基本信息、剧情简介、影人。在影人展示部分需要同时展示多个不同影人信息。其完成此功能步骤：新建电影详情页面，完成从不同模块中的电影跳转到电影详情页面的功能实现。完成电影详情页面的骨架与样式。编写电影详情页面的业务逻辑代码。设置电影页面的导航标题。完成电影详情页面中预览电影海报功能实现电影详情功能步骤-1步骤1：新建电影详情页面，完成从不同模块中的电影跳转到电影详情页面的功能实现。新添加电影详情页面目录结构

/***组件的方法列表*/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自定义组件中实现页面跳转方法实现电影详情功能步骤-2步骤2-1：完成电影详情页面的骨架。

<!--电影详情头部内容-->

<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>实现电影详情功能步骤-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;}实现电影详情功能步骤-3步骤3：编写电影详情页面的业务逻辑代码。

/***生命周期函数--监听页面加载*/

onLoad:

async

function

(options)

{

//获得电影编号

const

mid

=

options.mid;

//发送http请求获取对应电影对象明细

let

url

=

"/movie/subject/"

+

mid;

let

httpData

=

await

request(url);

let

moiveData

=

this.getMovieData(httpData);

this.setData({movie:

moiveData

});

},//处理电影详情数据

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