wepy框架开发小程序总结

wepy 是一套使用类 Vue 开发小程序的框架。它的出现使得小程序开发者可以享受到类似 Vue 一样的组件化方式、computed、watch 等特性，大幅提高了小程序开发效率和代码可维护性。

wepy 的设计思想是 "开发小程序像写 Vue"，开发者编写的代码可以使用大部分 Vue 的语法，通过 wxml 模板与小程序通信。wepy 通过编译器将开发者编写的代码转换为符合小程序规范的代码，从而实现了在小程序中使用 Vue 的效果。

下面我们来详细介绍一下 wepy 框架的实现原理。

一、wepy 的运行原理

wepy 的运行原理可以分为两个部分，即编译阶段和运行时阶段。

编译阶段：在编译阶段，wepy 会将开发者编写的代码转换为符合小程序规范的代码，并生成相应的小程序页面和组件。这个过程包括将开发者编写的 Vue 组件转换为小程序组件，将 Vue 模板转换为小程序的 wxml 模板，将 Vue 数据模型转换为小程序的数据模型等。

运行时阶段：运行时阶段就是在小程序中运行编译后的代码，并完整地实现了 Vue 的生命周期、计算属性、监听器等特性。运行时将通过依赖注入实现组件间通信，并将小程序的 API 封装成 Promise 的形式，以便于异步编程。

总体流程可以简单概括为：


二、wepy 生命周期

wepy 生命周期与 Vue 生命周期非常类似，但又有些不同。下面是 wepy 生命周期的详细介绍：

- onLoad 生命周期函数：监听页面加载，类似于 Vue 的 created。

- onReady 生命周期函数：监听页面初次渲染完成，类似于 Vue 的 mounted。

- onShow 生命周期函数：监听页面显示，类似于 Vue 的 activated（keep-alive 组件）。

- onHide 生命周期函数：监听页面隐藏，类似于 Vue 的 deactivated（keep-alive 组件）。

- onUnload 生命周期函数：监听页面卸载，类似于 Vue 的 destroyed。

与 Vue 生命周期不同的是，wepy 还提供了页面间传值的 onShareAppMessage 生命周期函数。

三、wepy 常用特性

1.组件化开发：wepy 中，wox 文件对应开发者所定义的一个组件，其内部可以包括 data、methods、computed、watch 等属性，让小程序组件开发更加方便。

2.小程序 API 封装：wepy 对原生的小程序 API 进行了 Promise 化处理，让异步编程更加方便。

3.计算属性：可以使用计算属性将一些复杂逻辑的变量封装成一个属性，以便能在模板中直接使用，计算属性会根据它所依赖的数据属性而变化。

4.事件监听：wepy 使用类似 Vue 的 v-on 语法来处理事件，可以直接绑定小程序 API 以及组件事件。

5.依赖注入：组件间可以通过注入服务的方式实现通信，可以减少因为组件间传参而发生的深度嵌套的问题。

四、总结

wepy 框架基于原生小程序开发，提供类 Vue 开发方式，开发时更加方便快捷。wepy 的运行原理是通过编译器将开发者编写的代码转换为小程序规范的代码，在小程序中运行完整的 Vue 特性。

使用 wepy 框架可以提高小程序开发效率、提高代码可维护性。同时，wepy 又有一些与 Vue 不同的特性，如 onShareAppMessage 生命周期函数等，可以更好地满足小程序开发所需的功能。