微信小程序获取数据、处理数据、绑定数据关键步骤记录
onload:function(event){ var inTheatersUrl ="https://api.douban.com"+"/v2/movie/in_theaters"+"?start=0&count=3"; this.getlistData(inTheatersUrl,inTheaters); this.getlistData(inTheatersUrl,comingsoon); this.getlistData(inTheatersUrl,top250); }
//请求数据函数 把信息绑定到上面onload里。 getListData:function(url,settedKey){ var that = this; wx.request({ url:url, method:"GET", header:{"Content-Type":"json"}, success:function(res){ console.log(res.data);//打印是否获取到信息 that.processData(res.data,settedKey); }//res.data作为参数传递 fail:function(error){console.log(error)} }); }
//数据处理 绑定数据
processData: function (movies,settedKey) { var movies = [];// for (var idx in movies.subjects) { var subject = moviesDouban.subjects[idx]; var title = subject.title; if (title.length >= 6) { title = title.substring(0, 6) + "..."; } // [1,1,1,1,1] [1,1,1,0,0] var temp = { stars: util.convertToStarsArray(subject.rating.stars), 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: movies//加入key之后就不能用movies了 ); }
把movies绑定到xml页面中 绑定的时候,页面自上而下绑定
在list-template
<block wx:for="{{movies}}" wx:for-item="movie"> //循环,传入movies <template is="movieTemplate" data="{{...movie}}"/> </block>
下一级页面就可以直接动态绑定 用{{ }}绑定就可以了
但是如果是异步加载,怎么确定对应的数据就是自己要加载的数据呢?
首先定义几个要用的变量,作为区分叫做key//(这个地方还不是完全明白,先记住,以后懂了再来补)
data:{ inTheaters: {}, comingSoon: {}, top250: {}, }
把这些key,传递到上面对应的函数中。
这样就可以用key对xml绑定data
movies页面
<template is="movieListTemplate" data="{{...inTheaters}}" /> <template is="movieListTemplate" data="{{...comingSoon}}"/> <template is="movieGridTemplate" data="{{...searchResult}}"/>
上面知识点:定义movies空数组
1、数组对象的作用:使用单独的变量名来存储一系列的值。
2、创建数组:创建数组为其赋值,然后输出这些值。
var mycars = new Array(); mycars[0] ="a"; mycars[1]="b"; mycars[2]="c"; for(i=0;i<mycars.length;i++){ document.write(mycars[i]+"<br/>"); }
//a b c
3、For...In声明:用来循环输出数组中的元素
var x; var mycars = new Array(); mycars[0]="a"; mycars[1]="b"; mycars[2]="c"; for(x in mycars){ document.write(mycars[x]+"<br/>"); } //a b c