Fork me on GitHub

面向对象的微信小程序


若是眼睛不喜欢,心也会拒绝。

现在我们就以我们的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}