微信小程序使用ES6构建面向对象的JS代码及访问服务器API获取数据

1688源码 | 2018-12-08 14:28:15 |

 拿首页幻灯片来举例:

捕获.JPG

接口地址:https://www.wsstq.com/e/extend/api/index.php?m=all&c=getbanner

首页页面:home,包含home.js,home.json,home.wxml,home.wxss,home-model.js

配置文件config.js和封装文件base.js在utils文件夹内

home.js代码

import { Config } from '../../utils/config.js';
import { Home } from 'home-model.js';
var home = new Home();
Page({
data: {
},
onLoad: function () {
this._loadData();
},
_loadData: function () {
var data = home.getBannerData((res)=>{
console.log(res.data.data)
this.setData({
imgUrls: res.data.data,
maiurl: Config.mainUrl
})
});

},
callBack:function(res){
console.log(res.data)
}
})
 
home-model.js代码
 
import {
Base
} from '../../utils/base.js'
class Home extends Base {
constructor() {
super()
}
getBannerData(callBack) {
var params = {
url: 'm=all&c=getbanner',
sCallBack: function(res) {
callBack && callBack(res)
}
}
this.request(params);
}
}
export {
Home
};
 
home.wxml代码
 
<swiper indicator-dots="{{indicatorDots}}"
autoplay="true" indicatorDots="true" interval="5000" duration="5000">
<block wx:for="{{imgUrls}}" wx:key=''>
<swiper-item>
<image src="{{maiurl}}{{item.titlepic}}" class="slide-image" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
 
base.js代码
 
import {
Config
} from '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,
method: params.type,
header: {
'content-type': 'application/json',
'token': wx.getStorageSync('token')
},
success: function(res) {
params.sCallBack && params.sCallBack(res)
},
fail: function(err) {
console.log(err)
}
})
}
}
export {
Base
}
 
config.js代码
 
class Config{
constructor(){

}

}
Config.restUrl='https://www.wsstq.com/e/extend/api/index.php?'
Config.mainUrl = 'https://www.wsstq.com';

export {Config}
精品源码
  • 织梦万能API 百度小程序插件

    惊爆价¥400原价¥800

    立即购买
  • 我爱登报网 百度小程序源码 织梦CMS后台

    惊爆价¥520原价¥1040

    立即购买
  • 索娜根布黑枸杞 百度小程序源码 织梦CMS后台

    惊爆价¥520原价¥1040

    立即购买
视觉焦点

推荐文章

微信小程序插件使用错误cannotread property 'version' of undefined

微信小程序使用ES6构建面向对象的JS代码及访问服务器API获取数据

最新文章

关注我们

微信扫一扫,关注更多精彩

  • 1688源码公众号
    全面掌握源码一手资讯

  • 1688源码公众号
    精彩活动,推送提醒