### Restful API SOAP
RESTFUL API JSON
SOAP XML
### 调用豆瓣API
`movies.js`
~~~javascript
onLoad: function (options) {
wx.request({
url:'http://t.yushu.im/v2/movie/top250' ,
method:"GET",
success:function(res){
console.log(res);
},
fail:function(error){
console.log(error);
},
})
},
~~~
### 微调`movies.wxml`
~~~html
<import src="movie-list/movie-list-template.wxml" />
<view class="container">
<view class="movies-template">
<template is="movieListTemplate" />
</view>
<view class="movies-template">
<template is="movieListTemplate" />
</view>
<view class="movies-template">
<template is="movieListTemplate" />
</view>
</view>
~~~
~~~css
.container{
background-color: #f2f2f2;
}
.movies-template{
margin-bottom: 30rpx;
}
~~~
### 尝试调用豆瓣接口
~~~javascript
App({
globalData:{
g_isPlayingMusic:false,
g_currentMusicPostId:null,
doubanBase:"http://t.yushu.im"
}
})
~~~
`movies.js`
~~~javascript
onLoad: function (options) {
var inTheatersUrl = app.globalData.doubanBase +"/v2/movie/in_theaters";
var comingSoonUrl = app.globalData.doubanBase + "/v2/movie/coming_soon";
var top250Url = app.globalData.doubanBase + "/v2/movie/top250";
this.getMovieListData(inTheatersUrl);
this.getMovieListData(comingSoonUrl);
this.getMovieListData(top250Url);
},
getMovieListData:function(url){
wx.request({
url: url,
method: "GET",
success: function (res) {
console.log(res);
},
fail: function (error) {
console.log(error);
},
});
},
~~~
### 将数据处理并放入数据绑定
~~~javascript
onLoad: function (options) {
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";
this.getMovieListData(inTheatersUrl);
this.getMovieListData(comingSoonUrl);
this.getMovieListData(top250Url);
},
getMovieListData:function(url){
var that = this;
wx.request({
url: url,
method: "GET",
success: function (res) {
console.log(res);
that.processDoubanData(res.data);
},
fail: function (error) {
console.log(error);
},
});
},
processDoubanData:function(moviesDouban){
var movies = [];
for(var idx in moviesDouban.subjects){
var subject = moviesDouban.subjects[ids];
var title = subjects.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);
}
this.setData({
movies:movies
})
},
~~~
### 数据绑定
`movies.wxml`
~~~html
<import src="movie-list/movie-list-template.wxml" />
<view class="container">
<view class="movies-template">
<template is="movieListTemplate" data="{{movies}}" />
</view>
<view class="movies-template">
<template is="movieListTemplate" data="{{movies}}"/>
</view>
<view class="movies-template">
<template is="movieListTemplate" data="{{movies}}"/>
</view>
</view>
~~~
`movie-list-template.wxml`
~~~html
<import src="../movie/movie-template.wxml" />
<template name="movieListTemplate">
<view class="movie-list-container">
<view class="movie-head">
<text class="slogan">正在热映</text>
<view class="more">
<text class="more-text">更多</text>
<image class="more-img" src="/images/icon/arrow-right.png"></image>
</view>
</view>
<view class="movies-container">
<block wx:for="{{movies}}" wx:for-item="movie">
<template is="movieTemplate" data="{{movie}}"/>
</block>
</view>
</view>
</template>
~~~
`movie-template.wxml`
~~~html
<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
<view class="movie-container">
<image class="movie-img" src="{{movie.coverageUrl}}"></image>
<text class="movie-title">{{movie.title}}</text>
<template is="starsTemplate" data="{{movie}}"/>
</view>
</template>
~~~
`stars-template.wxml`
~~~html
<template name="starsTemplate">
<view class="stars-container">
<view class="stars">
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
<image src="/images/icon/star.png"></image>
</view>
<text class="star-score">{{movie.average}}</text>
</view>
</template>
~~~
### 完善电影首页
~~~javascript
onLoad: function (options) {
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";
*** this.getMovieListData(inTheatersUrl,"inTheaters");
*** this.getMovieListData(comingSoonUrl,"comingSoon");
*** this.getMovieListData(top250Url,"top250");
},
*** getMovieListData:function(url,settedKey){
var that = this;
wx.request({
url: url,
method: "GET",
success: function (res) {
console.log(res);
*** that.processDoubanData(res.data,settedKey);
},
fail: function (error) {
console.log(error);
},
});
},
processDoubanData:function(moviesDouban,settedKey){
var movies = [];
for(var ids in moviesDouban.subjects){
var subject = moviesDouban.subjects[ids];
var title = subject.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);
}
*** var readyData = {};
readyData[settedKey] = {
*** movies:movies
};
this.setData(readyData);
},
~~~
`movies.wxml`
~~~html
<import src="movie-list/movie-list-template.wxml" />
<view class="container">
<view class="movies-template">
<template is="movieListTemplate" data="{{...inTheaters}}" />
</view>
<view class="movies-template">
<template is="movieListTemplate" data="{{...top250}}"/>
</view>
<view class="movies-template">
<template is="movieListTemplate" data="{{...comingSoon}}"/>
</view>
</view>
~~~
