【練習】豆瓣API獲取資料，sarts元件，更改“正在上映”

豆瓣API:https://developers.douban.com/wiki/?title=api_v2

要找以下連結：Resources URI

 

/v2/movie/top250

豆瓣原本字首："https://api.douban.com"失效，字首改為："http://t.yushu.im"

1.在app.js中儲存全域性變數url字首：

App({

globalData:{

doubanBase:"http://t.yushu.im"

}

})

 

2.在movie.js中引入全域性變數：var app = getApp();

3.訪問豆瓣API，找到想要獲取的資料的API（Resources URI）

在movie.js中的onLoad函式中定義url，方面後面獲取url中的資料

 

onLoad: function (event) {

var inTheatersUrl = app.globalData.doubanBase+"/v2/movie/in_theaters"+"?start=0&count=3";

var comingSoonUrl = app.globalData.doubanBase + "/v2/movie/coming_soon" + "?start=0&count=3";

var top250Url = app.globalData.doubanBase + "/v2/movie/top250" + "?start=0&count=3";

 

獲取3條資料

4.呼叫封裝的函式，此函式中包含從伺服器（API）載入資料的方法

this.getMovieLIstData(inTheatersUrl,"inTheaters");

this.getMovieLIstData(comingSoonUrl,"comingSoon");

this.getMovieLIstData(top250Url,"top250");

},

getMovieLIstData:function(url,settedKey){

var that=this;

wx.request({ 自帶的請求API的函式

url: url, 要訪問的API地址

     data:{}, 提交資料才會用到

method:"GET", "GET":獲取,"POST"和"PUT":提交,"DELETE":刪除,"OPTIONS":跨域

header: { "Content-Type":""}, （或者"Content-Type":"Application/xml"）

success:function(res){

 

5.在success函式中，將從API獲取的資料進行資料繫結到data中，可以列印res從中找到想要的資料

 

success:function(res){

that.processDoubanData(res.data, settedKey);

// console.log(res);

}

6.封裝處理資料的函式

 

processDoubanData: function (moviesDouban, settedKey){

var movies=[]; 用來儲存資料

for (var i in moviesDouban.subjects) {

// console.log(moviesDouban); 可以列印moviesDouban找想要的資料

var subject = moviesDouban.subjects[i];

var title = subject.original_title;

if(title.length>=6){ 標題名太長進行擷取

title=title.substring(0,6)+"...";

}

var temp = {

title: title,

average: subject.rating.average,

coverageUrl: subject.images.large,

movieId: subject.id

}

movies.push(temp); 把每一次的temp存入movies

}

var readyData={};

readyData[settedKey]={movies:movies};

console.log(readyData[settedKey]); 呼叫三次函式。這個只是迴圈了三部電影后的一次呼叫的到的資料

this.setData(readyData);

}

在data中要事先定義key,否則會報錯

data:{

"inTheaters":{},

"comingSoon":{},

"top250":{}

}

this.getMovieLIstData(top250Url,"top250"); 呼叫時將key傳入函式中

readyData[settedKey]對應的 key 中傳入對應的資料 ; {movies:movies}是因為movie-list-template.wxml中的<block>

7.在movie.wxml中

 

<view class="template">

<template is="movie-list-template" data="{{...inTheaters}}" />

</view>

<view class="template">

<template is="movie-list-template" data="{{...comingSoon}}" />

</view>

<view class="template">

<template is="movie-list-template" data="{{...top250}}" />

</view>

在之前的例子中，<block wx:for="{{資料名}}" wx:for-item="item">

<template data="{{item}}"> 名字跟隨wx:for-item

這個例子中沒有<block>，所以 <template data="{{資料名}}"> ...資料名代表展開

在movie-list-template.wxml中

 

<block wx:for="{{movies}}" wx:for-item="movie">

<template is="movie-picture-template" data="{{...movie}}" />

</block>

 

wx:for="{{movies}}"中的 movies就是{movies:movies}

 

替換需要資料繫結的地方

 

stars元件：

評分rating.stars:50 代表5顆星，把這個引數轉換成[1,1,1,1,1] ； 35轉換成[1,1,1,2,0]

在根目錄下建立公共函式目錄utils-util.js

 

function convertToStarsArray(stars){

var num=stars.toString().substring(0,1);

var array=[];

for(var i=1;i<=5;i++){

if(i<=num){

array.push(1);

}else{

array.push(0);

}

}

return array;

}

2.出口

module.exports={

convertToStarsArray: convertToStarsArray

}

3.引入

 

var util=require("../../utils/util.js");

資料繫結：

var temp = {

stars: subject.rating.stars,

4.傳入資料：

給template兩個資料<template is="stars-template" data="{{stars:stars,score:average}}" />

在stars-template.wxml中

<block wx:for="{{stars}}" wx:for-item="i">

<image class="stars-image" wx:if="{{i}}" src="/images/star.png"></image>

<image class="stars-image" wx:else src="/images/star-no.png"></image>

</block>

如果還有別的需要判斷：wx:elis="{{i==2}}"

 

更改“正在熱映”

給每個函式傳入一個引數categoryTitle

 

this.getMovieLIstData(inTheatersUrl,"inTheaters","正在熱映");

this.getMovieLIstData(comingSoonUrl,"comingSoon","即將上映");

this.getMovieLIstData(top250Url,"top250","top250");

readyData[settedKey]={

movies:movies,

categoryTitle: categoryTitle

};

資料繫結{{categoryTitle}}