（Ctrl+s）保存編輯的內(nèi)容，不然調(diào)試不會(huì)出效果?。?！
從上一篇小程序進(jìn)階（1）豆瓣電影_布局搭建中我們知道了
雙大括號(hào)是{{}}用來JS和wxml綁定事件的，比如，數(shù)據(jù)更新，顯示規(guī)則，等等的一些有規(guī)則有章法的操作。
那么我們就需要引用這種機(jī)制，為我們的image和text控件做數(shù)據(jù)更新的操作。
很好知道這點(diǎn)，后面的事情都交給JS去完成。
現(xiàn)在開始，分析步驟，（前面三步為一體，第四步則分出來講。）
1、
首先要有一個(gè)函數(shù)用來向網(wǎng)絡(luò)發(fā)送請(qǐng)求這一步看官方文檔發(fā)送請(qǐng)求
2、
關(guān)注文檔中的三個(gè)關(guān)鍵字，url、header、success,
url，就不多說了網(wǎng)絡(luò)請(qǐng)求，不了解的必須先了解一下
header，不熟悉HTTP協(xié)議的朋友，在看到文檔中這個(gè)屬性時(shí)一定會(huì)迷惑看的云里霧里的，他是將網(wǎng)頁中的內(nèi)容進(jìn)行解析比如文檔中的 header 方法中的代碼：'Content-Type':'application/json' 是把內(nèi)容解析為json格式的，如果把它換成'Content-Type':'application/xml' 那么它就會(huì)將網(wǎng)頁的內(nèi)容解析為xml格式的，現(xiàn)在你應(yīng)該明白了，json是微信自己指定的文件格式，我們按照它的寫法就可以了，so等會(huì)直接復(fù)制過來使用。
success，讀取數(shù)數(shù)據(jù)用的函數(shù)、（看文檔時(shí)看他的類型Function）
3、（這一步的操作對(duì)后面的理解有些許幫助）
豆瓣電影API?我們分別要使用到他的 ，?正在熱映?，Top250?,?電影搜索，三個(gè)接口。
https://api.douban.com/v2/movie/in_theaters 查看接口 以正在熱映為列 由于此頁面的內(nèi)容太復(fù)雜，我們可以做一些簡化
打開此鏈接，按F12出現(xiàn)調(diào)試框，將頁面中的所有內(nèi)容復(fù)制，而后在調(diào)試框中輸入?var a = 將復(fù)制的內(nèi)容粘貼在等號(hào)后面，回車，然后輸入 a 回車，現(xiàn)在此頁面的內(nèi)容就有條理了。
4、
有了以上步驟思路，最后要想到，數(shù)據(jù)的讀取，以及數(shù)據(jù)格式處理（這里的格式化與header不同，我們是將數(shù)據(jù)格式化編排給用戶看的）。
so：我們需要兩個(gè)函數(shù)，一個(gè)用來循環(huán)遍歷讀取網(wǎng)絡(luò)數(shù)據(jù)，另一個(gè)則把數(shù)據(jù)格式化。由于這兩個(gè)函數(shù)的也可以為后面top250的頁面使用，所以我使用封裝把他們倆封裝起來供后面的邏輯使用。
5、
把數(shù)據(jù)在wxml中進(jìn)行關(guān)聯(lián)。
有了這四步的思路，我們開始看JS代碼的實(shí)現(xiàn)。（我怕你已經(jīng)暈了！別急有了前面的步驟做鋪墊我想你看起代碼來會(huì)更得心應(yīng)手。）
由于前三步相對(duì)簡單所以先從第四步的兩個(gè)函數(shù)開始說 ：
在Utils中創(chuàng)建subjectUtills.js (文件名不是固定的。)
接下來在 寫第一個(gè)循環(huán)獲取數(shù)據(jù)的函數(shù)。
現(xiàn)在來寫數(shù)據(jù)格式的函數(shù)，由于代碼有點(diǎn)多就想著給你節(jié)約點(diǎn)時(shí)間下面給出可復(fù)制的文字。
// 獲取數(shù)據(jù)并格式
function provessSubject( subject ) {
//電影名
var title = subject.title;
//導(dǎo)演信息
var directors = subject.directors;
var directorStr = "";
for( var index in directors ) {
directorStr = directorStr + directors[ index ].name + " / ";
}
if( directorStr != "" ) {
directorStr = directorStr.substring( 0, directorStr.length - 2 );
}
//演員信息
var casts = subject.casts;
var castStr = "";
for( var index in casts ) {
castStr = castStr + casts[ index ].name + " / ";
}
if( castStr != "" ) {
castStr = castStr.substring( 0, castStr.length - 2 );
}
//類型信息
var genres = subject.genres;
var genreStr = "";
for( var index in genres ) {
genreStr = genreStr + genres[ index ] + " / ";
}
if( genreStr != "" ) {
genreStr = genreStr.substring( 0, genreStr.length - 2 );
}
//發(fā)行的年份
var year = subject.year;
//將數(shù)據(jù)格式化
var text = "名稱：" + title + "\n導(dǎo)演:" + directorStr + "\n演員:" + castStr + "\n類型:" + genreStr + "\n上映年份:" + year + "(中國大陸)"
//拿到格式化的數(shù)據(jù)
subject.text = text;
}
模塊化（封裝）?最后不要忘記封裝
完成了這兩個(gè)函數(shù)，現(xiàn)在我們來寫網(wǎng)絡(luò)請(qǐng)求的邏輯代碼
第五步，完成wxml中的數(shù)據(jù)關(guān)聯(lián)。
注意 {{item.images.medium}} 這串代碼 和 ?{{item.text}} 后面細(xì)講。這里添加了block循環(huán)和loading組件。
講一下{{item.images.medium}} ， 而?{{item.text}}應(yīng)該不用多講就是我們格式化的數(shù)據(jù)。
使用第三步的操作 你會(huì)得到這樣的頁面，看了之后你應(yīng)該就不明覺厲了，
首頁差不多就寫好了現(xiàn)在看一下效果怎么樣。
寫到這里一個(gè)展示區(qū)差不多就寫好了，后面還要繼續(xù)深入。
