微信小程序--框架(wepy)

最近在写微信小程序,发现自带开发运行环境对代码的复用性,和组件化开发有着天生的不足。于是在网上看到了关于微信小程序框架wepy。抱着学习心态,学习下以后方便用到。

基本框架–笔记

VUE语法风格,(笔记不做太详细,说明)。其中可以共用小程序中生命周期函数,可在<view ><view>中共用wx:if="false"等API。

components={}中只能放入监听页面的点击函数如<view @tap = "aPlus"></view>aPlus事件。如自定义函数直接与components={}同级。

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

// 引入文件
import wepy from 'wepy';

//继承 wepy.app , wepy.page , wepy.component
export default class Page extends wepy.app {
customData = {};

customFunction () { }

onLaunch () {}

onShow () {}

config = {}

globalData = {}
}
export default class Page extends wepy.page {
config = {};

components = {counter1: Counter};

data = {};

methods = {};

events = {};

onLoad() {};
}
export default class Page extends wepy.component {
customData = {} // 自定义数据

customFunction () {} //自定义方法

onLoad () {} // 在Page和Component共用的生命周期函数

onShow () {} // 只在Page中存在的页面生命周期函数

config = {}; // 只在Page实例中存在的配置数据,对应于原生的page.json文件

data = {}; // 页面所需数据均需在这里声明,可用于模板数据绑定

components = {}; // 声明页面中所引用的组件,或声明组件中所引用的子组件

mixins = []; // 声明页面所引用的Mixin实例

computed = {}; // 声明计算属性

watch = {}; // 声明数据watcher

methods = {}; // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

events = {}; // 声明组件之间的事件处理函数
}

框架双向数据流

个人认为在框架组件中最重要是就是数据流,和各个组件中的数据传递。

在子组件接受参数的时候需要指定type的对象类型

../page/index.wepy

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
<template>
<test :title='title' :syncTitle.sync="title" :twoWayTitle.sync="title" @tap = "aPlus">点击加一 {{title}} </test>
</template>

<script>
import wepy from 'wepy';
import Test from '../components/test'

export default class Index extends wepy.page {

// 声明组件。
components = {
test : Test
}

// 页面数据
data = {
title : 1
}
}

//事件处理函数(集中保存在methods对象中)。在页面(wxml)中的bindtap,bindchange等事件
methods = {
aPlus(){
this.title +=1;
}
}
</script>

../components/test.wepy

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
37
38
39
40
41
42
43
44
45
46
47
48

<template>
<view wx:if='{{test}}' class='test' @tap='test'>点击模版消息</view>
<view wx:else class='test' @tap='test'>点击成功</view>
<view> 父子组建传值 :{{twoWayTitle}} </view>
<view @tap='test1' >点击减值-</view>
</template>

<script>
import wepy from 'wepy';

export default class Test extends wepy.component {

props = {
// 单项数据绑定
title: Number,
// 单项数据动态绑定
syncTitle: {
type: Number,
default: 'null',
},
// 双向数据动态绑定
twoWayTitle: {
type: Number,
default: 'nothing',
twoWay: true
}
};

data = {
test: true
};

methods = {
test() {
this.test = !this.test;
},

test1(){
this.twoWayTitle = this.twoWayTitle - 1;
}
};

onLoad() {
console.log(this);
}
}
</script>

Mixin 混合

个人理解:

就是在Mixin类下定义的函数是可以引入到其他类中进行调用,类似于重复组建的函数,比如可以用来封装ajax请求。还有一些重复调用的功能性函数。

以微信小程序http请求为栗子:

定义HttpMixin
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
37
38
39
40
41
import wepy from 'wepy'
import setting from '../setting/setting';
import db from '../util/db';
// 封装请求
export default class HttpMixin extends wepy.mixin {
// GET请求
GET(url, params = {}) {
return this.request('GET', url, params)
}

// POST请求
POST(url, params = {}) {
return this.request('POST', url, params)
}

request(method, url, params = {}) {
handler.url = setting.URL + url
handler.data = params
handler.header = {
'token': db.Get('token')
}
handler.method = method
if (method === 'POST') {
handler.header['content-type'] = 'application/x-www-form-urlencoded; charset=UTF-8'
}
//promise 是ES6中用到的一个异步函数,用于http请求再合适不过。
return new Promise((resolve, reject) => {
handler.success = res => {
if (res.data.code === 1) {
resolve(res.data)
} else {
reject(res)
}
}
handler.fail = err => {
reject(err)
}
wepy.request(handler)
})
}
}
调用 HttpMixin
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import wepy from 'wepy';
import HttpMixin from '../mixins/http';

export default class test extends wepy.page {

mixins = [HttpMixin];
onLoad(){
//.then是Promise中的回调。
const res = this.GET(url,params);
res.then(
res => {
//成功
},
err => {
//失败
}
);
}
}

Demo

一个简单的父子组建相互加减传值GitHub

坚持原创技术分享,您的支持将鼓励我继续创作!