该框架是腾讯内部基于小程序的开发框架，设计思路基本参考VUE，开发模式和编码风 格上80%以上接近VUE
优势
组件化开发
小程序虽然有标签可以实现组件复用，但仅限于模板片段层面的复用，业务代码与交互事件 仍需在页面处理。无法实现组件化的松耦合与复用的效果。
wepy组件示例
// index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel> <counter1 :num="myNum"></counter1> <counter2 :num.sync="syncNum"></counter2> <list :item="items"></list> </view> </template> <script> import wepy from 'wepy'; import List from '../components/list'; import Panel from '../components/panel'; import Counter from '../components/counter'; export default class Index extends wepy.page { config = { "navigationBarTitleText": "test" }; components = { panel: Panel, counter1: Counter, counter2: Counter, list: List }; data = { myNum: 50, syncNum: 100, items: [1, 2, 3, 4] } } </script>
支持加载外部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 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文件可分为三大部分，各自对应于一个标签：