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

作者: 日期:2019-08-22

该框架是内部基于小程序的开发框架,设计思路基本参考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包,导致无法直接使用大量优秀的开源内容,wepy在编译过程当中,会递归 遍历代码中的require然后将对应依赖文件从node_modules当中拷贝出来,并且修改require为相对路径, 从而实现对外部npm包的支持



官方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

├── node_modules
├── src 代码编写的目录
| ├── components 组件文件夹
| | ├── com_a.wpy 可复用组件 a
| | └── com_b.wpy 可复用组件 b
| ├── pages 页面文件夹
| | ├── index.wpy 页面 index
| | └── page.wpy 页面 page
| └── app.wpy 小程序配置项
└── package.json package 配置

1.二者均支持props、data、computed、components、methods、watch, 但wepy中的methods仅可用于页面事件绑定,其他自定义方法都要放在外层,而vue中所有方法均放在 methods下

2.wepy中props传递需要加上.sync修饰符才能实现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':  = {
 console.log;
 // other properties
· $broadcast:父组件触发所有子组件事件
· $emit:子组件触发父组件事件
· $invoke:子组件触发子组件事件

 5.vue的生命周期包括created、mounted等,wepy仅支持小程序的生命周期:onload、onready等

6.wepy不支持过滤器、keep-alive、ref、transition、全局插件、路由管理、服务端渲染等vue特性技术



一个.wpy文件可分为三大部分,各自对应于一个标签:







首页
电话
短信
联系