小程序开发之WePY组件框架

简介

WePY框架对原生小程序的开发模式进行了再次封装，更贴近于MVVM架构模式。单文件模式，目录结构更清晰。 此外，支持加载外部npm包；默认使用babel编译，支持ES6/7的一些新特性。用户可以通过修改wepy.config.js(老版本使用.wepyrc)配置文件，配置自己熟悉的babel环境进行开发。默认开启使用了一些新的特性如promise、async/await。对小程序原生API进行promise处理，同时修复了一些原生API的缺陷。

WePY项目目录

原生小程序：
要求app实例必须有3个文件：app.js、app.json、app.wxss，
而page页面则一般有4个文件：page.js、page.json、page.wxml、page.wxss。

在WePY中：
则使用了单文件模式，将原生小程序app实例的3个文件统一为app.wpy；page页面的4个文件统一为page.wpy。

如下：

QQ.png

QQ.png

.wpy文件

可分为以下三大部分，各自对应一个标签：
1、脚本部分
即标签中的内容，又可分为两个部分：

配置部分，即config对象，对应于原生的.json文件；
逻辑部分，除了config对象之外的部分，对应于原生的.js文件。

2、结构部分
即模板部分，对应于原生的.wxml文件（类似html）

ps: 小程序入口文件app.wpy不需要

3、样式部分
即样式部分，对应于原生的.wxss文件。

以上3部分都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。
各标签对应的lang值如下表所示：

QQ.png

小程序入口文件app.wpy

小程序实例继承自wepy.app类，包含一个config属性和其它全局属性、方法、事件。
示例：

页面.wpy文件

示例：

页面实例继承自wepy.page类，该类的主要属性介绍如下：

QQ.png

在Page页面实例中，可以通过this.$parent来访问App实例。

组件com.wpy文件

示例

组件实例继承自wepy.component类，其属性与页面属性大致相同。但不需要config配置，不需要页面特有的一些生命周期函数。