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

微信小程序使用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">

<swiper-item>

</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~~
立即购买



看点推荐



视觉焦点



精品源码

教程

视频

下载区

站长资讯

电脑知识