wepy开发的小程序

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

```

在页面中引用该组件：

```html

```

页面也是通过 wpy 文件构成的，一个基础的页面示例：

```html

```

在 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 状态管理等等，可以让开发者更加轻松地实现各种功能和需求。