微信小程序使用API接口开发图片壁纸小程序

Component({ data: { //接收精选大图的数据 cover:[], //接收月份数据 month:[], //接收热门数据 hot:[], //定义获取热门数据的请求参数集合 params:{ skip: 0, limit: 12 }, //数据的总条数 total:0, //定义图片链接的根路径 baseURL:"http://118.190.104.39:3000/" }, /** * 组件的方法列表 */ methods: { //获取精选大图的请求方法 getCover(){ wx.request({ //url里填写接口地址 url: 'http://118.190.104.39:3000/home/cover', //请求成功以后的回调函数，在这个方法里完成对数据的处理 //使用es6新语法，箭头函数来解决this指向性问题 success:(res)=>{ //console.log(res.data.data) //更新到data里去，方便页面实现数据绑定 this.setData({ cover:res.data.data }) } }) }, //获取月份数据 getMonth(){ wx.request({ url: 'http://118.190.104.39:3000/home/month', success:(res)=>{ //console.log(res.data.data) //拿到后台返回的数据对象 var my_month = res.data.data //获取后台返回的时间戳 var my_date = res.data.data.date //处理时间戳 var date = new Date(my_date) //使用getMonth() 方法可以获取日期对象里的月份数据，因为索引是从0开始的，所以要执行+1 var month = date.getMonth()+1 //使用getDate() 方法可以获取日期对象里的日期数据 var days = date.getDate() var date_msg = days+ " / "+month //console.log(date_msg) //把处理过的日期格式，追加到返回的数据对象里，新增一个属性跟属性值 my_month.date_msg = date_msg //console.log(my_month) this.setData({ month:my_month }) } }) }, //获取热门数据 getHot(){ wx.request({ //在路径里拼接请求参数是传统方法 //url: 'http://122.114.27.185:3000/home/hot?skip=0&limit=12', url: 'http://118.190.104.39:3000/home/hot', //请求的参数集合 data: this.data.params, success:(res)=>{ //console.log(res.data.data.list) this.setData({ //hot存储的不能只是每次请求到的12条数据，应该把所有请求的数据都存进去，这个时候就要做数组合并了 //使用es6展开运算符实现数组合并，把每次请求获得的12跳数据都存储进data的hot数组里 hot:[...this.data.hot,...res.data.data.list], //获取接口数据总条数，更新到data里去 total:res.data.data.total }) } }) }, //分页功能 --- 在用户向下滚动触底的时候自动触发！不需要放到生命周期函数里 scrolltolower(){ //首先判断一下，服务器是否还有更多数据，有就继续加载，没有就终止程序 //使用我们每次数据请求的skip参数，判断累加是否超过总的数据条数 if( this.data.params.skip >= this.data.total ){ //调用微信的提示框，提示用户没有更多数据了 wx.showToast({ title: '我是有底线的！', //去掉默认图标 icon:'none' }) //终止程序 return } //拿到全局的请求参数 var params = this.data.params //每次对skip值进行改变--- +12 //params.skip = params.skip+12 params.skip += 12 //把修改以后的参数传回到data里 this.setData({ params:params }) //再次调用请求热门数据的方法 this.getHot() } }, /** *组件的生命周期 */ lifetimes: { attached: function() { // 组件创建完毕,开始请求数据 //调用精选大图的请求方法 this.getCover() //调用月份数据请求方法 this.getMonth() //调用热门数据请求方法 this.getHot() } } })