豆瓣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}}
阅读更多
文章标签: 豆瓣获取电影信息
个人分类: 前端学习 小程序
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

豆瓣API获取数据,sarts组件,更改“正在上映”

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭