微信小程序由于適用性強(qiáng)驻襟、邏輯簡(jiǎn)要、開發(fā)迅速的特性芋哭，疊加具有海量活躍用戶的騰訊公司背景沉衣，逐漸成為了輕量級(jí)單一功能應(yīng)用場(chǎng)景的較佳承載方式，諸如電影購(gòu)票减牺、外賣點(diǎn)餐豌习、移動(dòng)商城、生活服務(wù)等場(chǎng)景服務(wù)提供商迅速切入了拔疚。

為了貼合實(shí)際的應(yīng)用情況肥隆，本篇以豆瓣評(píng)分小程序?yàn)閰⒖紭永呑鲞厡W(xué)小程序的入門開發(fā)知識(shí)稚失。

目錄

效果圖
Demo源碼
開發(fā)環(huán)境
了解官方樣例
    開發(fā)者工具
    樣例源碼結(jié)構(gòu)
開發(fā)實(shí)戰(zhàn)
    底部Tab卡頁(yè)
    分析開發(fā)需求
    評(píng)分條模板
        rpx長(zhǎng)度單位
        數(shù)據(jù)綁定
        條件渲染
        列表渲染
    電影海報(bào)模板
        模板的使用
    區(qū)塊模板
    主頁(yè)
        網(wǎng)絡(luò)請(qǐng)求
        邏輯實(shí)現(xiàn)
        setData
        點(diǎn)擊事件
    詳情頁(yè)
    更多頁(yè)
擴(kuò)展知識(shí)
思考題

效果圖

先看一下對(duì)比效果圖栋艳，共三個(gè)頁(yè)面，分別為首頁(yè)句各、更多頁(yè)和詳情頁(yè)吸占，左側(cè)為豆瓣評(píng)分官方小程序，右側(cè)為仿作凿宾。因API數(shù)據(jù)問(wèn)題矾屯，沒(méi)有做搜索功能。

主頁(yè)

img

更多頁(yè)

img

詳情頁(yè)

img

Demo源碼

本篇完整源碼已提交在: https://github.com/cnwen/wechatapp_movie

開發(fā)環(huán)境

調(diào)試基礎(chǔ)庫(kù)：1.9.91（2018.03.07）

微信開發(fā)者工具：Windows版v1.02.1802270

了解官方樣例

打開微信開發(fā)者工具初厚，新建一個(gè)小程序項(xiàng)目件蚕。

1.選擇項(xiàng)目代碼存放的目錄；

2.填入你的小程序AppID（若無(wú)AppID請(qǐng)點(diǎn)擊“注冊(cè)”獲取，也可選擇“體驗(yàn)小程序”排作，如需真機(jī)預(yù)覽須有AppID）牵啦；

3.勾選“建立普通快速啟動(dòng)模板”。

點(diǎn)擊“確定”按鈕后纽绍，開發(fā)者工具將為我們建立一個(gè)簡(jiǎn)單的小程序模板蕾久，我們可以通過(guò)這個(gè)樣例來(lái)建立對(duì)開發(fā)者工具和小程序的初步認(rèn)識(shí)势似。

img

開發(fā)者工具

我們觀察開發(fā)者工具拌夏，發(fā)現(xiàn)由三個(gè)主要區(qū)域構(gòu)成，分別是模擬器履因、編輯器和調(diào)試器障簿。

img

模擬器：頂端含有三個(gè)下拉列表，可以配置模擬的機(jī)型和所處的網(wǎng)絡(luò)環(huán)境栅迄。

編輯器：分為源碼目錄區(qū)域和代碼區(qū)域站故。

調(diào)試器：頂端含有控制臺(tái)、網(wǎng)絡(luò)毅舆、存儲(chǔ)等選項(xiàng)卡頁(yè)西篓。

樣例源碼結(jié)構(gòu)

根目錄含有pages、utils文件夾和三個(gè)名稱為app的文件憋活。顧名思義岂津，pages正是存放小程序各個(gè)頁(yè)面的文件夾，一些公共的工具類建議放在utils文件夾悦即，app文件是小程序的全局文件吮成。

點(diǎn)擊查看app.json文件的源碼，可以看到含有pages和window兩個(gè)鍵值對(duì)辜梳。

img

pages負(fù)責(zé)配置小程序的頁(yè)面粱甫，里面有2條路徑，分別對(duì)應(yīng)index和logs頁(yè)面作瞄。

Tips：1.第一條路徑固定為小程序的首頁(yè)茶宵，如果把logs路徑放到首位，那么logs頁(yè)面是首頁(yè)宗挥；2.同一個(gè)頁(yè)面的js/wxml/wxss文件的名稱必須相同乌庶，因?yàn)槁窂绞且晕募Q來(lái)識(shí)別的，路徑是“pages/index/index”属韧，注意后面不帶js/wxml/wxss等后綴安拟，系統(tǒng)會(huì)在該路徑尋找需要格式文件；3.需要顯示的獨(dú)立頁(yè)面都需要在此處配置宵喂，template模板文件則不需要糠赦。

window負(fù)責(zé)全局的窗口配置，如導(dǎo)航欄背景色、導(dǎo)航欄文字等拙泽。你可以修改它們的值淌山，保存后在模擬器上看到效果。

試試將navigationBarBackgroundColor的值改為#ffae00顾瞻，將navigationBarTitleText的值改為“電影排行榜”泼疑，按Ctrl+S鍵保存看看模擬器中的效果吧。

Tips:1.backgroundTextStyle的值目前只有兩種：light和dark荷荤；2.navigationBarTextStyle的值目前只有兩種：black和white退渗。

回到源碼目錄，對(duì)比index和logs頁(yè)面的構(gòu)成蕴纳，發(fā)現(xiàn)index頁(yè)面并沒(méi)有.json文件会油，可見(jiàn)這個(gè)文件并非是必須的。但是古毛，如果有這個(gè)文件翻翩，那么必然不能為空，否則控制臺(tái)會(huì)報(bào)錯(cuò)稻薇，可在里面寫入一個(gè)大括號(hào){}保存即可嫂冻。

開發(fā)實(shí)戰(zhàn)

官方樣例先認(rèn)識(shí)到這里，我們對(duì)開發(fā)者工具和小程序源碼構(gòu)成有了一個(gè)初步的印象后塞椎，開始邊做邊學(xué)桨仿。

底部Tab卡頁(yè)

我們使用鼠標(biāo)右鍵將源碼目錄pages下的index/logs兩個(gè)文件夾刪除，并打開app.json忱屑，在pages的值中配置下圖中的兩條路徑蹬敲。

img

按Ctrl+S鍵保存，開發(fā)者工具將自動(dòng)在指定路徑為我們創(chuàng)建兩個(gè)頁(yè)面莺戒，如下圖所示伴嗡。

img

此時(shí)，模擬器中的首頁(yè)已經(jīng)變成了movies目錄下的index頁(yè)面从铲，因?yàn)槲覀儎偛虐堰@個(gè)頁(yè)面的路徑配置在app.json文件中pages值的首位了瘪校。

img

如果我們要查看mine頁(yè)面怎么辦呢？除了使用后文將提到的頁(yè)面跳轉(zhuǎn)功能名段，這里用Tab卡頁(yè)的切換功能來(lái)試試阱扬。在app.json文件中添加tabBar內(nèi)容，如下所示伸辟。

{
  "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"
  }
}

模擬器預(yù)覽效果如下圖：

img

在list的值中麻惶，我們配置了2個(gè)卡頁(yè)，text是卡頁(yè)的文字信夫，pathPath代表了頁(yè)面路徑窃蹋，當(dāng)點(diǎn)擊卡頁(yè)時(shí)卡啰，將跳轉(zhuǎn)到指定路徑的頁(yè)面。注意卡頁(yè)數(shù)必須為2-5個(gè)才合規(guī)警没，否則控制臺(tái)會(huì)報(bào)錯(cuò)匈辱。并且，這里的路徑必須被包含在頂端的pages值中杀迹，因?yàn)樗锌傻诌_(dá)頁(yè)面都必須在pages中配置路徑亡脸。

紅色箭頭指向處有一條水平灰色線，這是卡頁(yè)和內(nèi)容頁(yè)的分界線树酪，由borderStyle屬性控制浅碾，其值默認(rèn)為black，目前暫時(shí)只有black和white值可選嗅回。

selectedColor表示卡頁(yè)選中時(shí)及穗，其文字的顏色，用十六進(jìn)制表示绵载。另外卡頁(yè)背景色也可配置。

選項(xiàng)卡可以含有圖標(biāo)苛白，配置方法如下：

{
    "pagePath": "pages/movies/index",
    "text": "電影",
    "iconPath": "images/tabbar/movie.png",
    "selectedIconPath": "images/tabbar/movieSelected.png"
}

img

img

一個(gè)為默認(rèn)圖標(biāo)娃豹，一個(gè)是選中時(shí)顯示的圖標(biāo)。（請(qǐng)看圖標(biāo)路徑购裙，我在左側(cè)目錄樹的根目錄新建了images/tabbar目錄懂版，并放入了4張圖標(biāo)，圖標(biāo)資源在Github源碼中有）

這樣躏率，首頁(yè)Tab便完成了躯畴。接下來(lái)我們來(lái)分析頁(yè)面結(jié)構(gòu)，并實(shí)現(xiàn)一些公用的template模板文件薇芝。

分析開發(fā)需求

作為編碼者阻桅，在開始編碼之前浊闪，我們要養(yǎng)成先從整體層面上分析整體需求的好習(xí)慣，有利于后續(xù)的代碼編寫及維護(hù)。

img

觀察首頁(yè)宏侍、更多頁(yè)和電影詳情頁(yè)，可以很容易地歸納出一些可以共用的頁(yè)面元素：1.首頁(yè)由三大塊組成爱榔，正在熱映挟伙、即將上映和排行榜區(qū)塊除了數(shù)據(jù)不同，頁(yè)面結(jié)構(gòu)是相同的（即紅色框荐开，后文我用block區(qū)塊模板代指這塊）付翁；2.每個(gè)block模板中含有若干個(gè)海報(bào)模板，由電影海報(bào)晃听、電影名稱和評(píng)分條百侧、評(píng)分?jǐn)?shù)組成（藍(lán)色框着帽，后文稱poster海報(bào)模板）；3.每個(gè)評(píng)分條是由5顆星星組成的（粉紅框移层，后文稱ratingbar評(píng)分條模板）仍翰。

評(píng)分條模板

模板頁(yè)面（template）是官方提供的一種實(shí)現(xiàn)頁(yè)面元素復(fù)用、減少重復(fù)工作的良好實(shí)現(xiàn)形式观话。

從上面的分析中予借，我們發(fā)現(xiàn)這里提到的三個(gè)模板是層層嵌套的，因此频蛔，作為入門學(xué)習(xí)者灵迫，我們先從最內(nèi)層的模板開始實(shí)現(xiàn)，即先實(shí)現(xiàn)評(píng)分條ratingbar模板文件晦溪。

img

評(píng)分星星有三種狀態(tài)瀑粥，我們?cè)趇mages目錄中新建ratingbar目錄，并將這三個(gè)星星圖標(biāo)放入三圆。（Github源碼中含有本文所需的所有素材）

img

在movies目錄右鍵鼠標(biāo)狞换，依次新建名為ratingbar的目錄和Page。打開app.json文件舟肉，我們發(fā)現(xiàn)開發(fā)者工具自動(dòng)在pages值為我們配置了ratingbar頁(yè)面的路徑修噪。

img

作為模板文件，是在其它頁(yè)面中導(dǎo)入使用的路媚，它不會(huì)單獨(dú)被使用黄琼，因此其實(shí)它不需要在app.json的pages值中配置路徑，并且該頁(yè)面只需wxml和wxss即可整慎，js和json文件都是用不上的脏款，它所含的頁(yè)面元素的數(shù)據(jù)和行為都是由引用它的頁(yè)面來(lái)操縱的，后文會(huì)對(duì)此有所涉及裤园。

但在此時(shí)撤师，我們需要在模擬器中調(diào)試、查看其效果比然，所以要將它當(dāng)作單獨(dú)頁(yè)面來(lái)使用一次丈氓，調(diào)試完后可將js/json文件刪除，并刪除在app.json中pages值中的路徑强法，此是后話万俗，暫且略過(guò)。

我們?cè)赼pp.json中將ratingbar頁(yè)面路徑移到pages值的首位（見(jiàn)上圖）饮怯，保存后發(fā)現(xiàn)模擬器的首頁(yè)變成了ratingbar頁(yè)面闰歪。

img

頁(yè)面上唯一的一條內(nèi)容是由開發(fā)者工具在新建頁(yè)面時(shí)自動(dòng)生成的。我們打開ratingbar.wxml頁(yè)面蓖墅，將自動(dòng)生成的標(biāo)簽內(nèi)容刪除库倘，并輸入以下內(nèi)容临扮，按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> 

可以視為官方提供的一種容器，需要成對(duì)出現(xiàn)的教翩，在這里它內(nèi)部含有5個(gè)image組件杆勇。class表示其樣式，它將會(huì)去同頁(yè)面的wxss文件中查找并渲染值為.ratingbar-stars的樣式（見(jiàn)下文）饱亿。image是圖像組件蚜退，有一個(gè)屬性src，表示要顯示的圖片的地址彪笼。像這類內(nèi)容不需要再包含其它控件的控件钻注，你也可以寫成單閉合標(biāo)簽的形式。

這里src的路徑出現(xiàn)了2種寫法配猫，絕對(duì)路徑和相對(duì)路徑幅恋，如果不了解的可另外拓展一下，這里的路徑是一樣的泵肄。

再點(diǎn)開ratingbar.wxss文件捆交，并輸入以下內(nèi)容：

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

這里的首個(gè).ratingbar-stars樣式（請(qǐng)注意樣式名前面有個(gè)小點(diǎn)號(hào)“.”），與的class相呼應(yīng)凡伊，將會(huì)用于渲染該控件零渐。

這里采用了CSS中著名的flex彈性盒子模型，flex-direction:row;意味著其內(nèi)部控件將采用水平橫向的方式排列系忙，要表示豎直排列可將值改為column。

第二個(gè).ratingbar-stars image樣式（請(qǐng)注意中間有空格惠豺，且image前面沒(méi)有點(diǎn)號(hào)）银还，表示渲染class='ratingbar-stars'的控件內(nèi)部包含的image控件，這里表示了高h(yuǎn)eight洁墙、寬width蛹疯、距離頂部的內(nèi)邊距padding-top、距離右側(cè)的內(nèi)邊距padding-right热监。CSS的更多屬性知識(shí)歡迎另行拓展捺弦，這是一個(gè)多記多練才能生巧的知識(shí)。

rpx長(zhǎng)度單位

rpx是微信小程序推出的單位孝扛，可以根據(jù)不同手機(jī)不同的屏幕寬度進(jìn)行內(nèi)容自適應(yīng)列吼，使頁(yè)面元素在不同屏幕寬度的手機(jī)上看起來(lái)具有一致性。

無(wú)論手機(jī)屏幕實(shí)際寬度是多少苦始，小程序都會(huì)在底層將屏幕寬度換算成750份寞钥，如果設(shè)計(jì)師以iphone6的750*1334（物理像素）為標(biāo)準(zhǔn)出設(shè)計(jì)稿的話，1rpx=0.5px=1物理像素陌选，你可以直接使用設(shè)計(jì)師標(biāo)注的參數(shù)加上rpx即可理郑。

上面的width:17rpx表示無(wú)論在什么樣的移動(dòng)設(shè)備上蹄溉，其大小都為750份中的17份，寬屏則顯示大一些您炉，窄屏則顯示小一些柒爵，視覺(jué)效果一致。

按Ctrl+S鍵保存現(xiàn)有代碼赚爵，模擬器即時(shí)顯示出了目前的頁(yè)面效果：3顆黃星棉胀、1顆半星、1顆灰星囱晴。

img

在wxml文件中膏蚓，我們?cè)趦?nèi)寫了5個(gè)靜態(tài)的image圖像控件。然而在實(shí)際場(chǎng)景中畸写，這個(gè)不可能是寫死的驮瞧，而應(yīng)該是根據(jù)電影的不同評(píng)分進(jìn)行相應(yīng)的顯示。

動(dòng)態(tài)數(shù)據(jù)涉及到一些數(shù)據(jù)綁定等相關(guān)的知識(shí)枯芬，這里先簡(jiǎn)要介紹一下论笔。

數(shù)據(jù)綁定

{{}}

WXML 中的動(dòng)態(tài)數(shù)據(jù)均來(lái)自對(duì)應(yīng) Page 的 data，數(shù)據(jù)綁定使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)千所，如：

<view wx:for="{{count}}">
  <text>{{stars}}</text>
</view>

頁(yè)面渲染時(shí)狂魔，系統(tǒng)將去對(duì)應(yīng)頁(yè)面的js文件的data屬性中尋找count和stars變量。

條件渲染

wx:if

在框架中淫痰，使用 wx:if="{{條件語(yǔ)句}}" 來(lái)判斷是否需要渲染該代碼塊：

<image wx:if="{{stars>30}}" src='/images/ratingbar/star_fill_whole.png' />

上條語(yǔ)句表示當(dāng)滿足stars>30的條件時(shí)最楷，渲染image控件。

除了if條件外待错，還有wx:elif 和 wx:else語(yǔ)句：

<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 有且只有一個(gè)籽孙；

wx:elif 是else if的意思，可以有多個(gè)火俄；

wx:else 最多只有一個(gè)犯建。

系統(tǒng)按順序判斷各個(gè)條件，遇到成立的條件時(shí)則渲染該控件瓜客，其余控件則不會(huì)渲染适瓦。

注意：內(nèi)部的條件語(yǔ)句的結(jié)果為{{false}}才表示條件不成立，不帶{{}}的值將會(huì)被視為文本從而判定為條件成立谱仪。

<view wx:if="{{false}}"/>   <!--條件不成立-->
<view wx:if="false"/>  <!--條件成立-->
<view wx:if="3"/>  <!--條件成立-->

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個(gè)數(shù)組玻熙，即可使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。數(shù)組長(zhǎng)度為多少芽卿，就會(huì)重復(fù)渲染多少次揭芍。

<block wx:for="{{count}}">
    <text>{{index}}:{{item}}</text>
</block>

在循環(huán)時(shí)，當(dāng)前項(xiàng)的變量名默認(rèn)為 item卸例，其下標(biāo)變量名默認(rèn)為 index称杨。

<block wx:for="{{count1}}">
  <block wx:for="{{count2}}">
    <text>{{index}}:{{item}}</text>
  </block>
</block>

如果遇到這種多重循環(huán)呢肌毅，如何在內(nèi)部表示不同數(shù)組的當(dāng)前項(xiàng)和下標(biāo)呢？

可以用wx:for-item和wx:for-index分別指定當(dāng)前項(xiàng)的變量名和下標(biāo)的變量名：

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

數(shù)據(jù)綁定相關(guān)的知識(shí)大致了解了姑原，我們打開ratingbar.js悬而，并在data內(nèi)定義兩個(gè)變量：

// pages/movies/ratingbar/ratingbar.js
Page({
  data: {
    count:[3,5,6,8,9],
    stars:16
  }
})

然后將ratingbar.wxml文件內(nèi)容修改為：

<!--pages/movies/ratingbar/ratingbar.wxml-->
<view class='ratingbar-stars'>
  <!--count數(shù)組長(zhǎng)度為5，共5次循環(huán)顯示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的值改為其它數(shù)（0-50之間）試試看星星的顯示效果吧笨奠。Tips：這里的條件語(yǔ)句是研究豆瓣電影API里電影評(píng)分的規(guī)律得來(lái)的。它的stars取值為0/5/10……40/45/50唤殴。

據(jù)我們之前對(duì)豆瓣評(píng)分小程序的分析般婆，評(píng)分條一般作為一個(gè)元素在相關(guān)頁(yè)面中顯示，不會(huì)獨(dú)立作為頁(yè)面來(lái)顯示朵逝。小程序官方提供了機(jī)制來(lái)解決這種復(fù)用性的問(wèn)題蔚袍，代碼片段一處編寫，多處使用配名，極大地精簡(jiǎn)了代碼的臃腫啤咽，也令程序員有更多精力專注于必要的地方。其結(jié)構(gòu)如下：

<template name="模板名稱">
  <!--這里是要復(fù)用的代碼片段-->
</template>

我們將剛才編寫的ratingbar.wxml代碼最外層加上模板標(biāo)識(shí)：

<!--pages/movies/ratingbar/ratingbar.wxml-->
<template name="template-ratingbar-stars">
  <view class='ratingbar-stars'>
    <!--數(shù)組長(zhǎng)度為5渠脉，共5次循環(huán)顯示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宇整，在其它頁(yè)面引入本模板后，根據(jù)該名稱即可找到此模板芋膘。因?yàn)樵u(píng)分條有且只有5顆星星鳞青，所以這里將count的值直接寫在此處wx:for="{{[3,5,6,8,9]}}"，然后我們把ratingbar.js中的相關(guān)值注釋掉：

Page({
  data: {
    // count:[3,5,6,8,9],
    // stars:16
  }
})

因?yàn)樽鳛槟０逦螅瑢⒃诙嗵幷{(diào)用盼玄，其所使用的值（如這里的stars）將由調(diào)用的地方傳入，也正因?yàn)檫@樣潜腻，才有復(fù)用性可言。其實(shí)器仗，模板文件只有wxml和wxss有用融涣，js和json文件刪除亦可。

電影海報(bào)模板

接下來(lái)精钮，我們來(lái)編寫電影海報(bào)威鹿，就是藍(lán)框這個(gè)：

img

我們可以參照編寫評(píng)分條模板的步驟，先將其當(dāng)作為一個(gè)頁(yè)面臂容，配置在小程序的首頁(yè)科雳，在js中模擬數(shù)據(jù)根蟹，調(diào)試成功后，再改成模板頁(yè)面糟秘。

首先简逮，在movies目錄下新建poster目錄和poster頁(yè)面，在app.json的pages屬性中尿赚，將poster頁(yè)面路徑放在首位（ratingbar路徑可以刪除）散庶，以便在模擬器中查看效果和調(diào)試。

{
  "pages": [
    "pages/movies/poster/poster",
    "pages/movies/ratingbar/ratingbar",
    "pages/movies/index",
    "pages/mine/mine"
  ],
   ……
}

在poster.js中寫入一些模擬數(shù)據(jù)：

// 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"
    }
  }
})

我們將在頁(yè)面中通過(guò)綁定數(shù)據(jù)來(lái)獲取這些數(shù)據(jù)凌净，如電影名稱{{title}}悲龟、海報(bào)圖片{{images.large}}、電影評(píng)分{{rating.average}}等冰寻。

在poster.wxss中寫入：

/* 導(dǎo)入評(píng)分條模板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;
}

模板的使用

這里用到了評(píng)分條模板，因此在開頭導(dǎo)入了評(píng)分條模板的wxss樣式性雄。每個(gè).樣式都對(duì)應(yīng)著下文相關(guān)控件的class没卸。

在poster.wxml中寫入：

<!--導(dǎo)入評(píng)分條模板wxml文件，注意別少了后面的 / 符號(hào)-->
<import src="../ratingbar/ratingbar.wxml" />

<view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'>
  <!--海報(bào)圖-->
  <image class="poster" src='{{images.large}}'></image>
  <!--電影名稱-->
  <text class='movie-name'>{{title}}</text>
  <!--評(píng)分星星和數(shù)字-->
  <view class='ratingbar'>
    <!--評(píng)分條-->
    <template is="template-ratingbar-stars" data="{{...rating}}" />
    <!--評(píng)分分?jǐn)?shù)-->
    <text class='ratingbar-score'>{{rating.average}}</text>
  </view>
</view>

同理秒旋，開頭也導(dǎo)入了評(píng)分條模板的wxml文件约计，并通過(guò)以下方式使用。

<!--評(píng)分條-->
<template is="template-ratingbar-stars" data="{{...rating}}" />

is屬性值正是評(píng)分條模板的name名稱迁筛，data值將相關(guān)數(shù)據(jù)傳入評(píng)分條模板煤蚌。

poster.js的data屬性中含有rating數(shù)據(jù)，其格式見(jiàn)下文细卧。上文中的...rating即是將rating數(shù)據(jù)散開尉桩，將其內(nèi)容傳入評(píng)分條模板，評(píng)分條模板里可以直接使用{{stars}}贪庙，而不需要通過(guò){{rating.stars}}的方式蜘犁。

rating: {
      average: 8.6,
      max: 10,
      min: 0,
      stars: "45"
    }

這里還出現(xiàn)了諸如下文的屬性名，我們將留到后面講解止邮。

<view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'>

現(xiàn)在这橙，將poster.js的data屬性中的模擬數(shù)據(jù)注釋或刪除掉，并將poster.wxml封裝成模版导披，如下文所示屈扎。

<!--導(dǎo)入評(píng)分條模板wxml文件，注意別少了后面的 / 符號(hào)-->
<import src="../ratingbar/ratingbar.wxml" />

<!--封裝成名稱為template-poster的模板-->
<template name="template-poster">
  <view class='movie' catchtap='catchTapMovie' data-movieid='{{id}}'>
    <!--海報(bào)圖-->
    <image class="poster" src='{{images.large}}'></image>
    <!--電影名稱-->
    <text class='movie-name'>{{title}}</text>
    <!--評(píng)分星星和數(shù)字-->
    <view class='ratingbar'>
      <!--評(píng)分條-->
      <template is="template-ratingbar-stars" data="{{...rating}}" />
      <!--評(píng)分分?jǐn)?shù)-->
      <text class='ratingbar-score'>{{rating.average}}</text>
    </view>
  </view>
</template>

區(qū)塊模板

有了電影海報(bào)模板后撩匕，接下來(lái)我們進(jìn)行下一步鹰晨。觀察到首頁(yè)是由三個(gè)結(jié)構(gòu)一模一樣的紅色區(qū)塊組成，顯然，這也可以是一個(gè)模板模蜡，暫且稱之為block吧漠趁。

img

步驟和先前個(gè)模板一樣，為節(jié)省篇幅哩牍，這里會(huì)更簡(jiǎn)略地以貼代碼為主棚潦。首頁(yè)在movies目錄下新建block目錄和頁(yè)面，并在app.json文件的pages中將block頁(yè)面的路徑移到首位膝昆，以便觀察模擬器效果丸边。

在images目錄新建block目錄，放入下面這張名為arrow-right.png的右箭頭圖片荚孵。

img

在block.js文件的data屬性中寫入模擬的數(shù)據(jù)（如下）妹窖，有兩個(gè)鍵值對(duì)，一為blockTitle區(qū)塊標(biāo)題收叶，一為blockMovies為區(qū)塊電影數(shù)據(jù)（與豆瓣API返回的格式一致骄呼，有刪減字段，但結(jié)構(gòu)不變）判没。

// 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": [
          "劇情",
          "音樂(lè)"
        ],
        "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歲的印度少女尹希婭（塞伊拉·沃西 飾）熱愛(ài)唱歌蜓萄，因父親阻撓，她只能蒙面拍攝并上傳自彈自唱原創(chuàng)歌曲的視頻澄峰，孰料憑借天籟歌喉在網(wǎng)上一炮而紅嫉沽，備受爭(zhēng)議的音樂(lè)人夏克提·庫(kù)馬爾（阿米爾·汗 飾）也向她拋出橄欖枝，尹希婭的生活發(fā)生了翻天覆地的變化……",
        "title": "神秘巨星 Secret Superstar",
        "warning": "數(shù)據(jù)來(lái)源于網(wǎng)絡(luò)整理俏竞，僅供學(xué)習(xí)绸硕，禁止他用。如有侵權(quán)請(qǐng)聯(lián)系公眾號(hào)：小樓昨夜又秋風(fēng)魂毁。我將及時(shí)刪除玻佩。",
        "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": [
          "中國(guó)大陸"
        ],
        "directors": [{
          "avatars": {
            "large": null
          },
          "name": "李芳芳"
        }],
        "genres": [
          "劇情",
          "愛(ài)情",
          "戰(zhàn)爭(zhēng)"
        ],
        "id": 265,
        "images": {
          "large": "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2507572275.jpg"
        },
        "original_title": "無(wú)問(wèn)西東",
        "rating": {
          "average": 7.5,
          "max": 10,
          "min": 0,
          "stars": "40"
        },
        "reviews_count": 4354,
        "summary": "如果提前了解了你所要面對(duì)的人生，你是否還會(huì)有勇氣前來(lái)席楚？吳嶺瀾咬崔、沈光耀、王敏佳烦秩、陳鵬刁赦、張果果，幾個(gè)年輕人滿懷諸多渴望闻镶，在四個(gè)非同凡響的時(shí)空中一路前行。\\n吳嶺瀾（陳楚生 飾）丸升，出發(fā)時(shí)意氣風(fēng)發(fā)铆农，卻很快在途中迷失了方向。沈光耀（王力宏 飾），自愿參與了最殘酷的戰(zhàn)爭(zhēng)墩剖，他一直在努力去做那些令他害怕猴凹，但重要的事。王敏佳（章子怡 飾）最初的錯(cuò)誤岭皂，只是為了虛榮撒了一個(gè)小謊郊霎；最初的煩惱，只是在兩個(gè)優(yōu)秀的男人中選擇一個(gè)爷绘。但命運(yùn)书劝，卻把她拖入被眾人唾罵的深淵。陳鵬（黃曉明 飾）把愛(ài)情擺在了理想前面土至，但愛(ài)情卻沒(méi)有把他擺在前面购对。他說(shuō)，“我有人要照顧”陶因，縱然這意味著與所有人作對(duì)骡苞，意味著要和她一起被放逐千里。張果果（張震 飾）楷扬，身處爾虞我詐的職場(chǎng)解幽，“贏”是他的習(xí)慣。為了贏烘苹，他總是見(jiàn)招拆招躲株，先發(fā)制人。而有一天螟加，他卻面臨了一個(gè)比“贏”更重要的選擇徘溢。這幾個(gè)年輕人，在最好的年紀(jì)迎來(lái)了最殘酷的...",
        "title": "無(wú)問(wèn)西東",
        "warning": "數(shù)據(jù)來(lái)源于網(wǎng)絡(luò)整理捆探，僅供學(xué)習(xí)然爆，禁止他用。如有侵權(quán)請(qǐng)聯(lián)系公眾號(hào)：小樓昨夜又秋風(fēng)黍图。我將及時(shí)刪除曾雕。",
        "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": [
          "美國(guó)"
        ],
        "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": "電影《奇跡男孩》改編自全球暢銷小說(shuō)《奇跡》，講述了一個(gè)溫暖千萬(wàn)家庭的成長(zhǎng)故事助被。10 歲的奧吉（雅各布·特倫布萊 Jacob Tremblay 飾）天生臉部畸形剖张，此前一直在家中和媽媽（朱莉婭·羅伯茨 Julia Roberts 飾）自學(xué)。當(dāng)他小學(xué)五年級(jí)時(shí)揩环，奧吉進(jìn)入父母為他精心挑選的學(xué)校上學(xué)搔弄。在這里，奧吉將與校長(zhǎng)丰滑、老師以及性格迥異的同學(xué)相處顾犹，他不尋常的外表讓他成為同學(xué)們討論的焦點(diǎn)，并終日受到嘲笑和排斥，就連好不容易交到的新朋友也似乎不太值得信任炫刷。幸運(yùn)的是擎宝，在成長(zhǎng)過(guò)程中，奧吉的父母浑玛、姐姐一直是他最堅(jiān)強(qiáng)的后盾绍申，在他們的支持與關(guān)愛(ài)下，奧吉憑借自身的勇氣顾彰、善良极阅、聰敏影響激勵(lì)了許多身邊的人，并收獲了友誼拘央、尊重與愛(ài)涂屁，最終成長(zhǎng)為大家心目中的不可思議的“奇跡”。",
        "title": "奇跡男孩 Wonder",
        "warning": "數(shù)據(jù)來(lái)源于網(wǎng)絡(luò)整理灰伟，僅供學(xué)習(xí)拆又，禁止他用。如有侵權(quán)請(qǐng)聯(lián)系公眾號(hào)：小樓昨夜又秋風(fēng)栏账。我將及時(shí)刪除帖族。",
        "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": [
          "中國(guó)大陸",
          "香港"
        ],
        "directors": [{
          "avatars": {
            "large": null
          },
          "name": "丁晟"
        }],
        "genres": [
          "劇情",
          "動(dòng)作"
        ],
        "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": "周凱（王凱 飾）參與走私，被身為緝毒警察的弟弟周超（馬天宇 飾）逮捕入獄挡爵。三年后竖般，周凱出獄，改過(guò)自新茶鹃。曾經(jīng)的手下阿倉(cāng)（余皚磊 飾）已為毒販頭目涣雕，為獲取周凱的海外客戶資料，設(shè)計(jì)加害周凱闭翩。江湖中的好兄弟馬柯（王大陸 飾）為了替周凱報(bào)仇挣郭，失去一條腿。自己的親弟弟周超不相信哥哥周凱已金盆洗手疗韵，不斷搜集證據(jù)兑障，欲親手逮捕周凱。最終蕉汪，周凱與警方合作流译，逮捕了阿倉(cāng)，兩兄弟重歸于好者疤。",
        "title": "英雄本色2018",
        "warning": "數(shù)據(jù)來(lái)源于網(wǎng)絡(luò)整理福澡，僅供學(xué)習(xí)，禁止他用驹马。如有侵權(quán)請(qǐng)聯(lián)系公眾號(hào)：小樓昨夜又秋風(fēng)竞漾。我將及時(shí)刪除眯搭。",
        "wish_count": 4552,
        "year": 2018
      }
      ]
    }
  }
})

在block.wxss文件中寫入以下數(shù)據(jù)：

/* pages/movies/block/block.wxss */

/* 導(dǎo)入電影海報(bào)模板的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-->

<!--導(dǎo)入電影海報(bào)模板-->
<import src="../poster/poster.wxml" />

<view>
  <!--區(qū)塊頂欄-->
  <view class='block-title-bar'>
    <!--類別標(biāo)題，如正在熱映-->
    <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>
  <!--電影海報(bào)展示條-->
  <scroll-view scroll-x="{{true}}" class='block-scroll-view'>
    <view class='block-movie-row'>
      <block wx:for="{{blockMovies.subjects}}" wx:for-item="poster">
        <!--單個(gè)電影海報(bào)-->
        <view class='block-movie-card'>
          <template is="template-poster" data="{{...poster}}" />
        </view>
      </block>
    </view>
  </scroll-view>
</view>

按Ctrl+S保存后业岁，模擬器效果如下。第一個(gè)出現(xiàn)了電影名稱過(guò)長(zhǎng)的情形寇蚊，我們后續(xù)會(huì)寫一個(gè)stringUtil.js的工具類來(lái)截?cái)唷?/p>

img

我們?cè)赽lock頁(yè)面導(dǎo)入了poster模板的wxml和wxss文件笔时，并通過(guò)下文代碼使用了。

<!--導(dǎo)入電影海報(bào)模板-->
<import src="../poster/poster.wxml" />
……
<!--電影海報(bào)展示條-->
<scroll-view scroll-x="{{true}}" class='block-scroll-view'>
    <view class='block-movie-row'>
      <block wx:for="{{blockMovies.subjects}}" wx:for-item="poster">
        <!--單個(gè)電影海報(bào)-->
        <view class='block-movie-card'>
          <template is="template-poster" data="{{...poster}}" />
        </view>
      </block>
    </view>
  </scroll-view>
 ……

這里使用了一個(gè)新的控件滑動(dòng)條仗岸，有scroll-x和scroll-y屬性允耿，用以設(shè)定滑動(dòng)的方向是水平還是豎直。

在滑動(dòng)條內(nèi)部，通過(guò)wx:for循環(huán)取出blockMovies.subjects的值，用poster表示當(dāng)前項(xiàng)俯邓。

電影海報(bào)通過(guò)海報(bào)模板導(dǎo)入骡楼，通過(guò){{...poster}}的形式散開poster的值傳入海報(bào)模板中，為海報(bào)模板中的同名變量提供對(duì)應(yīng)的值稽鞭。

<!--類別標(biāo)題鸟整，如正在熱映-->
<text class='block-title'>{{blockTitle}}</text>
<view class='block-more' catchtap='catchMore' data-title='{{blockTitle}}'>

在上文中又出現(xiàn)了catchtap和data-形式的屬性名，這是界面上“更多”按鈕的點(diǎn)擊事件和自定義屬性，后文詳細(xì)講解吩抓。

最后將block.js中data里的相關(guān)數(shù)據(jù)注釋或刪除涉茧，并在block.wxml里封裝模板。

<!--導(dǎo)入電影海報(bào)模板-->
<import src="../poster/poster.wxml" />

<!--封裝成區(qū)塊模板-->
<template name="template-block">
    <view>
      ……
    </view>
</template>

別忘了在app.json文件的data屬性中將主頁(yè)的路徑“pages/movies/index”提到首位蚓胸，我們即將要編寫主頁(yè)了挣饥。

到目前為止，我們所需要的三個(gè)模板已經(jīng)全部封裝完了沛膳。

block模板里導(dǎo)入了poster模板扔枫，后者又嵌入了ratingbar模板，極大的精簡(jiǎn)了相關(guān)的代碼锹安，加強(qiáng)了代碼的易維護(hù)性短荐。不信倚舀？看主頁(yè)，我們只需寥寥數(shù)行代碼即可忍宋。

下篇：https://mp.weixin.qq.com/s/Isfk9s2cgtyXdh5Olap9QA

image