电影小程序————小程序
最近做个电影小程序练练手。
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获取的值不同。
举个例子,我想找(热映)的(广州)的(喜剧)的。。。。电影。那就可以使用多个变量代替数值,通过点击,选择来获取不一样的数据。