微信小程式由於適用性強、邏輯簡要、開發迅速的特性，疊加具有海量活躍使用者的騰訊公司背景，逐漸成為了輕量級單一功能應用場景的較佳承載方式，諸如電影購票、外賣點餐、移動商城、生活服務等場景服務提供商迅速切入了。
為了貼合實際的應用情況，本篇以豆瓣評分小程式為參考樣例，邊做邊學小程式的入門開發知識。
目錄
效果圖
Demo原始碼
開發環境
瞭解官方樣例
開發者工具
樣例原始碼結構
開發實戰
底部Tab卡頁
分析開發需求
評分條模板
rpx長度單位
資料繫結
條件渲染
列表渲染
電影海報模板
模板的使用
區塊模板
主頁
網路請求
邏輯實現
setData
點選事件
詳情頁
更多頁
擴充套件知識
思考題
複製程式碼效果圖
先看一下對比效果圖，共三個頁面，分別為首頁、更多頁和詳情頁，左側為豆瓣評分官方小程式，右側為仿作。因API資料問題，沒有做搜尋功能。
主頁
更多頁
詳情頁
Demo原始碼
本篇完整原始碼已提交在: github.com/cnwen/wecha…
開發環境
除錯基礎庫：1.9.91（2018.03.07）
微信開發者工具：Windows版v1.02.1802270
瞭解官方樣例
開啟微信開發者工具，新建一個小程式專案。
1.選擇專案程式碼存放的目錄；
2.填入你的小程式AppID（若無AppID請點選“註冊”獲取，也可選擇“體驗小程式”，如需真機預覽須有AppID）；
3.勾選“建立普通快速啟動模板”。
點選“確定”按鈕後，開發者工具將為我們建立一個簡單的小程式模板，我們可以通過這個樣例來建立對開發者工具和小程式的初步認識。
開發者工具
我們觀察開發者工具，發現由三個主要區域構成，分別是模擬器、編輯器和偵錯程式。
模擬器：頂端含有三個下拉選單，可以配置模擬的機型和所處的網路環境。
編輯器：分為原始碼目錄區域和程式碼區域。
偵錯程式：頂端含有控制檯、網路、儲存等選項卡頁。
樣例原始碼結構
根目錄含有pages、utils資料夾和三個名稱為app的檔案。顧名思義，pages正是存放小程式各個頁面的資料夾，一些公共的工具類建議放在utils資料夾，app檔案是小程式的全域性檔案。
點選檢視app.json檔案的原始碼，可以看到含有pages和window兩個鍵值對。
pages負責配置小程式的頁面，裡面有2條路徑，分別對應index和logs頁面。
Tips：1.第一條路徑固定為小程式的首頁，如果把logs路徑放到首位，那麼logs頁面是首頁；2.同一個頁面的js/wxml/wxss檔案的名稱必須相同，因為路徑是以檔名稱來識別的，路徑是“pages/index/index”，注意後面不帶js/wxml/wxss等字尾，系統會在該路徑尋找需要格式檔案；3.需要顯示的獨立頁面都需要在此處配置，template模板檔案則不需要。
window負責全域性的視窗配置，如導航欄背景色、導航欄文字等。你可以修改它們的值，儲存後在模擬器上看到效果。
試試將navigationBarBackgroundColor的值改為#ffae00，將navigationBarTitleText的值改為“電影排行榜”，按Ctrl+S鍵儲存看看模擬器中的效果吧。
Tips:1.backgroundTextStyle的值目前只有兩種：light和dark；2.navigationBarTextStyle的值目前只有兩種：black和white。
回到原始碼目錄，對比index和logs頁面的構成，發現index頁面並沒有.json檔案，可見這個檔案並非是必須的。但是，如果有這個檔案，那麼必然不能為空，否則控制檯會報錯，可在裡面寫入一個大括號{}儲存即可。
開發實戰
官方樣例先認識到這裡，我們對開發者工具和小程式原始碼構成有了一個初步的印象後，開始邊做邊學。
底部Tab卡頁
我們使用滑鼠右鍵將原始碼目錄pages下的index/logs兩個資料夾刪除，並開啟app.json，在pages的值中配置下圖中的兩條路徑。
按Ctrl+S鍵儲存，開發者工具將自動在指定路徑為我們建立兩個頁面，如下圖所示。
此時，模擬器中的首頁已經變成了movies目錄下的index頁面，因為我們剛才把這個頁面的路徑配置在app.json檔案中pages值的首位了。
如果我們要檢視mine頁面怎麼辦呢？除了使用後文將提到的頁面跳轉功能，這裡用Tab卡頁的切換功能來試試。在app.json檔案中新增tabBar內容，如下所示。
{
"pages":[
"pages/movies/index",
"pages/mine/mine"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#ffae00",
"navigationBarTitleText": "電影排行榜",
"navigationBarTextStyle":"white"
},
"tabBar": {
"list": [
{
"pagePath": "pages/movies/index",
"text": "電影"
},
{
"pagePath": "pages/mine/mine",
"text": "我的"
}
],
"borderStyle": "black",
"selectedColor": "#ffae00"
}
}
複製程式碼在list的值中，我們配置了2個卡頁，text是卡頁的文字，pathPath代表了頁面路徑，當點選卡頁時，將跳轉到指定路徑的頁面。注意卡頁數必須為2-5個才合規，否則控制檯會報錯。並且，這裡的路徑必須被包含在頂端的pages值中，因為所有可抵達頁面都必須在pages中配置路徑。
紅色箭頭指向處有一條水平灰色線，這是卡頁和內容頁的分界線，由borderStyle屬性控制，其值預設為black，目前暫時只有black和white值可選。
selectedColor表示卡頁選中時，其文字的顏色，用十六進位制表示。另外卡頁背景色也可配置。
選項卡可以含有圖示，配置方法如下：
{
"pagePath": "pages/movies/index",
"text": "電影",
"iconPath": "images/tabbar/movie.png",
"selectedIconPath": "images/tabbar/movieSelected.png"
}
複製程式碼一個為預設圖示，一個是選中時顯示的圖示。（請看圖示路徑，我在左側目錄樹的根目錄新建了images/tabbar目錄，並放入了4張圖示，圖示資源在Github原始碼中有）
這樣，首頁Tab便完成了。接下來我們來分析頁面結構，並實現一些公用的template模板檔案。
分析開發需求
作為編碼者，在開始編碼之前，我們要養成先從整體層面上分析整體需求的好習慣，有利於後續的程式碼編寫及維護。
觀察首頁、更多頁和電影詳情頁，可以很容易地歸納出一些可以共用的頁面元素：1.首頁由三大塊組成，正在熱映、即將上映和排行榜區塊除了資料不同，頁面結構是相同的（即紅色框，後文我用block區塊模板代指這塊）；2.每個block模板中含有若干個海報模板，由電影海報、電影名稱和評分條、評分陣列成（藍色框，後文稱poster海報模板）；3.每個評分條是由5顆星星組成的（粉紅框，後文稱ratingbar評分條模板）。
評分條模板
模板頁面（template）是官方提供的一種實現頁面元素複用、減少重複工作的良好實現形式。
從上面的分析中，我們發現這裡提到的三個模板是層層巢狀的，因此，作為入門學習者，我們先從最內層的模板開始實現，即先實現評分條ratingbar模板檔案。
評分星星有三種狀態，我們在images目錄中新建ratingbar目錄，並將這三個星星圖示放入。（Github原始碼中含有本文所需的所有素材）
在movies目錄右鍵滑鼠，依次新建名為ratingbar的目錄和Page。開啟app.json檔案，我們發現開發者工具自動在pages值為我們配置了ratingbar頁面的路徑。
作為模板檔案，是在其它頁面中匯入使用的，它不會單獨被使用，因此其實它不需要在app.json的pages值中配置路徑，並且該頁面只需wxml和wxss即可，js和json檔案都是用不上的，它所含的頁面元素的資料和行為都是由引用它的頁面來操縱的，後文會對此有所涉及。
但在此時，我們需要在模擬器中除錯、檢視其效果，所以要將它當作單獨頁面來使用一次，除錯完後可將js/json檔案刪除，並刪除在app.json中pages值中的路徑，此是後話，暫且略過。
我們在app.json中將ratingbar頁面路徑移到pages值的首位（見上圖），儲存後發現模擬器的首頁變成了ratingbar頁面。
頁面上唯一的一條內容是由開發者工具在新建頁面時自動生成的。我們開啟ratingbar.wxml頁面，將自動生成的標籤內容刪除，並輸入以下內容，按Shift+Alt+F鍵格式化程式碼：
<!--pages/movies/ratingbar/ratingbar.wxml-->
<view class='ratingbar-stars'>
<!--全黃星星-->
<image src='/images/ratingbar/star_fill_whole.png'/>
<image src='/images/ratingbar/star_fill_whole.png'/>
<image src='../../../images/ratingbar/star_fill_whole.png'/>
<!--半黃半灰星星-->
<image src='/images/ratingbar/star_fill_half.png'/>
<!--全灰星星-->
<image src='../../../images/ratingbar/star_fill_none.png'/>
</view>
複製程式碼可以視為官方提供的一種容器，需要成對出現的，在這裡它內部含有5個image元件。class表示其樣式，它將會去同頁面的wxss檔案中查詢並渲染值為.ratingbar-stars的樣式（見下文）。image是影象元件，有一個屬性src，表示要顯示的圖片的地址。像這類內容不需要再包含其它控制元件的控制元件，你也可以寫成單閉合標籤的形式。
這裡src的路徑出現了2種寫法，絕對路徑和相對路徑，如果不瞭解的可另外擴充一下，這裡的路徑是一樣的。
再點開ratingbar.wxss檔案，並輸入以下內容：
/* pages/movies/ratingbar/ratingbar.wxss */
/* class="ratingbar-stars"的控制元件的樣式 */
.ratingbar-stars {
display: flex;
flex-direction: row;
padding-right: 4rpx;
}
/* class="ratingbar-stars"的控制元件下所包含的image控制元件的樣式 */
.ratingbar-stars image {
height: 17rpx;
width: 17rpx;
padding-top: 5rpx;
padding-right: 4rpx;
}
複製程式碼這裡的首個.ratingbar-stars樣式（請注意樣式名前面有個小點號“.”），與的class相呼應，將會用於渲染該控制元件。
這裡採用了CSS中著名的flex彈性盒子模型，flex-direction:row;意味著其內部控制元件將採用水平橫向的方式排列，要表示豎直排列可將值改為column。
第二個.ratingbar-stars image樣式（請注意中間有空格，且image前面沒有點號），表示渲染class='ratingbar-stars'的控制元件內部包含的image控制元件，這裡表示了高height、寬width、距離頂部的內邊距padding-top、距離右側的內邊距padding-right。CSS的更多屬性知識歡迎另行擴充，這是一個多記多練才能生巧的知識。
rpx長度單位
rpx是微信小程式推出的單位，可以根據不同手機不同的螢幕寬度進行內容自適應，使頁面元素在不同螢幕寬度的手機上看起來具有一致性。
無論手機螢幕實際寬度是多少，小程式都會在底層將螢幕寬度換算成750份，如果設計師以iphone6的750*1334（物理畫素）為標準出設計稿的話，1rpx=0.5px=1物理畫素，你可以直接使用設計師標註的引數加上rpx即可。
上面的width:17rpx表示無論在什麼樣的移動裝置上，其大小都為750份中的17份，寬屏則顯示大一些，窄屏則顯示小一些，視覺效果一致。
按Ctrl+S鍵儲存現有程式碼，模擬器即時顯示出了目前的頁面效果：3顆黃星、1顆半星、1顆灰星。
在wxml檔案中，我們在內寫了5個靜態的image影象控制元件。然而在實際場景中，這個不可能是寫死的，而應該是根據電影的不同評分進行相應的顯示。
動態資料涉及到一些資料繫結等相關的知識，這裡先簡要介紹一下。
資料繫結
{{}}
WXML 中的動態資料均來自對應 Page 的 data，資料繫結使用 Mustache 語法（雙大括號）將變數包起來，如：
<view wx:for="{{count}}">
<text>{{stars}}</text>
</view>
複製程式碼頁面渲染時，系統將去對應頁面的js檔案的data屬性中尋找count和stars變數。
條件渲染
wx:if
在框架中，使用 wx:if="{{條件語句}}" 來判斷是否需要渲染該程式碼塊：
<image wx:if="{{stars>30}}" src='/images/ratingbar/star_fill_whole.png' />
複製程式碼上條語句表示當滿足stars>30的條件時，渲染image控制元件。
除了if條件外，還有wx:elif 和 wx:else語句：
<image wx:if="{{stars>30}}" src='/images/ratingbar/star_fill_whole.png' />
<image wx:elif="{{stars>20}}" src='/images/ratingbar/star_fill_half.png' />
<image wx:else src='/images/ratingbar/star_fill_none.png' />
複製程式碼wx:if 有且只有一個；
wx:elif 是else if的意思，可以有多個；
wx:else 最多隻有一個。
系統按順序判斷各個條件，遇到成立的條件時則渲染該控制元件，其餘控制元件則不會渲染。
注意：內部的條件語句的結果為{{false}}才表示條件不成立，不帶{{}}的值將會被視為文字從而判定為條件成立。
<view wx:if="{{false}}"/> <!--條件不成立-->
<view wx:if="false"/> <!--條件成立-->
<view wx:if="3"/> <!--條件成立-->
複製程式碼列表渲染
wx:for
在元件上使用 wx:for 控制屬性繫結一個陣列，即可使用陣列中各項的資料重複渲染該元件。陣列長度為多少，就會重複渲染多少次。
<block wx:for="{{count}}">
<text>{{index}}:{{item}}</text>
</block>
複製程式碼在迴圈時，當前項的變數名預設為 item，其下標變數名預設為 index。
<block wx:for="{{count1}}">
<block wx:for="{{count2}}">
<text>{{index}}:{{item}}</text>
</block>
</block>
複製程式碼如果遇到這種多重迴圈呢，如何在內部表示不同陣列的當前項和下標呢？
可以用wx:for-item和wx:for-index分別指定當前項的變數名和下標的變數名：
<block wx:for="{{count1}}" wx:for-item="outer" wx:for-index="i">
<block wx:for="{{count2}}" wx:for-item="inner" wx:for-index="j">
<text>{{i}}:{{outer}}</text>
<text>{{j}}:{{inner}}</text>
</block>
</block>
複製程式碼資料繫結相關的知識大致瞭解了，我們開啟ratingbar.js，並在data內定義兩個變數：
// pages/movies/ratingbar/ratingbar.js
Page({
data: {
count:[3,5,6,8,9],
stars:16
}
})
複製程式碼然後將ratingbar.wxml檔案內容修改為：
<!--pages/movies/ratingbar/ratingbar.wxml-->
<view class='ratingbar-stars'>
<!--count陣列長度為5，共5次迴圈顯示5顆星星-->
<block wx:for="{{count}}">
<!--全黃星星-->
<image wx:if="{{stars/10>=index+1}}" src='/images/ratingbar/star_fill_whole.png' />
<!--半黃半灰星星-->
<image wx:elif="{{stars/10>=index && stars%10!=0}}" src='/images/ratingbar/star_fill_half.png' />
<!--全灰星星-->
<image wx:else src='/images/ratingbar/star_fill_none.png' />
</block>
</view>
複製程式碼按Ctrl+S儲存看看模擬器的效果，把stars的值改為其它數（0-50之間）試試看星星的顯示效果吧。Tips：這裡的條件語句是研究豆瓣電影API裡電影評分的規律得來的。它的stars取值為0/5/10……40/45/50。
據我們之前對豆瓣評分小程式的分析，評分條一般作為一個元素在相關頁面中顯示，不會獨立作為頁面來顯示。小程式官方提供了機制來解決這種複用性的問題，程式碼片段一處編寫，多處使用，極大地精簡了程式碼的臃腫，也令程式設計師有更多精力專注於必要的地方。其結構如下：
<template name="模板名稱">
<!--這裡是要複用的程式碼片段-->
</template>
複製程式碼我們將剛才編寫的ratingbar.wxml程式碼最外層加上模板標識：
<!--pages/movies/ratingbar/ratingbar.wxml-->
<template name="template-ratingbar-stars">
<view class='ratingbar-stars'>
<!--陣列長度為5，共5次迴圈顯示5顆星星-->
<block wx:for="{{[3,5,6,8,9]}}">
<!--全黃星星-->
<image wx:if="{{stars/10>=index+1}}" src='/images/ratingbar/star_fill_whole.png' />
<!--半黃半灰星星-->
<image wx:elif="{{stars/10>=index && stars%10!=0}}" src='/images/ratingbar/star_fill_half.png' />
<!--全灰星星-->
<image wx:else src='/images/ratingbar/star_fill_none.png' />
</block>
</view>
</template>
複製程式碼模板名稱是template-ratingbar-stars，在其它頁面引入本模板後，根據該名稱即可找到此模板。因為評分條有且只有5顆星星，所以這裡將count的值直接寫在此處wx:for="{{[3,5,6,8,9]}}"，然後我們把ratingbar.js中的相關值註釋掉：
Page({
data: {
// count:[3,5,6,8,9],
// stars:16
}
})
複製程式碼因為作為模板，將在多處呼叫，其所使用的值（如這裡的stars）將由呼叫的地方傳入，也正因為這樣，才有複用性可言。其實，模板檔案只有wxml和wxss有用，js和json檔案刪除亦可。
電影海報模板
我們可以參照編寫評分條模板的步驟，先將其當作為一個頁面，配置在小程式的首頁，在js中模擬資料，除錯成功後，再改成模板頁面。
首先，在movies目錄下新建poster目錄和poster頁面，在app.json的pages屬性中，將poster頁面路徑放在首位（ratingbar路徑可以刪除），以便在模擬器中檢視效果和除錯。
{
"pages": [
"pages/movies/poster/poster",
"pages/movies/ratingbar/ratingbar",
"pages/movies/index",
"pages/mine/mine"
],
……
}
複製程式碼在poster.js中寫入一些模擬資料：
// pages/movies/poster/poster.js
Page({
data: {
title: "奇蹟男孩 Wonder",
images: {
large: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2507709428.jpg"
},
rating: {
average: 8.6,
max: 10,
min: 0,
stars: "45"
}
}
})
複製程式碼我們將在頁面中通過繫結資料來獲取這些資料，如電影名稱{{title}}、海報圖片{{images.large}}、電影評分{{rating.average}}等。
在poster.wxss中寫入：
/* 匯入評分條模板wxss檔案，注意是@import */
@import "../ratingbar/ratingbar.wxss";
.movie {
display: flex;
flex-direction: column;
padding-right: 12rpx;
}
.poster {
width: 200rpx;
height: 270rpx;
padding-bottom: 10rpx;
}
.movie-name {
color: #333333;
font-size: 24rpx;
line-height: 24rpx;
margin: 10rpx 0 5rpx 0;
}
.ratingbar {
display: flex;
flex-direction: row;
}
.ratingbar-score{
color: #999999;
font-size: 20rpx;
}
複製程式碼模板的使用
這裡用到了評分條模板，因此在開頭匯入了評分條模板的wxss樣式。每個.樣式都對應著下文相關控制元件的class。
在poster.wxml中寫入：
<!--匯入評分條模板wxml檔案，注意別少了後面的 / 符號-->
<import src="../ratingbar/ratingbar.wxml" />
<view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'>
<!--海報圖-->
<image class="poster" src='{{images.large}}'></image>
<!--電影名稱-->
<text class='movie-name'>{{title}}</text>
<!--評分星星和數字-->
<view class='ratingbar'>
<!--評分條-->
<template is="template-ratingbar-stars" data="{{...rating}}" />
<!--評分分數-->
<text class='ratingbar-score'>{{rating.average}}</text>
</view>
</view>
複製程式碼同理，開頭也匯入了評分條模板的wxml檔案，並通過以下方式使用。
<!--評分條-->
<template is="template-ratingbar-stars" data="{{...rating}}" />
複製程式碼is屬性值正是評分條模板的name名稱，data值將相關資料傳入評分條模板。
poster.js的data屬性中含有rating資料，其格式見下文。上文中的…rating即是將rating資料散開，將其內容傳入評分條模板，評分條模板裡可以直接使用{{stars}}，而不需要通過{{rating.stars}}的方式。
rating: {
average: 8.6,
max: 10,
min: 0,
stars: "45"
}
複製程式碼這裡還出現了諸如下文的屬性名，我們將留到後面講解。
<view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'>
複製程式碼現在，將poster.js的data屬性中的模擬資料註釋或刪除掉，並將poster.wxml封裝成模版，如下文所示。
<!--匯入評分條模板wxml檔案，注意別少了後面的 / 符號-->
<import src="../ratingbar/ratingbar.wxml" />
<!--封裝成名稱為template-poster的模板-->
<template name="template-poster">
<view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'>
<!--海報圖-->
<image class="poster" src='{{images.large}}'></image>
<!--電影名稱-->
<text class='movie-name'>{{title}}</text>
<!--評分星星和數字-->
<view class='ratingbar'>
<!--評分條-->
<template is="template-ratingbar-stars" data="{{...rating}}" />
<!--評分分數-->
<text class='ratingbar-score'>{{rating.average}}</text>
</view>
</view>
</template>
複製程式碼區塊模板
有了電影海報模板後，接下來我們進行下一步。觀察到首頁是由三個結構一模一樣的紅色區塊組成，顯然，這也可以是一個模板，暫且稱之為block吧。
步驟和先前個模板一樣，為節省篇幅，這裡會更簡略地以貼程式碼為主。首頁在movies目錄下新建block目錄和頁面，並在app.json檔案的pages中將block頁面的路徑移到首位，以便觀察模擬器效果。
在images目錄新建block目錄，放入下面這張名為arrow-right.png的右箭頭圖片。
在block.js檔案的data屬性中寫入模擬的資料（如下），有兩個鍵值對，一為blockTitle區塊標題，一為blockMovies為區塊電影資料（與豆瓣API返回的格式一致，有刪減欄位，但結構不變）。
// pages/movies/block/block.js
Page({
data: {
blockTitle:"正在熱映",
blockMovies: {
"count": 4,
"start": 0,
"subjects": [{
"casts": [{
"avatars": {
"large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1509423054.09.jpg"
},
"name": "阿德瓦·香登"
},
{
"avatars": {
"large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p13628.jpg"
},
"name": "阿米爾·汗"
},
{
"avatars": {
"large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1494080264.12.jpg"
},
"name": "塞伊拉·沃西"
}
],
"comments_count": 5951,
"countries": [
"印度"
],
"directors": [{
"avatars": {
"large": null
},
"name": "阿德瓦·香登"
}],
"genres": [
"劇情",
"音樂"
],
"id": 259,
"images": {
"large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508925590.jpg"
},
"original_title": "神祕巨星 Secret Superstar",
"rating": {
"average": 8.2,
"max": 10,
"min": 0,
"stars": "40"
},
"reviews_count": 292,
"summary": "14歲的印度少女尹希婭（塞伊拉·沃西 飾）熱愛唱歌，因父親阻撓，她只能蒙面拍攝並上傳自彈自唱原創歌曲的視訊，孰料憑藉天籟歌喉在網上一炮而紅，備受爭議的音樂人夏克提·庫馬爾（阿米爾·汗 飾）也向她丟擲橄欖枝，尹希婭的生活發生了翻天覆地的變化……",
"title": "神祕巨星 Secret Superstar",
"warning": "資料來源於網路整理，僅供學習，禁止他用。如有侵權請聯絡公眾號：小樓昨夜又秋風。我將及時刪除。",
"wish_count": 22447,
"year": 2017
},
{
"casts": [{
"avatars": {
"large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p19485.jpg"
},
"name": "李芳芳"
},
{
"avatars": {
"large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1359895311.0.jpg"
},
"name": "章子怡"
},
{
"avatars": {
"large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1472787652.32.jpg"
},
"name": "黃曉明"
}
],
"comments_count": 58027,
"countries": [
"中國大陸"
],
"directors": [{
"avatars": {
"large": null
},
"name": "李芳芳"
}],
"genres": [
"劇情",
"愛情",
"戰爭"
],
"id": 265,
"images": {
"large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2507572275.jpg"
},
"original_title": "無問西東",
"rating": {
"average": 7.5,
"max": 10,
"min": 0,
"stars": "40"
},
"reviews_count": 4354,
"summary": "如果提前瞭解了你所要面對的人生，你是否還會有勇氣前來？吳嶺瀾、沈光耀、王敏佳、陳鵬、張果果，幾個年輕人滿懷諸多渴望，在四個非同凡響的時空中一路前行。\\n吳嶺瀾（陳楚生 飾），出發時意氣風發，卻很快在途中迷失了方向。沈光耀（王力巨集 飾），自願參與了最殘酷的戰爭，他一直在努力去做那些令他害怕，但重要的事。王敏佳（章子怡 飾）最初的錯誤，只是為了虛榮撒了一個小謊；最初的煩惱，只是在兩個優秀的男人中選擇一個。但命運，卻把她拖入被眾人唾罵的深淵。陳鵬（黃曉明 飾）把愛情擺在了理想前面，但愛情卻沒有把他擺在前面。他說，“我有人要照顧”，縱然這意味著與所有人作對，意味著要和她一起被放逐千里。張果果（張震 飾），身處爾虞我詐的職場，“贏”是他的習慣。為了贏，他總是見招拆招，先發制人。而有一天，他卻面臨了一個比“贏”更重要的選擇。這幾個年輕人，在最好的年紀迎來了最殘酷的...",
"title": "無問西東",
"warning": "資料來源於網路整理，僅供學習，禁止他用。如有侵權請聯絡公眾號：小樓昨夜又秋風。我將及時刪除。",
"wish_count": 32890,
"year": 2018
},
{
"casts": [{
"avatars": {
"large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p57551.jpg"
},
"name": "斯蒂芬·卓博斯基"
},
{
"avatars": {
"large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1456737567.18.jpg"
},
"name": "雅各布·特倫布萊"
},
{
"avatars": {
"large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p8889.jpg"
},
"name": "朱莉婭·羅伯茨"
}
],
"comments_count": 4854,
"countries": [
"美國"
],
"directors": [{
"avatars": {
"large": null
},
"name": "斯蒂芬·卓博斯基"
}],
"genres": [
"劇情",
"家庭",
"兒童"
],
"id": 269,
"images": {
"large": "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2507709428.jpg"
},
"original_title": "奇蹟男孩 Wonder",
"rating": {
"average": 8.6,
"max": 10,
"min": 0,
"stars": "45"
},
"reviews_count": 162,
"summary": "電影《奇蹟男孩》改編自全球暢銷小說《奇蹟》，講述了一個溫暖千萬家庭的成長故事。10 歲的奧吉（雅各布·特倫布萊 Jacob Tremblay 飾）天生臉部畸形，此前一直在家中和媽媽（朱莉婭·羅伯茨 Julia Roberts 飾）自學。當他小學五年級時，奧吉進入父母為他精心挑選的學校上學。在這裡，奧吉將與校長、老師以及性格迥異的同學相處，他不尋常的外表讓他成為同學們討論的焦點，並終日受到嘲笑和排斥，就連好不容易交到的新朋友也似乎不太值得信任。幸運的是，在成長過程中，奧吉的父母、姐姐一直是他最堅強的後盾，在他們的支援與關愛下，奧吉憑藉自身的勇氣、善良、聰敏影響激勵了許多身邊的人，並收穫了友誼、尊重與愛，最終成長為大家心目中的不可思議的“奇蹟”。",
"title": "奇蹟男孩 Wonder",
"warning": "資料來源於網路整理，僅供學習，禁止他用。如有侵權請聯絡公眾號：小樓昨夜又秋風。我將及時刪除。",
"wish_count": 29417,
"year": 2017
},
{
"casts": [{
"avatars": {
"large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p20143.jpg"
},
"name": "丁晟"
},
{
"avatars": {
"large": "https://img1.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1509429399.29.jpg"
},
"name": "王凱"
},
{
"avatars": {
"large": "https://img3.doubanio.com/view/celebrity/s_ratio_celebrity/public/p1422629943.25.jpg"
},
"name": "馬天宇"
}
],
"comments_count": 6927,
"countries": [
"中國大陸",
"香港"
],
"directors": [{
"avatars": {
"large": null
},
"name": "丁晟"
}],
"genres": [
"劇情",
"動作"
],
"id": 260,
"images": {
"large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508615612.jpg"
},
"original_title": "英雄本色2018",
"rating": {
"average": 5.2,
"max": 10,
"min": 0,
"stars": "25"
},
"reviews_count": 711,
"summary": "周凱（王凱 飾）參與走私，被身為緝毒警察的弟弟周超（馬天宇 飾）逮捕入獄。三年後，周凱出獄，改過自新。曾經的手下阿倉（餘皚磊 飾）已為毒販頭目，為獲取周凱的海外客戶資料，設計加害周凱。江湖中的好兄弟馬柯（王大陸 飾）為了替周凱報仇，失去一條腿。自己的親弟弟周超不相信哥哥周凱已金盆洗手，不斷蒐集證據，欲親手逮捕周凱。最終，周凱與警方合作，逮捕了阿倉，兩兄弟重歸於好。",
"title": "英雄本色2018",
"warning": "資料來源於網路整理，僅供學習，禁止他用。如有侵權請聯絡公眾號：小樓昨夜又秋風。我將及時刪除。",
"wish_count": 4552,
"year": 2018
}
]
}
}
})
複製程式碼在block.wxss檔案中寫入以下資料：
/* pages/movies/block/block.wxss */
/* 匯入電影海報模板的WXSS */
@import "../poster/poster.wxss";
.block-title-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 30rpx 20rpx 0rpx 20rpx;
}
.block-title {
color: #333333;
font-size: 30rpx;
}
.block-more {
display: flex;
flex-direction: row;
align-items: center;
}
.block-more-text {
color: #ffae00;
font-size: 24rpx;
}
.block-more-icon {
width: 12rpx;
height: 20rpx;
padding-left: 6rpx;
}
.block-scroll-view {
display: flex;
flex-direction: row;
}
.block-movie-row{
display: flex;
flex-direction: row;
padding: 20rpx 0 20rpx 20rpx;
}
.block-movie-card {
display: flex;
flex-direction: row;
margin-right: 10rpx;
}
複製程式碼在block.wxml中寫入：
<!--pages/movies/block/block.wxml-->
<!--匯入電影海報模板-->
<import src="../poster/poster.wxml" />
<view>
<!--區塊頂欄-->
<view class='block-title-bar'>
<!--類別標題，如正在熱映-->
<text class='block-title'>{{blockTitle}}</text>
<view class='block-more' catchtap='catchMore' data-title='{{blockTitle}}'>
<!--更多-->
<text class='block-more-text'>更多</text>
<!--右箭頭-->
<image class='block-more-icon' src='/images/block/arrow-right.png'></image>
</view>
</view>
<!--電影海報展示條-->
<scroll-view scroll-x="{{true}}" class='block-scroll-view'>
<view class='block-movie-row'>
<block wx:for="{{blockMovies.subjects}}" wx:for-item="poster">
<!--單個電影海報-->
<view class='block-movie-card'>
<template is="template-poster" data="{{...poster}}" />
</view>
</block>
</view>
</scroll-view>
</view>
複製程式碼按Ctrl+S儲存後，模擬器效果如下。第一個出現了電影名稱過長的情形，我們後續會寫一個stringUtil.js的工具類來截斷。
我們在block頁面匯入了poster模板的wxml和wxss檔案，並通過下文程式碼使用了。
<!--匯入電影海報模板-->
<import src="../poster/poster.wxml" />
……
<!--電影海報展示條-->
<scroll-view scroll-x="{{true}}" class='block-scroll-view'>
<view class='block-movie-row'>
<block wx:for="{{blockMovies.subjects}}" wx:for-item="poster">
<!--單個電影海報-->
<view class='block-movie-card'>
<template is="template-poster" data="{{...poster}}" />
</view>
</block>
</view>
</scroll-view>
……
複製程式碼這裡使用了一個新的控制元件滑動條，有scroll-x和scroll-y屬性，用以設定滑動的方向是水平還是豎直。
在滑動條內部，通過wx:for迴圈取出blockMovies.subjects的值，用poster表示當前項。
電影海報通過海報模板匯入，通過{{…poster}}的形式散開poster的值傳入海報模板中，為海報模板中的同名變數提供對應的值。
<!--類別標題，如正在熱映-->
<text class='block-title'>{{blockTitle}}</text>
<view class='block-more' catchtap='catchMore' data-title='{{blockTitle}}'>
複製程式碼在上文中又出現了catchtap和data-形式的屬性名，這是介面上“更多”按鈕的點選事件和自定義屬性，後文詳細講解。
最後將block.js中data裡的相關資料註釋或刪除，並在block.wxml裡封裝模板。
<!--匯入電影海報模板-->
<import src="../poster/poster.wxml" />
<!--封裝成區塊模板-->
<template name="template-block">
<view>
……
</view>
</template>
複製程式碼別忘了在app.json檔案的data屬性中將主頁的路徑“pages/movies/index”提到首位，我們即將要編寫主頁了。
到目前為止，我們所需要的三個模板已經全部封裝完了。
block模板裡匯入了poster模板，後者又嵌入了ratingbar模板，極大的精簡了相關的程式碼，加強了程式碼的易維護性。不信？看主頁，我們只需寥寥數行程式碼即可。
下篇：https://mp.weixin.qq.com/s/Isfk9s2cgtyXdh5Olap9QA