微信小程序版豆瓣電影

時(shí)間：2023-05-13 21:42:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-05-13 21:42:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

微信小程序版豆瓣電影：最近，工作沒(méi)有那么忙，終于有時(shí)間學(xué)習(xí)微信小程序的開發(fā)了。學(xué)習(xí)的過(guò)程還是比較順利的，入門相對(duì)簡(jiǎn)單，即便沒(méi)有多少前端開發(fā)經(jīng)驗(yàn)的人也能很快上手。

現(xiàn)在微信小程序的資料還比較少，查看官方文檔是很好的方式。微信小程序的官方文檔還是很容易閱讀的，并沒(méi)有什么閱讀障礙。在一個(gè)悠閑的午后，泡一杯清茶，開始了我的小程序之旅?；艘幌挛绲臅r(shí)間把官方文檔刷了一遍。接著，下載官方提供的 Demo，在微信開發(fā)者工具運(yùn)行，查看每個(gè)組件的效果，使用方式，調(diào)試著看界面布局，學(xué)習(xí)API接口，順便將彈性盒子模式復(fù)習(xí)了下。

在項(xiàng)目中學(xué)習(xí)才是最有效的學(xué)習(xí)方式。于是，我開始思考要做些什么項(xiàng)目。小程序適合開發(fā)低頻使用，用完即走，業(yè)務(wù)不能太復(fù)雜的應(yīng)用。工具類的應(yīng)用首先被考慮，其次希望能把關(guān)注點(diǎn)放在微信小程序的開發(fā)，最好能有現(xiàn)成的后臺(tái)接口。確認(rèn)了方向之后，最終決定仿豆瓣電影的功能，開發(fā)一款微信小程序版的豆瓣電影。

準(zhǔn)備工作：

數(shù)據(jù)來(lái)源：豆瓣電影API：https://developers.douban.com/wiki/?title=movie_v2

開發(fā)工具：微信開發(fā)者工具 0.14.140900

功能：

• 電影榜單列表
• 電影搜索
• 電影條目信息
• 影人條目信息

預(yù)覽：





電影首頁(yè)：顯示“影院熱映”，“即將上映”以及“精選榜單”，測(cè)試之后發(fā)現(xiàn)精選榜單只有Top250的 API 接口能正常使用，于是，豆瓣Top250、口碑榜、新片榜、票房榜使用同一個(gè) API 接口，只是請(qǐng)求的數(shù)據(jù)參數(shù)不一樣。由于微信小程序的 request 的最大并發(fā)數(shù)是 5，所以用戶進(jìn)入程序時(shí)只加載“影院熱映”、“即將上映”的數(shù)據(jù)，界面滑動(dòng)之后再加載榜單數(shù)據(jù)。

/** 滑動(dòng)屏幕 */ handleTouchMove: function (event) { var offsetTop = event.target.offsetTop; console.log("handleTouchMove offsetTop: " + offsetTop); if (offsetTop > 10 && !this.data.acquiredSelected) { this.getSelectedListData(); } },“更多”右側(cè)的箭頭這里并沒(méi)有使用圖標(biāo)，而是使用樣式來(lái)實(shí)現(xiàn)的。微信小程序?qū)?app 的體積有限制，超過(guò)1M就不能上傳。其實(shí)，不只是微信小程序，網(wǎng)頁(yè)也一樣。能用樣式實(shí)現(xiàn)的就不用字體圖標(biāo)；能用字體圖標(biāo)實(shí)現(xiàn)的就不用 sprite 圖；能用 sprite 圖實(shí)現(xiàn)的就不用單一圖標(biāo)。樣式 > 字體圖標(biāo) > sprite 圖 > 單一圖標(biāo)，不能說(shuō)是絕對(duì)，但基本原則是這樣。這樣做的目的也是為了減少 app 的體積，減少 HTTP 的請(qǐng)求次數(shù)，減輕服務(wù)器的壓力。

顯示更多組件

<text class="session-header-more" bindtap="bindMore" data-type-id="intheaters">更多</text>顯示更多樣式

.session-header-more { font-size: 28rpx; color: #32cd32; font-weight: 500; position: relative; padding-right: 20rpx;}.session-header-more::after { content: " "; display: inline-block; position: absolute; top: 50%; width: 12rpx; height: 12rpx; transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0); margin-top: -8rpx; border-width: 2rpx 2rpx 0px 0px; border-color: #32cd32; border-style: solid;}微信小程序提供了模板功能，可以在模板中定義代碼片段，在不同的地方調(diào)用。模板可以減少重復(fù)性代碼，使代碼結(jié)構(gòu)更加清晰，增強(qiáng)代碼的可讀性，也方便以后維護(hù)代碼。模板粒度的劃分可以根據(jù)頁(yè)面的復(fù)雜度跟組件被重用的頻率。模板可以組合嵌套使用，大的功能組件可以利用模板劃分成更小的功能組件。在電影首頁(yè)中，“影院熱映”，“即將上映”展示的是電影信息列表，可以將電影海報(bào)，電影名字，評(píng)分，想看人數(shù)作為一個(gè)大的“組件”抽象出來(lái)形成電影信息塊模板組件。評(píng)分在首頁(yè)電影，更多列表中多次被使用，可以抽象出評(píng)分模板組件。

評(píng)分模板

<!--pages/movie/movie-rating/movie-rating-template.wxml--><template name="rating-template"> <view class="rating"> <view class="rating-star allstar{{rating.average | 0}}"></view> <text class="rating-average">{{rating.average}}</text> </view></template>電影信息塊模板

<!--pages/movie/movie-grid/movie-grid-template.wxml--><import src="/pages/movie/movie-rating/movie-rating-template.wxml" /><template name="movie-grid-template"> <view class="movie-wrapper" bindtap="bindMovieDetail" data-id="{{id}}"> <view class="movie-content"> <image class="poster" src="{{images.medium}}"></image> <text class="name">{{title}}</text> <template is="rating-template" data="{{rating}}" /> <text class="wish-count">{{collect_count}}人想看</text> </view> </view></template>評(píng)分用星星表示不同的分?jǐn)?shù)，10分用5星表示，1分顯示半星。這里使用 sprite 圖，可以減少圖片的數(shù)量。在組件樣式中指定圖片位置的偏移量，用于顯示不同的圖標(biāo)。





評(píng)分樣式

.rating { display: flex; flex-direction: row; position: relative; margin-top: 10rpx; margin-bottom: 10rpx;}.rating-star { content: ""; display: inline-block; width: 55px; height: 11px; position: absolute; background-repeat: no-repeat; background-image: url(/images/icon/ic_rating_s.png);}.allstar10 { background-position: 0px 0px;}.allstar9 { background-position: 0px -11px;}.allstar8 { background-position: 0px -22rpx;}.allstar7 { background-position: 0px -33px;}.allstar6 { background-position: 0px -44px;}.allstar5 { background-position: 0px -55px;}.allstar4 { background-position: 0px -66px;}.allstar3 { background-position: 0px -77px;}.allstar2 { background-position: 0px -88px;}.allstar1 { background-position: 0px -99px;}.allstar0 { background-position: 0px -110px;}.rating-average { margin-left: 120rpx; font-size: 20rpx; line-height: 22rpx; color: #878787; height: 22rpx;}





電影列表：顯示更多電影列表。這里使用標(biāo)簽頁(yè)切換“正在熱映”、“即將上映”。使用 wx:if 控制組件的顯示與隱藏，電影列表可以抽象出電影信息模板。

<!--pages/movie/movie-list/movie-list.wxml--><import src="/pages/movie/movie-rating/movie-rating-template.wxml" /><template name="movie-list-template"> <view class="movie-wrapper" bindtap="bindMovieDetail" data-id="{{id}}"> <view class="movie-content"> <image class="poster" src="{{images.medium}}"></image> <view class="movie-summary"> <text class="name">{{title}}</text> <text class="directors">導(dǎo)演：{{directors}}</text> <text class="casts">主演：{{casts}}</text> <text class="genres">類型：{{genres}}</text> <template is="rating-template" data="{{rating}}" /> <text class="wish-count" style="color:#9bdff9;">{{collectCount}}人想看</text> </view> <block wx:if="{{typeId == 'comingsoon'}}"> <text class="wish-btn" style="color:#de9703;border-color:#de9703" catchtap="handleWishtap">想看</text> </block> <block wx:if="{{typeId == 'intheaters'}}"> <text class="ticket-btn" style="color:#9bdff9;border-color:#9bdff9" catchtap="handleTickettap">購(gòu)票</text> </block> </view> </view></template>





精選榜單：顯示電影榜單列表。這里要說(shuō)的是列表序號(hào)。列表序號(hào)左右兩邊有橫線，這里也是使用樣式實(shí)現(xiàn)。前三個(gè)序號(hào)顯示的顏色不一樣。

列表序號(hào)組件

<text class="selected-index">{{index + 1}}</text>列表序號(hào)樣式

.selected-index::before { content: ""; width: 80rpx; border-bottom: 2rpx solid #e9e9e9; box-sizing: border-box; display: inline-block; margin-right: 15rpx; margin-bottom: 10rpx;}.selected-index::after { content: ""; width: 80rpx; border-bottom: 2rpx solid #e9e9e9; box-sizing: border-box; display: inline-block; margin-left: 15rpx; margin-bottom: 10rpx;}.selected-wrapper:first-child .selected-index { color: #e14c63;}.selected-wrapper:nth-child(2) .selected-index { color: #fca167;}.selected-wrapper:nth-child(3) .selected-index { color: #f5c564;}





電影搜索：電影搜索沒(méi)有太多要講的。點(diǎn)擊搜索區(qū)塊跳到搜索界面，獲取 input 的輸入值，后臺(tái)請(qǐng)求電影信息。當(dāng)輸入框有值時(shí)，顯示 x，點(diǎn)擊 x 之后可以清空輸入框內(nèi)容。

<icon class="search-icon" type="search" size="16"></icon><input class="search-content" placeholder-class="search-placeholder" bindinput="bindSearchInput" placeholder="搜索電影" value="{{searchValue}}" /><block wx:if="{{showDelete}}"> <text class="search-delete" bindtap="bindSearchDelete">x</text></block><text class="search-cancel" bindtap="bindSearchCancel">取消</text>使用bindinput獲取輸入框的值

/** 搜索影視 */bindSearchInput: function (event) { var value = event.detail.value; var readyData = { showDelete: false }; if (value.length > 0) { readyData = { showDelete: true }; this.handleSearchData(value); } this.setData(readyData);},/**清空輸入框 */bindSearchDelete: function (event) { var readyData = { searchValue: "", showDelete: false, result: {} }; this.setData(readyData);},





影片詳情：可以查看影片信息，影人信息，給電影評(píng)分，但是評(píng)分 API 接口不支持，評(píng)分?jǐn)?shù)據(jù)不能上傳到服務(wù)器。影人信息的描述信息無(wú)法獲取。這里要說(shuō)一下評(píng)分，剛開始的想法是通過(guò) sprite 圖，手指在星星上滑動(dòng)時(shí)可以顯示不同的評(píng)分，但是，微信小程序是基于數(shù)據(jù)驅(qū)動(dòng)的模式，沒(méi)有 window、document 對(duì)象，不能使用 JavaScript 操作 DOM，無(wú)法獲取組件的坐標(biāo)值，這樣就無(wú)法確定手指的坐標(biāo)是在哪個(gè)星星上。于是，只好顯示五個(gè)星星圖標(biāo)，通過(guò)獲取 tap 事件來(lái)實(shí)現(xiàn)評(píng)分功能。評(píng)分描述則通過(guò)樣式控制透明度實(shí)現(xiàn)顯示與隱藏。

事件處理

bindMark: function (event) { var id = event.target.dataset.id; this.setData({ "mark": id }); },<view class="rating"> <view class="rating-desc"> <text class="desc-text {{mark == 1 ? 'desc-text-show' : ''}}">很差</text> <text class="desc-text {{mark == 2 ? 'desc-text-show' : ''}}">較差</text> <text class="desc-text {{mark == 3 ? 'desc-text-show' : ''}}">還行</text> <text class="desc-text {{mark == 4 ? 'desc-text-show' : ''}}">推薦</text> <text class="desc-text {{mark == 5 ? 'desc-text-show' : ''}}">力薦</text> </view> <view class="rating-stars-wrapper" bindtap="bindMark"> <block wx:for="{{[1,2,3,4,5]}}" wx:for-item="id"> <image class="{{mark >= id ? 'star-HL' : 'star'}}" src="#" data-id="{{id}}"></image> </block> </view> <!-- Don't use sprite, can't give a mark --> <!--<image class="rating-star" bindtap="handleRating" src="#"></image>--></view>評(píng)分組件樣式

.desc-text { width: 32px; height: 22px; font-size: 15px; line-height: 22px; text-align: center; color: #9e9e9e; opacity: 0;}.desc-text-show { opacity: 1;}.star { width: 32px; height: 32px; background: url("/images/icon/ic_rating_star.png") no-repeat;}.star-HL { width: 32px; height: 32px; background: url("/images/icon/ic_rating_star_HL.png") no-repeat;}這個(gè)項(xiàng)目還是比較簡(jiǎn)單的，前后花了5天的時(shí)間就完成了。所使用的接口是豆瓣電影的公開接口，限定40次請(qǐng)求/分鐘。對(duì)于學(xué)習(xí)來(lái)說(shuō)已經(jīng)足夠了。如果運(yùn)行時(shí)出現(xiàn)400的錯(cuò)誤，是請(qǐng)求過(guò)于頻繁，稍等一會(huì)就好了。

最后，附上項(xiàng)目的Github地址：https://github.com/bruintong/wechat-webapp-douban-movie


作者：bruintong
來(lái)源：慕課網(wǎng)