微信小程序wepy框架笔记小结

该框架是腾讯内部基于小程序的开发框架，设计思路基本参考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命令行工具

创建项目

wepy new myproject