电影小程序（数据获取使用）————小程序

电影小程序————小程序

最近做个电影小程序练练手。

util_image.js

(1号工具人，用来做数据中转，这方法是老师教的，我以前是喜欢在当前页面直接获取数据的，感觉自己的方法直观简单。不过多学一种又不吃亏。）

注意：使用的api是豆瓣的，有次数限制。

function getImageListData(time, start, count, callback) {
    //把数据用变量替代，通过当前页面传数据来获取数据
  var weApi;
  weApi = "https://douban.uieee.com/v2/movie/"+time+"?city=广州&start=" + start + "&count=" + count ;
  //console.log(time)
  //发送请求加载信息
  wx.request({
    url: weApi,
    header:{'content-type':'json'},//get的头，post不能用这个好像。
    success: function (res) {
      console.log(res)//看看数据长啥样。
      callback && callback(res.data);
    }
  })
}
//postman工具是用来看接口数据的，当然也可以直接获取来看看。
module.exports = {
  getImageListData: getImageListData
};

index.js

//页面也写到这里了。这是一个导航栏。
<view class="swiper-tab">
  <view wx:for="{{tabItemsArray}}" class="tab-item {{currentTab==index ? 'on' : ''}}" data-current="{{index}}" bindtap="swichNav">{{item.name}}</view>
</view>
//data：中
	currentTab: 0,
    tabItemsArray: [{ name: "热映", id: "in_theaters" }, { name: "待映", id: "coming_soon" }]//导航栏数据。通过导航栏点击改变数据。
  },

//引入工具类
var utilImage = require("../../utils/util_image.js");//引入工具人
  onLoad: function (options) {//页面打开触发
    this.changeImages(this.data.tabItemsArray[0].id);
  },
  changeImages: function (n) {
    var _this = this;
    // 页面初始化 options为页面跳转所带来的参数
    utilImage.getImageListData(n, 0, 30, function (mxList) {
        //把导航的id赋值给n，然后再把n，0，30赋值给工具人里的函数
      _this.setData({ mxList: mxList });//把返回的值赋值给mxlist。
      console.log(mxList);//打印返回值。
    });
  },
    swichNav: function (e) {//导航切换触发
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
        //这个其实是触发变色的设置，上面有一个叫on的class，当点击时，currentTab的值等于当前导航的下标，当然另一个就不等于了，所有就可以做点击导航变色了。
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,//使currentTab的值等于当前导航的下标
      })
      this.changeImages(this.data.tabItemsArray[this.data.currentTab].id);
        //设置函数下的n值，tabItemsArray下的几个（currentTab）的id值！
        //老师的代码一套套着一套，我实在没法想的这么深入。我想到的就是简单的点击数值直接传给wx.request.
    }
  }

其实很多代码，你想都想不到的话，别说打出来了。

这是面向对象的方法，函数封装好，对象———n多个函数———得到结果。

说一下这方法的好处，n个变量（数据）通过wx.request,那么就可以改变各个变量值来使request获取的值不同。

举个例子，我想找（热映）的（广州）的（喜剧）的。。。。电影。那就可以使用多个变量代替数值，通过点击，选择来获取不一样的数据。