Wepy是一个类Vue语法规则的小程序开发框架,可以让开发者使用组件化、模块化和异步编程的方式来开发小程序。Wepy在开发小程序时,提供了类Vue编写方式和一些额外的组件属性,可以让开发者快速的构建一个小程序应用。
Wepy基本组成部分
首先我们来看看wepy开发小程序的基本组成部分:页面(page)、组件(component)、父子组件通讯、数据传递。
1.页面(page)
在Wepy中,页面就是一个wepy组件,名字叫做Page。Wepy中的页面可以有自己的生命周期钩子函数,比如onLoad和onShow。在Page组件中,可以使用类Vue方式编写模板。
```
export default class Index extends wepy.page {
data = {
msg: 'Hello World!'
}
}
```
2.组件(component)
组件是Wepy中的重点,组件可以让我们将复杂的UI拆分成独立的,可重复利用的模块。Wepy中的组件也是一个wepy组件,名字叫做Component。组件可以有自己的生命周期钩子函数,比如onLoad和onShow,在组件中也可以使用类Vue方式编写模板。
```
import wepy from 'wepy'
export default class List extends wepy.component {
props = {
list: {
type: Array,
default: []
}
}
}
```
3.父子组件通讯
在Wepy中,父子组件之间的通讯和Vue是一样的,使用props和$emit。定义一个父组件,定义一个list数组,把它传入到List组件的props中,然后在子组件中使用。
```
import wepy from 'wepy'
import List from './list'
export default class Index extends wepy.page {
components = {
List
}
data = {
list: [1, 2, 3, 4, 5]
}
}
```
4.数据传递
数据在组件中的传递和Vue中是一样的,使用v-model和.sync,v-model可以用于双向数据绑定,.sync可以用于自定义组件同步状态。
```
import wepy from 'wepy'
export default class Form extends wepy.component {
props = ['value']
data = {
inputValue: ''
}
methods = {
submit: function () {
this.$emit('submit', this.inputValue)
}
}
}
```
Wepy框架原理
Wepy框架本质上是对小程序原生API的封装和一些增强,例如:
组件化的开发方式,可以实现代码复用和组件的便捷使用。
提供了对组件和页面的生命周期的支持。
提供了对异步操作的Promise封装,当然也可以使用原生回调。
更方便、更高效、更快捷地开发小程序。
对于Wepy的原理,可以简单理解为Wepy将原生的小程序API进行了二次封装和增强。Wepy把小程序的原生方法变成Promise形式,使得调用异步接口可以更加方便。同时,Wepy也将小程序的语法、组件化拓展和生命周期等用Vue风格进行封装,让开发者更好地理解和使用。