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){
    wx.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>