服務項目
品牌網站建設

數字營銷

係統平台開發

數字產品

安全運維

Menu
官网开云
官网开云
zhi_chao:小程序進階實戰進階:豆瓣電影demoJS邏輯篇
時間:2016-10-20 11:08:00

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

那麽(me) 我們(men) 就需要引用這種機製,為(wei) 我們(men) 的imagetext控件做數據更新的操作。

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

現在開始,分析步驟,(前麵三步為(wei) 一體(ti) ,第四步則分出來講。)

1

首先要有一個(ge) 函數用來向網絡發送請求這一步看官方文檔發送請求

2

關(guan) 注文檔中的三個(ge) 關(guan) 鍵字,url、header、success,

url,就不多說了網絡請求,不了解的必須先了解一下

header,不熟悉HTTP協議的朋友,在看到文檔中這個(ge) 屬性時一定會(hui) 迷惑看的雲(yun) 裏霧裏的,他是將網頁中的內(nei) 容進行解析比如文檔中的 header 方法中的代碼:'Content-Type':'application/json' 是把內(nei) 容解析為(wei) json格式的,如果把它換成'Content-Type':'application/xml' 那麽(me) 它就會(hui) 將網頁的內(nei) 容解析為(wei) xml格式的,現在你應該明白了,json是微信自己指定的文件格式,我們(men) 按照它的寫(xie) 法就可以了,so等會(hui) 直接複製過來使用。

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

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

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

https://api.douban.com/v2/movie/in_theaters 查看接口 以正在熱映為(wei) 列 由於(yu) 此頁麵的內(nei) 容太複雜,我們(men) 可以做一些簡化

打開此鏈接,按F12出現調試框,將頁麵中的所有內(nei) 容複製,而後在調試框中輸入 var a = 將複製的內(nei) 容粘貼在等號後麵,回車,然後輸入 a 回車,現在此頁麵的內(nei) 容就有條理了。

4

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

so:我們(men) 需要兩(liang) 個(ge) 函數,一個(ge) 用來循環遍曆讀取網絡數據,另一個(ge) 則把數據格式化。由於(yu) 這兩(liang) 個(ge) 函數的也可以為(wei) 後麵top250的頁麵使用,所以我使用封裝把他們(men) 倆(lia) 封裝起來供後麵的邏輯使用。

5、

把數據在wxml中進行關(guan) 聯。


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

由於(yu) 前三步相對簡單所以先從(cong) 第四步的兩(liang) 個(ge) 函數開始說 :

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

 

 

接下來在 寫(xie) 第一個(ge) 循環獲取數據的函數。

 

 

現在來寫(xie) 數據格式的函數,由於(yu) 代碼有點多就想著給你節約點時間下麵給出可複製的文字。

// 獲取數據並格式

function provessSubject( subject ) {

//電影名

var title = subject.title;

//導演信息

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

}

//發行的年份

var year = subject.year;

//將數據格式化

var text = "名稱:" + title + "\n導演:" + directorStr + "\n演員:" + castStr + "\n類型:" + genreStr + "\n上映年份:" + year + "(中國大陸)"

//拿到格式化的數據

subject.text = text;

}

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

 

完成了這兩(liang) 個(ge) 函數,現在我們(men) 來寫(xie) 網絡請求的邏輯代碼

 

第五步,完成wxml中的數據關(guan) 聯。

注意 {{item.images.medium}} 這串代碼 和  {{item.text}} 後麵細講。這裏添加了block循環和loading組件。

 

講一下{{item.images.medium}} , 而 {{item.text}}應該不用多講就是我們(men) 格式化的數據。

使用第三步的操作 你會(hui) 得到這樣的頁麵,看了之後你應該就不明覺厲了,

 

首頁差不多就寫(xie) 好了現在看一下效果怎麽(me) 樣。

 

寫(xie) 到這裏一個(ge) 展示區差不多就寫(xie) 好了,後麵還要繼續深入。

Kaiyun体育官方全站入口服務SERVICE
谘詢
微信掃碼谘詢
電話谘詢
400-888-9358