一、mpvue简介
二、事件处理器
事件映射表,左侧为 WEB 事件,右侧为 小程序 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
//在 input 和 textarea 中 change 事件会被转为 blur 事件。
}
三、生命周期
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
vue与小程序两者生命周期之间的关系
四、框架原理
1、vue转wxml (mpvue-loader)
原文:
我的理解:
(1)如下图,由mpvue开发的小程序视图页面都是由一个template构成。
上图,是由vue转译后wxml代码,我们可以看到这里只有一个引入,即引入了一个template
(2)转译前后对比
前:
后:
2.mpvue框架的代码复用方式
- wxml的复用
通过import语法实现复用。前面1讲到mpvue构建页面的wxml都是由template组成正式因为如此。利用小程序template的语法来实现界面代码的服用,js逻辑用另外的方法实现。
这里由一个问题,template的参数从哪来?
先看一下原文描述
即所有template的数据由一个文件统一管理
这里把树形数据结构也贴出来吧
我自己画了一下这个树形图(好丑,希望大家介绍一个好用的画图工具)
拿上文说到的component组件的属性举例。component的属性索引为0,即最左边的圈圈。component中嵌套了另一个组件other-component。可能你已经猜到了,other-component的属性数据为树的二层的0圈圈。即other-component的数据为data[0][0]。
- style scoped 的处理方式
给每个样式加一个 attr 来标记 module-id,然后在 css 中也给每条 rule 后添加 [module-id],最终可以形成一个 css 的“作用域空间”。
在微信小程序中目前是不支持 attr 选择器的,所以我们做了一点改动,把 attr 上的 [module-id] 直接写到了 class 里。
如:
转译后