无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

Menu
小程序資訊
小程序資訊
zhi_chao:小程序進(jìn)階實戰(zhàn)進(jìn)階:豆瓣電影demoJS邏輯篇
時間:2016-10-20 11:08:00

雙大括號是{{}}用來JSwxml綁定事件的,比如,數(shù)據(jù)更新,顯示規(guī)則,等等的一些有規(guī)則有章法的操作。

那么我們就需要引用這種機制,為我們的imagetext控件做數(shù)據(jù)更新的操作。

很好知道這點,后面的事情都交給JS去完成。

現(xiàn)在開始,分析步驟,(前面三步為一體,第四步則分出來講。)

1、

首先要有一個函數(shù)用來向網(wǎng)絡(luò)發(fā)送請求這一步看官方文檔發(fā)送請求

2、

關(guān)注文檔中的三個關(guān)鍵字,url、header、success,

url,就不多說了網(wǎng)絡(luò)請求,不了解的必須先了解一下

header,不熟悉HTTP協(xié)議的朋友,在看到文檔中這個屬性時一定會迷惑看的云里霧里的,他是將網(wǎng)頁中的內(nèi)容進(jìn)行解析比如文檔中的 header 方法中的代碼:'Content-Type':'application/json' 是把內(nèi)容解析為json格式的,如果把它換成'Content-Type':'application/xml' 那么它就會將網(wǎng)頁的內(nèi)容解析為xml格式的,現(xiàn)在你應(yīng)該明白了,json是微信自己指定的文件格式,我們按照它的寫法就可以了,so等會直接復(fù)制過來使用。

success,讀取數(shù)數(shù)據(jù)用的函數(shù)、(看文檔時看他的類型Function)

3、(這一步的操作對后面的理解有些許幫助)

豆瓣電影API 我們分別要使用到他的 , 正在熱映 ,Top250 , 電影搜索,三個接口。

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)容粘貼在等號后面,回車,然后輸入 a 回車,現(xiàn)在此頁面的內(nèi)容就有條理了。

4

有了以上步驟思路,最后要想到,數(shù)據(jù)的讀取,以及數(shù)據(jù)格式處理(這里的格式化與header不同,我們是將數(shù)據(jù)格式化編排給用戶看的)。

so:我們需要兩個函數(shù),一個用來循環(huán)遍歷讀取網(wǎng)絡(luò)數(shù)據(jù),另一個則把數(shù)據(jù)格式化。由于這兩個函數(shù)的也可以為后面top250的頁面使用,所以我使用封裝把他們倆封裝起來供后面的邏輯使用。

5、

把數(shù)據(jù)在wxml中進(jìn)行關(guān)聯(lián)。


有了這四步的思路,我們開始看JS代碼的實現(xiàn)。(我怕你已經(jīng)暈了!別急有了前面的步驟做鋪墊我想你看起代碼來會更得心應(yīng)手。)

由于前三步相對簡單所以先從第四步的兩個函數(shù)開始說 :

在Utils中創(chuàng)建subjectUtills.js (文件名不是固定的。)

 

 

接下來在 寫第一個循環(huán)獲取數(shù)據(jù)的函數(shù)。

 

 

現(xiàn)在來寫數(shù)據(jù)格式的函數(shù),由于代碼有點多就想著給你節(jié)約點時間下面給出可復(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;

}

模塊化(封裝) 最后不要忘記封裝

 

完成了這兩個函數(shù),現(xiàn)在我們來寫網(wǎng)絡(luò)請求的邏輯代碼

 

第五步,完成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ù)。

使用第三步的操作 你會得到這樣的頁面,看了之后你應(yīng)該就不明覺厲了,

 

首頁差不多就寫好了現(xiàn)在看一下效果怎么樣。

 

寫到這里一個展示區(qū)差不多就寫好了,后面還要繼續(xù)深入。

咨詢
微信掃碼咨詢
電話咨詢
400-888-9358