《微信小程序程序設(shè)計(jì)與開發(fā)》課件 第六章 電影首頁

第六章

主講人：XX電影首頁本章目標(biāo)掌握小程序選項(xiàng)卡與使用swithTab的使用掌握自定義組件的使用掌握從服務(wù)器加載數(shù)據(jù)(wx.request發(fā)送http/https請(qǐng)求)完成電影頁面功能完成電影搜索功能任務(wù)一：完成多頁面背景音樂播放功能實(shí)現(xiàn)背景音樂功能文章頁面任務(wù)描述：本小節(jié)的任務(wù)主要任務(wù)使用小程序提供tab選項(xiàng)卡實(shí)現(xiàn)不同模塊之間的切換，即完成貫穿項(xiàng)目中“發(fā)現(xiàn)”模塊、“電影”模塊、“我的”模塊三大模塊的切換完成多個(gè)模塊切換功能-知識(shí)點(diǎn)學(xué)習(xí)在app.json中通過配置tabBar屬性實(shí)現(xiàn)小程序多個(gè)tab的應(yīng)用，配置屬性如下：完成項(xiàng)目多模塊切換功能步驟-1步驟1：添加新的頁面(在這里我們需要添加關(guān)于“電影”和“我的”兩個(gè)頁面文件)。了更好區(qū)別不同模塊，我們需要在不同頁面.json配置文件中配置模塊的頁面標(biāo)題名稱，例如在posts.json文件中添加相關(guān)配置，示例代碼如下：{"usingComponents":{},"navigationBarTitleText":"發(fā)現(xiàn)"}完成項(xiàng)目多模塊切換功能步驟-2步驟2：在app.json中配置tabBar屬性。"tabBar":{"borderStyle":"white","selectedColor":"#4A6141","color":"#333","backgroundColor":"#fff","position":"bottom","list":[{"pagePath":"pages/posts/posts","text":"發(fā)現(xiàn)","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"}]},完成項(xiàng)目多模塊切換功能步驟-3步驟3：修改頁面路由跳轉(zhuǎn)的方式。

//處理頁面跳轉(zhuǎn)函數(shù)

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方法的功能描述為跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面課堂思考在小程序中路由方法wx.navigateTo和wx.switchTab有什么區(qū)別？任務(wù)二：完成電影首頁功能實(shí)現(xiàn)背景音樂功能文章頁面任務(wù)描述：本小節(jié)的任務(wù)是完成電影模塊的電影首頁顯示功能，在電影模塊總有以下幾個(gè)展示內(nèi)容：(1)電影首頁展示“正在熱映”、“即將上映”、“豆瓣top250”三種類型的電影，每種類型的電影只展示最前面3部。(2)每種電影有一個(gè)“更多”按鈕，點(diǎn)擊將打開一個(gè)新頁面，展示改類型所有的電影。(3)點(diǎn)擊任意一步電影將打開電影詳情頁面。(4)在電影首頁支持對(duì)電影搜索功能。完成電影模塊的顯示功能，我們需要使用微信小程序自定義組件相關(guān)技術(shù)點(diǎn)以及如何是使用第三方自定義組件，同時(shí)電影模塊的數(shù)據(jù)都是來自豆瓣電影開放的API，因此我們還需要使用微信小程序wx.request的API。微信小程序自定義組件優(yōu)勢(shì)-知識(shí)點(diǎn)學(xué)習(xí)小程序頁面元素都是組件組成的，小程序除了提供內(nèi)置的組件之外，從小程序基礎(chǔ)庫版本1.6.3開始，小程序支持簡潔的組件化編程，開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復(fù)使用；也可以將復(fù)雜的頁面拆分成多個(gè)低耦合的模塊，有助于代碼維護(hù)。自定義組件在使用時(shí)與基礎(chǔ)組件非常相似。自定義組件定義與使用-知識(shí)點(diǎn)學(xué)習(xí)步驟1：創(chuàng)建組件目錄，同時(shí)創(chuàng)建組件文件創(chuàng)建組件與組件頁面很相似。為了方便管理，首先需要?jiǎng)?chuàng)建一個(gè)名為“componets”目錄，然后選擇”新建Compoent“，開發(fā)工具為組件生成四個(gè)文件：組件邏輯控制.js文件組件配置文件.json組件顯示元素文件.wxml組件顯示樣式文件.wxss步驟2：為組件添加屬性、元素并設(shè)置組件樣式在index.js文件中設(shè)置自定義組件屬性//components/movie/movie.jsComponent({

/***組件的屬性列表*/properties:

{

//定義屬性movie:Object

},

/***組件的初始數(shù)據(jù)*/data:

{

},

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

{

}})自定義組件定義與使用-知識(shí)點(diǎn)學(xué)習(xí)<!--自定義電影movie組件--><view

class="movie-container">

<!--電影圖片-->

<image

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

<!--電影標(biāo)題-->

<text

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

<!--電影評(píng)分-->

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

/*電影標(biāo)題*/.movie-title

{

margin-bottom:

16rpx;

font-size:

24rpx;}

/*評(píng)分樣式*/.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文件中添加自定義組件元素自定義組件定義與使用-知識(shí)點(diǎn)學(xué)習(xí){

"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組件展示效果如何使用第三方自定義組件-知識(shí)點(diǎn)學(xué)習(xí)步驟1：在項(xiàng)目中使用npminit命令構(gòu)建項(xiàng)目使用npminit命令構(gòu)建項(xiàng)目npm初始化項(xiàng)目目錄結(jié)構(gòu)自定義組件定義與使用-知識(shí)點(diǎn)學(xué)習(xí)步驟2：在項(xiàng)目中使用npminstalllin-ui命令安裝Lin-UI使用npminstalllin-ui命令安裝Lin-UI構(gòu)建npm命令安裝lin-UI后項(xiàng)目目錄結(jié)構(gòu)小程序加載服務(wù)器數(shù)據(jù)-知識(shí)點(diǎn)學(xué)習(xí)在微信小程序中使用wx.request(Object)方法，發(fā)起HTTPS網(wǎng)絡(luò)請(qǐng)求獲取服務(wù)器數(shù)據(jù)，Object參數(shù)常用屬性為：url類型：string描述：開發(fā)者服務(wù)器接口地址。data類型：string/object/ArrayBuffer描述：請(qǐng)求的參數(shù)。header類型：Object描述：設(shè)置請(qǐng)求的header，header中不能設(shè)置Referer。content-type

默認(rèn)為

application/json。method類型:string描述：HTTP請(qǐng)求方法。注意，method的取值必須大寫timeout類型：number描述：超時(shí)時(shí)間，單位為毫秒。默認(rèn)值為60000。dataType類型：string描述：返回的數(shù)據(jù)格式success

類型：function描述：接口調(diào)用成功的回調(diào)函數(shù)fail類型：function描述：接口調(diào)用失敗的回調(diào)函數(shù)complete類型：function描述：接口調(diào)用完成的回調(diào)函數(shù)其中success回調(diào)函數(shù)的參數(shù)如下：data類型：string/Object/Arraybuffer描述：開發(fā)者服務(wù)器返回的數(shù)據(jù)。statusCode類型：number描述：開發(fā)者服務(wù)器返回的HTTP狀態(tài)碼。header類型：Object描述：開發(fā)者服務(wù)器返回的HTTPResponseHeader。cookies類型：Array.<string>描述：開發(fā)者服務(wù)器返回的cookies，格式為字符串?dāng)?shù)組。success參數(shù)使用wx.request方法加強(qiáng)服務(wù)器數(shù)據(jù)-知識(shí)店學(xué)習(xí)在微信小程序中使用wx.request(Object)方法，在默認(rèn)情況只支持https的請(qǐng)求方式，如果必須使用http請(qǐng)求，需要在開發(fā)工具設(shè)置不合法域名onLoad:

function

(options)

{

const

movie

=

{

"title":

"幕后玩家",

"movieImagePth":

"/images/movie/move01.jpg",

"score":8.5,

"stars":4.5

}

//通過http請(qǐng)求獲得服務(wù)器數(shù)據(jù)(數(shù)據(jù)以json格式進(jìn)行返回)

wx.request({url:

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

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

success:(res)=>{

console.log(res);

}

})示例代碼控制臺(tái)查看數(shù)據(jù)步驟1：從服務(wù)器加載數(shù)據(jù)完成電影列表顯示功能步驟-1//

基于不同url對(duì)http請(qǐng)求獲得服務(wù)器數(shù)據(jù)進(jìn)行封裝

bindMoviesDataByCategory(url,

data,

settedKey,

categoryTitle)

{

//

通過http請(qǐng)求獲得服務(wù)器數(shù)據(jù)(數(shù)據(jù)以json格式進(jìn)行返回)

wx.request({

url:

url,

data:

data,

method:

'GET',

header:

{

"content-type":

"json"

},

success:

(res)

=>

{

cessMovieData(res.data,

settedKey,

categoryTitle);

}

})

},獲得服務(wù)器數(shù)據(jù)并對(duì)數(shù)據(jù)進(jìn)行封裝的邏輯處理處理電影數(shù)據(jù)處理方法//

處理電影首先顯示電影數(shù)據(jù)

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)

{

//

設(shè)置標(biāo)題顯示長度，超過6個(gè)字符進(jìn)行截?cái)嗍褂?..進(jìn)行代替

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:[]}},

/***組件的初始數(shù)據(jù)*/data:{

},

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

}})添加movie-list組件后目錄結(jié)構(gòu)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><!--單個(gè)欄目中顯示電影列表--><viewclass="movies-container"><!--每個(gè)電影信息--><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">

<!--單個(gè)欄目電影列表(正在熱映)-->

<hp-movieList

bind:tap="onGotoMore"

data-type="in_theaters"

title="{{inTheaters.categoryTitle}}"

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

<!--單個(gè)欄目電影列表(即將上映)-->

<hp-movieList

bind:tap="onGotoMore"

data-type="coming_soon"

title="{{comingSoon.categoryTitle}}"

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

<!--單個(gè)欄目電影列表(豆瓣top250)-->

<hp-movieList

bind:tap="onGotoMore"

data-type="top250"

title="{{top250.categoryTitle}}"

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

</view></view>在moives頁面引用自定義組件任務(wù)三：完成電影搜索功能任務(wù)描述：任務(wù)為用戶提供一個(gè)電影搜索的功能，其業(yè)務(wù)邏輯非常簡單，在搜索的輸入框中輸入搜索的電影名稱，然后確定在當(dāng)前頁面顯示搜索結(jié)果。在這里我們并沒有選擇使用一個(gè)新的頁面完成此電影搜索功能，電影的搜索位于電影首頁。當(dāng)用戶進(jìn)行搜索時(shí)，顯示搜索結(jié)果時(shí)，電影首頁的資訊信息被隱藏；相反，當(dāng)退出電影搜索時(shí)，電影搜索面板被隱藏，而電影資訊被顯示，其實(shí)現(xiàn)步驟：實(shí)現(xiàn)電影首頁搜索頁面效果。處理用戶激活搜索框與退出搜索。處理用戶輸入搜索關(guān)鍵字進(jìn)行搜索電影搜索效果圖完成電影搜索功能實(shí)現(xiàn)步驟-1步驟1：實(shí)現(xiàn)電影首頁搜索頁面效果。<!--搜索輸入框-->

<view

class="search">

<icon

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

<input

type="text"placeholder="乘風(fēng)破浪、西游伏妖篇"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中添加電影搜索框顯示的內(nèi)容/*電影搜索樣式*/

.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;}完成電影搜索功能實(shí)現(xiàn)步驟-2步驟2：處理用戶激活搜索框與退出搜索。當(dāng)用戶激活搜索輸入框，隱藏電影資訊面板，顯示取消搜索按鈕（等待用戶輸入內(nèi)容）

//獲得輸入焦點(diǎn)，隱藏電影資訊面板，顯示取消搜索按鈕（等待用戶輸入內(nèi)容）

onBindFocus()

{

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

//設(shè)置取消按鈕顯示，并取消Movie-list顯示容器

this.setData({

//控制取消按鈕searchPanelShow:

true,

//控制搜索結(jié)果容器是否顯示