该框架是腾讯内部基于小程序的开发框架，设计思路基本参考VUE，开发模式和编码风 格上80%以上接近VUE
优势
组件化开发
小程序虽然有标签可以实现组件复用，但仅限于模板片段层面的复用，业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。
wepy组件示例
// index.wpy
支持加载外部NPM包
小程序较大的缺陷是不支持NPM包，导致无法直接使用大量优秀的开源内容，wepy在编译过程当中，会递归 遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来，并且修改require为相对路径， 从而实现对外部NPM包的支持
单文件模式，使得目录结构更加清晰
小程序官方目录结构要求app必须有三个文件app.json，app.js，app.wxss，页面有4个文件 index.json，index.js，index.wxml，index.wxss。而且文 件必须同名。 所以使用wepy开发前后开发目录对比如下：
官方DEMO：
project ├── pages | ├── index | | ├── index.json index 页面配置 | | ├── index.js index 页面逻辑 | | ├── index.wxml index 页面结构 | | └── index.wxss index 页面样式表 | └── log | ├── log.json log 页面配置 | ├── log.wxml log 页面逻辑 | ├── log.js log 页面结构 | └── log.wxss log 页面样式表 ├── app.js 小程序逻辑 ├── app.json 小程序公共设置 └── app.wxss 小程序公共样式表
使用wepy框架后目录结构：
project └── src ├── pages | ├── index.wpy index 页面配置、结构、样式、逻辑 | └── log.wpy log 页面配置、结构、样式、逻辑 └──app.wpy 小程序配置项（全局样式配置、声明钩子等）
如何开发
快速起步
安装
npm install wepy-cli -g
小程序框架wepy命令行工具
创建项目
wepy new myproject
切换至项目目录
cd myproject
实时编译
wepy build –watch
目录结构 ├── dist 微信开发者工具指定的目录
├── node_modules ├── src 代码编写的目录 | ├── components 组件文件夹（非完整页面） | | ├── com_a.wpy 可复用组件 a | | └── com_b.wpy 可复用组件 b | ├── pages 页面文件夹（完整页面） | | ├── index.wpy 页面 index | | └── page.wpy 页面 page | └── app.wpy 小程序配置项（全局样式配置、声明钩子等） └── package.json package 配置
wepy和VUE主要区别
1.二者均支持props、data、computed、components、methods、watch（wepy中是watcher）， 但wepy中的methods仅可用于页面事件绑定，其他自定义方法都要放在外层，而VUE中所有方法均放在 methods下
2.wepy中props传递需要加上.sync修饰符（类似VUE1.x）才能实现props动态更新，并且父组件再 变更传递给子组件props后要执行this.$apply()方法才能更新
3.wepy支持数据双向绑定，子组件在定义props时加上twoway:true属性值即可实现子组件修改父组 件数据
4.VUE2.x推荐使用eventBus方式进行组件通信，而在wepy中是通过broadcast，broadcast，emit，$invoke 三种方法实现通信
· 首先事件监听需要写在events属性下：
``` bash
import wepy from 'wepy';
export default class Com extends wepy.component {
components = {};
data = {};
methods = {};
events = {
'some-event': (p1, p2, p3, $event) => {
console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
}
};
// Other properties
}
```
· $broadcast：父组件触发所有子组件事件
· $emit：子组件触发父组件事件
· $invoke：子组件触发子组件事件
5.VUE的生命周期包括created、mounted等，wepy仅支持小程序的生命周期：onLoad、onReady等
6.wepy不支持过滤器、keep-alive、ref、transition、全局插件、路由管理、服务端渲染等VUE特性技术
进阶介绍
.wpy文件说明
一个.wpy文件可分为三大部分，各自对应于一个标签：
脚本部分，即标签中的内容，又可分为两个部分：
逻辑部分，除了config对象之外的部分，对应于原生的.js文件；
配置部分，即config对象，对应于原生的.json文件。
结构部分，即模板部分，对应于原生的.wxml文件。
样式部分，即样式部分，对应于原生的.wxss文件。
.wpy文件中的script、template、style这三个标签都支持lang和src属性，lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。
| 标签 | lang默认值 | lang支持值 |
|---|---|---|
| style | css | css、less、sass、stylus |
| template | wxml | wxml、xml、pug(原jade) |
| script | babel | babel、Typescript |
普通组件引用
当页面需要引入组件或组件需要引入子组件时，必须在.wpy文件的
名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号
