《微信小程序程序设计与开发》课件 第六章 电影首页

第六章

主讲人：XX电影首页本章目标掌握小程序选项卡与使用swithTab的使用掌握自定义组件的使用掌握从服务器加载数据(wx.request发送http/https请求)完成电影页面功能完成电影搜索功能任务一：完成多页面背景音乐播放功能实现背景音乐功能文章页面任务描述：本小节的任务主要任务使用小程序提供tab选项卡实现不同模块之间的切换，即完成贯穿项目中“发现”模块、“电影”模块、“我的”模块三大模块的切换完成多个模块切换功能-知识点学习在app.json中通过配置tabBar属性实现小程序多个tab的应用，配置属性如下：完成项目多模块切换功能步骤-1步骤1：添加新的页面(在这里我们需要添加关于“电影”和“我的”两个页面文件)。了更好区别不同模块，我们需要在不同页面.json配置文件中配置模块的页面标题名称，例如在posts.json文件中添加相关配置，示例代码如下：{"usingComponents":{},"navigationBarTitleText":"发现"}完成项目多模块切换功能步骤-2步骤2：在app.json中配置tabBar属性。"tabBar":{"borderStyle":"white","selectedColor":"#4A6141","color":"#333","backgroundColor":"#fff","position":"bottom","list":[{"pagePath":"pages/posts/posts","text":"发现","iconPath":"images/icon/blog.png","selectedIconPath":"images/icon/blog-actived.png"},{"pagePath":"pages/movies/movies","text":"电影","iconPath":"images/icon/movie.png","selectedIconPath":"images/icon/movie-actived.png"},{"pagePath":"pages/profile/profile","text":"我的","iconPath":"images/icon/profile.png","selectedIconPath":"images/icon/profile-actived.png"}]},完成项目多模块切换功能步骤-3步骤3：修改页面路由跳转的方式。

//处理页面跳转函数

goToPostPage:

function

(event)

{

wx.switchTab({url:

'../posts/posts',

success:

function

()

{

console.log("gotoPostSuccess!");

},

fail:

function

()

{

console.log("gotoPostfail!");

},

complete:

function

()

{

console.log("gotoPostcomplete!");

}

})

}wx.switchTab方法的功能描述为跳转到tabBar页面，并关闭其他所有非tabBar页面课堂思考在小程序中路由方法wx.navigateTo和wx.switchTab有什么区别？任务二：完成电影首页功能实现背景音乐功能文章页面任务描述：本小节的任务是完成电影模块的电影首页显示功能，在电影模块总有以下几个展示内容：(1)电影首页展示“正在热映”、“即将上映”、“豆瓣top250”三种类型的电影，每种类型的电影只展示最前面3部。(2)每种电影有一个“更多”按钮，点击将打开一个新页面，展示改类型所有的电影。(3)点击任意一步电影将打开电影详情页面。(4)在电影首页支持对电影搜索功能。完成电影模块的显示功能，我们需要使用微信小程序自定义组件相关技术点以及如何是使用第三方自定义组件，同时电影模块的数据都是来自豆瓣电影开放的API，因此我们还需要使用微信小程序wx.request的API。微信小程序自定义组件优势-知识点学习小程序页面元素都是组件组成的，小程序除了提供内置的组件之外，从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程，开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。自定义组件定义与使用-知识点学习步骤1：创建组件目录，同时创建组件文件创建组件与组件页面很相似。为了方便管理，首先需要创建一个名为“componets”目录，然后选择”新建Compoent“，开发工具为组件生成四个文件：组件逻辑控制.js文件组件配置文件.json组件显示元素文件.wxml组件显示样式文件.wxss步骤2：为组件添加属性、元素并设置组件样式在index.js文件中设置自定义组件属性//components/movie/movie.jsComponent({

/***组件的属性列表*/properties:

{

//定义属性movie:Object

},

/***组件的初始数据*/data:

{

},

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

{

}})自定义组件定义与使用-知识点学习<!--自定义电影movie组件--><view

class="movie-container">

<!--电影图片-->

<image

class="movie-img"src="{{movie.movieImagePth}}"></image>

<!--电影标题-->

<text

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

<!--电影评分-->

<view

class="rate-container">

<view

class="stars">

<image

src="/images/icon/wx_app_star.png"></image>

<image

src="/images/icon/wx_app_star.png"></image>

<image

src="/images/icon/wx_app_star.png"></image>

<image

src="/images/icon/wx_app_star.png"></image>

<image

src="/images/icon/wx_app_star@half.png"></image>

</view>

<text

class="score">9.5</text>

</view>

</view>/*整体电影信息*/.movie-container

{

display:

flex;

flex-direction:

column;

padding:

0

22rpx;

width:

200rpx;}

/*电影图片*/.movie-img

{

width:

200rpx;

height:

270rpx;

padding-bottom:

20rpx;}

/*电影标题*/.movie-title

{

margin-bottom:

16rpx;

font-size:

24rpx;}

/*评分样式*/.rate-container

{

display:

flex;

flex-direction:

row;}

.stars

{

display:

flex;

flex-direction:

row;

height:

17rpx;

margin-right:

24rpx;

margin-top:

6rpx;}

.stars

image

{

padding-left:

3rpx;

height:

17rpx;

width:

17rpx;}.score

{

color:

#4a6141;}在index.wxss文件中添加自定义组件样式在index.wxml文件中添加自定义组件元素自定义组件定义与使用-知识点学习{

"usingComponents":

{

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

}}在moives.json中配置引用自定义组件

<!--电影列表-->

<view

class="movies-container">

<hp-movie

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

<hp-movie

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

<hp-movie

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

</view>在moives.wxml文件中使用自定义组件电影首页引用movie组件展示效果如何使用第三方自定义组件-知识点学习步骤1：在项目中使用npminit命令构建项目使用npminit命令构建项目npm初始化项目目录结构自定义组件定义与使用-知识点学习步骤2：在项目中使用npminstalllin-ui命令安装Lin-UI使用npminstalllin-ui命令安装Lin-UI构建npm命令安装lin-UI后项目目录结构小程序加载服务器数据-知识点学习在微信小程序中使用wx.request(Object)方法，发起HTTPS网络请求获取服务器数据，Object参数常用属性为：url类型：string描述：开发者服务器接口地址。data类型：string/object/ArrayBuffer描述：请求的参数。header类型：Object描述：设置请求的header，header中不能设置Referer。content-type

默认为

application/json。method类型:string描述：HTTP请求方法。注意，method的取值必须大写timeout类型：number描述：超时时间，单位为毫秒。默认值为60000。dataType类型：string描述：返回的数据格式success

类型：function描述：接口调用成功的回调函数fail类型：function描述：接口调用失败的回调函数complete类型：function描述：接口调用完成的回调函数其中success回调函数的参数如下：data类型：string/Object/Arraybuffer描述：开发者服务器返回的数据。statusCode类型：number描述：开发者服务器返回的HTTP状态码。header类型：Object描述：开发者服务器返回的HTTPResponseHeader。cookies类型：Array.<string>描述：开发者服务器返回的cookies，格式为字符串数组。success参数使用wx.request方法加强服务器数据-知识店学习在微信小程序中使用wx.request(Object)方法，在默认情况只支持https的请求方式，如果必须使用http请求，需要在开发工具设置不合法域名onLoad:

function

(options)

{

const

movie

=

{

"title":

"幕后玩家",

"movieImagePth":

"/images/movie/move01.jpg",

"score":8.5,

"stars":4.5

}

//通过http请求获得服务器数据(数据以json格式进行返回)

wx.request({url:

'/v2/movie/in_theaters',data:{start:1,count:3

},method:'GET',header:{"content-type":"json"},

success:(res)=>{

console.log(res);

}

})示例代码控制台查看数据步骤1：从服务器加载数据完成电影列表显示功能步骤-1//

基于不同url对http请求获得服务器数据进行封装

bindMoviesDataByCategory(url,

data,

settedKey,

categoryTitle)

{

//

通过http请求获得服务器数据(数据以json格式进行返回)

wx.request({

url:

url,

data:

data,

method:

'GET',

header:

{

"content-type":

"json"

},

success:

(res)

=>

{

cessMovieData(res.data,

settedKey,

categoryTitle);

}

})

},获得服务器数据并对数据进行封装的逻辑处理处理电影数据处理方法//

处理电影首先显示电影数据

processMovieData(httpData,

settedKey,

categoryTitle)

{

console.log('httpData',

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;

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:

subject.id

}

movies.push(temp);

}

var

bindData

=

{};

bindData[settedKey]

=

{

"categoryTitle":

categoryTitle,

"movies":

movies

}

this.setData(bindData);

},步骤2：自定义movie-list组件完成电影列表显示功能步骤-2Component({/***组件的属性列表*/properties:{title:{type:String,value:''},movieList:{type:Array,value:[]}},

/***组件的初始数据*/data:{

},

/***组件的方法列表*/methods:{

}})添加movie-list组件后目录结构movie-list组件逻辑处理<viewclass="movie-list-container"><viewclass="movie-head"><textclass="slogan">{{title}}</text><viewclass="more"data-category="{{title}}"><textclass="more-text">更多</text><imageclass="more-img"src="/images/icon/wx_app_arrow_right.png"></image></view></view><!--单个栏目中显示电影列表--><viewclass="movies-container"><!--每个电影信息--><blockwx:for="{{movieList}}"wx:for-item="movie"wx:key="movieId"><!--使用自定义组件--><hp-moviemovie="{{movie}}"></hp-movie></block></view></view>movie-list组件页面元素步骤3：在moives页面引用moive-list组件完成电影列表显示功能步骤-3{

"usingComponents":

{

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

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

},

"navigationBarTitleText":

"电影"}在movies页面配置自定义组件<view

class="container">

<!--电影栏目列表-->

<view

class="movie-container">

<!--单个栏目电影列表(正在热映)-->

<hp-movieList

bind:tap="onGotoMore"

data-type="in_theaters"

title="{{inTheaters.categoryTitle}}"

movieList="{{inTheaters.movies}}"></hp-movieList>

<!--单个栏目电影列表(即将上映)-->

<hp-movieList

bind:tap="onGotoMore"

data-type="coming_soon"

title="{{comingSoon.categoryTitle}}"

movieList="{{comingSoon.movies}}"></hp-movieList>

<!--单个栏目电影列表(豆瓣top250)-->

<hp-movieList

bind:tap="onGotoMore"

data-type="top250"

title="{{top250.categoryTitle}}"

movieList="{{top250.movies}}"></hp-movieList>

</view></view>在moives页面引用自定义组件任务三：完成电影搜索功能任务描述：任务为用户提供一个电影搜索的功能，其业务逻辑非常简单，在搜索的输入框中输入搜索的电影名称，然后确定在当前页面显示搜索结果。在这里我们并没有选择使用一个新的页面完成此电影搜索功能，电影的搜索位于电影首页。当用户进行搜索时，显示搜索结果时，电影首页的资讯信息被隐藏；相反，当退出电影搜索时，电影搜索面板被隐藏，而电影资讯被显示，其实现步骤：实现电影首页搜索页面效果。处理用户激活搜索框与退出搜索。处理用户输入搜索关键字进行搜索电影搜索效果图完成电影搜索功能实现步骤-1步骤1：实现电影首页搜索页面效果。<!--搜索输入框-->

<view

class="search">

<icon

type="search"class="search-img"size="13"color="#405f80"></icon>

<input

type="text"placeholder="乘风破浪、西游伏妖篇"placeholder-class="placeholder"bindfocus="onBindFocus"value="{{inputValue}}"bindconfirm="onBindConfirm"/>

<image

wx:if="{{searchPanelShow}}"src="/images/icon/wx_app_xx.png"class="xx-img"catchtap="onCancelImgTap"></image>

</view>在movies.wxml中添加电影搜索框显示的内容/*电影搜索样式*/

.search

{

background-color:

#f2f2f2;

height:

80rpx;

width:

100%;

display:

flex;

flex-direction:

row;}

.search-img

{

margin:

auto

0

auto

20rpx;}

.search

input

{

height:

100%;

width:

600rpx;

margin-left:

20px;

font-size:

28rpx;}

.placeholder

{

font-size:

14px;

color:

#d1d1d1;

margin-left:

20rpx;}

.search-panel{

position:absolute;

top:80rpx;}

.xx-img{

height:

30rpx;

width:

30rpx;

margin:auto

0

auto

10rpx;}

.search-container{

display:

flex;

flex-direction:

row;

flex-wrap:

wrap;

padding:

30rpx0rpx;

justify-content:

space-between;}

.search-container::after{

content:'';

width:200rpx;}完成电影搜索功能实现步骤-2步骤2：处理用户激活搜索框与退出搜索。当用户激活搜索输入框，隐藏电影资讯面板，显示取消搜索按钮（等待用户输入内容）

//获得输入焦点，隐藏电影资讯面板，显示取消搜索按钮（等待用户输入内容）

onBindFocus()

{

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

//设置取消按钮显示，并取消Movie-list显示容器

this.setData({

//控制取消按钮searchPanelShow:

true,

//控制搜索结果容器是否显示