【练习】豆瓣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}}