wepy 是一款基于 Vue.js 的小程序开发框架,它可以通过组件化开发方式,将页面拆分成可以复用的组件,在提高开发效率的同时,也能够提高小程序的性能和可维护性。
使用 wepy 开发小程序,需要先安装并配置 wepy-cli,然后通过 wepy init 命令初始化一个项目,初始化后的目录结构如下:
```
├── dist // 编译后的小程序代码
├── node_modules
├── src // 源代码目录
│ ├── app.wpy // 应用程序文件
│ ├── components // 组件目录
│ ├── images // 图片资源目录
│ ├── pages // 页面目录
│ ├── styles // 样式文件目录
│ ├── utils // 工具类目录
│ ├── main.js // 入口文件
├── package.json // 项目配置文件
└── wepy.config.js // wepy 编译配置文件
```
在 wepy 中,页面和组件都是由 wpy 文件(类似于 vue 文件)构成的,例如,我们新建一个 Hello 组件:
```html
{{message}}
import wepy from 'wepy'
export default class Hello extends wepy.component {
data = {
message: 'Hello wepy!'
}
}
h2 {
font-size: 48px;
color: #007aff;
text-align: center;
}
```
在页面中引用该组件:
```html
import wepy from 'wepy'
import Hello from '../components/Hello'
export default class Index extends wepy.page {
components = {
Hello
}
}
/* 页面样式 */
```
页面也是通过 wpy 文件构成的,一个基础的页面示例:
```html
{{message}}
import wepy from 'wepy'
import Hello from '../components/Hello'
export default class Index extends wepy.page {
data = {
message: 'Hello wepy!'
}
components = {
Hello
}
methods = {
onTap() {
console.log('tap')
}
}
}
p {
color: #333;
font-size: 32px;
text-align: center;
}
```
在 wepy 中,页面和组件都有自己的生命周期函数,可以通过这些函数来实现一些特定的逻辑:
- onLoad: 页面或组件加载
- onReady: 页面或组件初次渲染完成
- onShow: 页面或组件显示
- onHide: 页面或组件隐藏
- onUnload: 页面或组件卸载
wepy 还提供了一些内置组件和事件:
- wepy.input: 调用微信小程序原生的输入组件
- wepy.picker: 调用微信小程序原生的选择器
- wepy.request: 发送 AJAX 请求
- wepy.showToast: 显示 toast 弹窗
- wepy.navigateTo: 页面跳转
- wepy.switchTab: 跳转到 tabBar 页面
- wepy.redirectTo: 重定向到指定页面
- wepy.reLaunch: 关闭所有页面,打开指定页面
通过组件化和内置组件,wepy 可以大大提高小程序的开发效率和代码可维护性。同时,wepy 还提供了许多其他的功能,如 TypeScript 支持、Less 预处理器支持、Vuex 状态管理等等,可以让开发者更加轻松地实现各种功能和需求。