豆瓣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}}