介绍
之前我发过一篇分享微信小程序开发经验的文章，朋友在公众号后台问了不少关于小程序开发的问题，我在查找相关内容的时候发现宫程自己写了一个小程序开发框架，着实赞叹不已，赶紧推荐给大家。
同时大家如果对小程序还有什么疑问，可以在评论区留言，我们会整理一下，后续看看能不能出一篇文章来解答大家的疑问。
别问小程序入口在哪，我也不知道，哈哈哈
文本
作为小程序首批内测用户之一，我有幸见证了小程序的成长。小程序的使用非常简单，易于理解。但由于运行环境的原因，小程序无法使用市面上流行的框架。小程序本身提供了一些诸如模块化、模板、数据绑定等功能，可以极大地方便习惯了 MVVM 框架的用户。
在几个月的开发过程中，我一直希望有一个解决方案，可以让小程序的开发更加贴近现在的开发习惯，于是wepy诞生了。通过wepy开发的代码经过编译之后，可以生成在小程序端完美运行的代码，而wepy的目的就是让小程序的开发更加贴近传统的H5框架开发，让小程序可以像开发H5一样，支持引入NPM包、组件开发、支持新的JS特性。
小程序框架Wepy文档成品DEMO展示
以上三个demo已经在和IOS设备上运行过。
附上DEMO下载地址
快速入门代码标准：变量和方法尽量使用，避免以$开头。
以$开头的方法或属性为框架内置方法或属性，可使用，使用前请参考文章提供的API文档。入口、页面、组件的命名后缀为.wpy，外部链接文件可以为其他后缀。
请参考文章中的wpy文件说明使用ES6语法进行开发。
框架是基于ES6开发的，所以我们开发小程序也需要使用ES6，ES6有很多语法糖，可以让我们的代码更加简洁高效。
框架默认处理了小程序提供的所有API，你甚至可以直接使用/等新功能进行开发。项目的创建与使用wepy的安装
以下安装均通过npm安装
安装 wepy 命令行工具
npm wepy-cli -g 在开发目录生成开发DEMO
wepy 新发展实时编译
wepy --项目目录结构
开发说明 使用微信开发者工具新建项目，选择dist目录进行本地开发 微信开发者工具 → 项目 → 关闭ES6转ES5 在本地项目根目录运行wepy --开启实时编译 主要解决的问题： 1.开发模式转换
将原有的小程序开发模式重新包装，更加贴近现有的MVVM框架开发模式，在开发过程中参考了当前框架的一些特性，并进行了整合，以下是使用wepy前后的代码对比图。
官方DEMO代码：
基于wepy的实现：
2.支持基于组件的开发。
参见章节：组件
示例代码：
3.支持加载外部NPM包。
在编译过程中会递归遍历代码，将对应的依赖文件复制出来并修改为相对路径，从而支持外部的npm包。如下图所示：
4.单文件模式，目录结构更加清晰。
官方的目录结构要求应用内必须有app.json、app.js、app.wxss三个文件，页面必须有.json、.js、.wxml、.wxss四个文件，且文件名称必须一致。
所以使用wepy开发前后的开发目录对比如下：
官方DEMO：
使用wepy框架后的目录结构：
5.默认使用编译，支持ES6/7一些新特性。
用户可以修改配置文件来配置自己熟悉的开发环境。一些新功能默认启用，例如/等。
示例代码：
6.针对原生API进行优化。
处理现有API，修复现有API的一些缺陷，如：wx.并发问题等。
原始代码：
基于wepy的代码：
使用 10 个并发请求进行测试时：
没有 wepy：
使用 wepy 之后：
高级说明. 配置文件说明
执行wepy new demo之后也会生成类似的配置文件。
：默认值为 '.wpy'，IDE 默认不会高亮这个文件类型，此时可以修改所有文件都带 .vue 后缀（因为跟 vue 高亮规则一样），然后将此选项改为 .vue 即可解决部分 IDE 代码高亮问题。
sass：sass编译配置，参见（）
less：较少的编译配置，参见()
：编译配置，参见（）
wpy 文件说明
wpy文件的编译过程如下：
.wpy 文件分为三个部分：
样式对应原版wxss，模板对应原版wxml，代码对应原版js。
入口文件 app.wpy 是不需要的，所以在编译时会被忽略。三个标签都支持 type 和 src 属性，type 决定代码编译过程，src 决定代码是否为外部代码。当 src 属性存在且有效时，内联代码会被忽略。示例如下：
标签对应的类型值如下表所示：
描述 程序入口 app.wpy
入口app.wpy继承自wepy.app，包含一个属性及其全局属性、方法、事件，属性对应原始的app.json，编译时会生成app.json文件，如需修改内容请使用系统提供的API。
页面.wpy
页面入口继承自wepy.page，主要属性如下：
组件 com.wpy
页面入口继承自，其属性和页面属性相同，除了一些不必要的和页面特有的小程序事件等。
成分
在小程序中可以通过JS模块化、wxml模板等方式划分业务模块，实现如下效果：
但实际上，不同模块代码、事件交互都是在同一个页面空间处理，比如在 和 中同时有 add 响应事件时，需要分别在 HTML 和 JS 中定义，当业务模块复杂时，不利于开发和维护。
在wepy中可以利用组件化的特性来解决此类问题，如下所示：
ComA和ComB之间的数据和事件是相互隔离的，并且各自可以有自己的添加事件。
组件引用
当页面或组件需要引入子组件时，需要在页面或组件中给该组件分配一个唯一的id并添加标签，例如.wpy。
页面和组件都可以引入子组件，引入多个组件后如下图所示：
页面介绍了A、B、C三个组件，同时组件A、B又各自有子组件D、E、F、G、H。
组件通信和交互
基类提供了$、$emit、$三个方法，因此任意页面或者任意组件都可以调用上述三个方法实现通信交互，比如：
$this.$emit('some-event', 1, 2, 3, 4);
组件的事件监听需要写在属性下，如：
$
$事件由父组件发起，所有子组件都会收到此广播事件，除非手动取消该事件。事件广播的顺序是广度优先搜索顺序。如上图，如果发起一个$事件，则收到的事件顺序为：A、B、C、D、E、F、G、H。如下图所示：
$发出
$emit 与 $ 相反，发起事件的组件的父组件会按顺序接收 $emit 事件。如上图，若 E 发起 $emit 事件，则接收事件的顺序为：A, 。如下图所示：
$
$ 是从一个组件直接调用另一个组件，通过传递的组件路径找到对应的组件，然后调用其方法。
如果你想调用组件 A 中的方法：
这个。$（'ComA'，''，''）；
假如想在组件A中调用组件G的某个方法：
this.$('./../ComB/ComG', '', '');数据绑定小程序数据绑定方法
小程序通过Page提供的方法绑定数据，如：
this.setData({title: 'this is title'});
因为小程序架构本身就将页面渲染层和 JS 逻辑层分离，操作其实就是 JS 逻辑层和页面渲染层之间的通信。那么如果在同一个操作周期内多次执行操作，通信次数是一次还是多次？向开发小程序的同事核实后，我们得知，确实会进行多次通信。
Wepy数据绑定方法
Wepy 利用脏数据检查进行封装，在函数运行周期的最后进行脏数据检查，一来不用担心页面多次运行会不会有性能问题，二来可以更简洁的修改数据实现绑定，不用重复写方法，代码如下：
this.title = 'this is title';
但请注意，如果要在函数运行周期之外修改函数中的数据，则需要手动调用 $ 方法。例如：
Wepy脏数据检查流程
在进行脏数据检查时，会通过this.$$来标识当前的检查状态，保证并发进程中只有一个脏数据检查进程在运行。以下是进行脏数据检查的流程图：
其他优化细节1. wx.接收参数修改
2.优化事件参数传递
3. 改变数据绑定方法
方法保留，但不建议使用执行绑定。修复输入中的错误，修改输入参数支持：
这。（， ）
这。（）
4. 组件代替模板和模块
。
wepy.page
wepy.app
本文由腾讯独家发布，转载请在文章开头显著位置注明作者及出处“腾讯()”。