面向对象的微信小程序

发表于
若是眼睛不喜欢，心也会拒绝。

现在我们就以我们的home页面为例, 说一下使用面向对象的方式如何开发微信小程序;

文件目录结构

1
2
3
4
5
6
7
- pages
-- home
--- home-model.js
--- home.js
--- home.wxml
--- home.wxss
--- home.json

我们新建一个model类, 用来处理一些复杂的逻辑， 以使我们的代码变得整洁;

home-model.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Home {

  constructor(){
    // 构造函数
  }
  
  // 根据banner获取id
  getBannerData(id){
    wx.request({
      url: 'http://tp5.me/api/v1/banner/'+id,
      method: 'GET',
      success: function(res){
        console.log(res);
        return res;
      }
    })
  }
}

export {Home}

home.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Home } from 'home-model.js';

var home = new Home();

// pages/home.js
Page({

  data: {

  },

  onLoad: function () {
    console.log('home on load');
    this._loadData();
  },

  // 定义一个私有方法
  _loadData: function () {
    var id = 1;
    var data = home.getBannerData(id)
    return data;
  }

})

接收异步返回值

因为API返回的数据是异步的， 所以我们无法通过调用直接拿到返回值， 但是我们可以通过设置一个回调函数拿到他的返回值
home.js

1
2
3
4
5
6
7
8
9
10
// 定义一个私有方法
_loadData: function () {
  var id = 1;
  home.getBannerData(id, this.callback);
},

callback: function(res){
    console.log('回调返回');
    console.log(res)
}

home-model.js

1
2
3
4
5
6
7
8
9
getBannerData(id, callback){
    wx.request({
      url: 'http://tp5.me/api/v1/banner/'+id,
      method: 'GET',
      success: function(res){
        callback(res);
      }
    })
  }

构造基类

目录结构

1
2
3
4
5
6
7
8
- pages
- utils
-- base.js
-- util.js
-- config.js
- app.js
- app.json
- app.wxss

构造配置类

config.js

1
2
3
4
5
6
7
8
9
class Config {
  constructor(){

  }
}

Config.restUrl = 'http://tp5.me/api/v1/';

export {Config};

构造基类

base.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { Config } from '../utils/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.type,
      header: {
        'content-type': 'application/json',
        'token': wx.getStorageInfoSync('token')
      },
      method: params.type,
      success: function(res) {
        params.callback && params.callback(res.data);
      },
      fail: function(error) {
        console.log(error);
      },
      complete: function(res) {
        
      },
    })
  }
}

export {Base};

类的继承

home-model.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Base } from '../../utils/base.js'

class Home extends Base {

  constructor(){
    // 如果继承了某个类， 则必须要调用 super
    super();
  }

  getBannerData(id, callback){

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

export {Home}