tp5微信小程序全栈开发 十一——前端框架构建与令牌管理，首页、专题、分类等模块编写

3、使用Es6构建面相关对象的JS代码及访问API数据

app.json

{
"pages": [
"pages/home/home"
]
}

home.js

import{Home} from 'home-model.js';

var home = new Home();

Page({
data: {

},

onLoad:function(){
this._loadData();
},

_loadData:function(){
var id = 1;
var data = home.getBannerData(id);
}
})

home-model.js

class Home{

constructor(){//构造函数

}

getBannerData(id){
wx.request({
url: 'http://z.cn/api/v1/banner/' + id,
method:'GET',
success:function(res){
console.log(res);
return res;
}
})
}
}

export {Home};//出口

4、异步回调与箭头函数

由于不是同步，直接相等得不到结果，需要调用回调函数

解决办法：再定义一个回调函数，把回调函数作为参数传到getBannerData里面去，当成功取到结果之后，在success方法里面调用回调函数，从而把结果传入home.js里面。

home.js

var data = home.getBannerData(id,this.callBack);
callBack:function(res){
console.log(res);
}
ES6写法
var data = home.getBannerData(id, (res)=>{
console.log(res);
});

home-model.js

class Home{

constructor(){

}

getBannerData(id,callBack){
w
4000
x.request({
url: 'http://z.cn/api/v1/banner/' + id,
method:'GET',
success:function(res){
// return res;
callBack(res);
}
})
}
}

export {Home};

5、构建请求基类（重要）

由于http请求用到的很多，所以建一个基类，保存request方法

utils.base.js

import{Config} from '../utild.config.js'

class Base{
constructor(){
this.baseRequestUrl = Config.restUrl;
}

request(params){
var url = this.baseRequestUrl + params.url;

if(!params.type){
params.type = 'GET';
}
wx.request({
url: url,
data:params.data,
methord:params.type,
header:{
'conteen-type':'application//json',
'token':wx.getStorageSync('token')
},
success:function(res){
params.sCallBack && params.sCallBack(res);//相当于if语句
},
fail:function(err){
console.log(err);
}
})
}
}

由于这个baseUrl用到的很多，不如放到配置文件里面。

urils\config.js

class Config {
constructor(){

}
}

Config.restUrl = "http://z.cn/api/v1/";//这样写在类的外边是为了避免在调用的时候实例化

export {Config};

6、请求基类的应用

pages\home\home-model.js

import {Base} from '../../utils/base.js';

class Home extends Base{//继承基类

constructor(){
super();//基类构造函数
}

getBannerData(id,callBack){
var params = {
url:'banner/'+id,
sCallBack:function(res){
callBack && callBack(res.items);
}
}
this.request(params);
}
}

export {Home};

base.js

params.sCallBack && params.sCallBack(res.data);//因为所有的都是只要这个数据即可，所以只在回调函数中返回res.data

7、使用数据绑定显示在UI上

再home.js中拿到数据

var data = home.getBannerData(id, (res)=>{
console.log(res);
//数据绑定
this.setData({'bannerArr':res});

home.wxml

<swiper class='swiper' indicator-dots='true' autoplay='true'>
<block wx:for="{{bannerArr}}">
<swiper-item class='banner-item'>
<image mode='aspectFill' src="{{item.img.url}}"></image>
</swiper-item>
</block>
</swiper>

8、商品主题UI和数据加载

home-model.js

getThemeData(callback) {
var params = {
url: 'theme?ids=1,2,3',
sCallback: function (data) {
callback && callback(data);
}
}
this.request(params);
}
}

home.js

home.getThemeData((res)=>{
console.log(res);
this.setData({'themeArr':res});
console.log(this.data.themeArr);
})

home.wxml

<view class='home-main'>
<view class='home-main-theme'></view>
<view class='home-main-products'>精选主题</view>
<view class='theme-box'>
<block wx:for='{{themeArr}}'>
<image src='{{item.topic_img.url}}'></image>
</block>
</view>
<view class='home-main-products'></view>
</view>