mpvue还在维护吗_mpvue注意事项整理

命名格式

组件名不要和微信的组件名重名

(网上整理来的各个小点，方便自己查看)

微信自带组件

view

scroll-view

swiper

movable-view

cover-view

icon

text

rich-text

progress

button

checkbox

form

input

label

picker

picker-view

radio

slider

switch

textarea

navigator

audio

image

video

camera

live-player

live-pusher

map

open-data

web-view

ad

mpvue不支持的组件名

以下为保留关键字，暂不支持作为组件名：

a

canvas

cell

content

countdown

datepicker

div

element

embed

header

image

img

indicator

input

link

list

loading-indicator

loading

marquee

meta

refresh

richtext

script

scrollable

scroller

select

slider-neighbor

slider

slot

span

spinner

style

svg

switch

tabbar

tabheader

template

text

textarea

timepicker

trisition-group

trisition

video

view

web

mpvue部分

img标签

mpvue中模板中的img标签url指向相对路径时不能正确解析

img标签用绝对路径引入

css中可以通过相对路径引入图片

mpvue写法注意

import { LTabbar, LTabbarItem } from '@/components/tabbar' (不行)

只支持单文件引用

import LTabbar from '@/components/tabbar'

import LTabbarItem from '@/components/tabbar-item'

v-for

v-for里边必须加:key

所有页面里面的created生命周期函数 都会在小程序加载的时候，

一次性执行，而不是每进入一个页面执行一次

解决方法，用小程序的 onload()/ vue 的 mounted()

组件第一次加载的时候不能执行onShow里面的内容，只有在隐藏又显示后，才会显示，而页面却每次进入都会显示

例如我们在一个组件里有一下代码

onLoad () {

console.log('onLoad')

},

onShow () {

console.log('onShow')

},

mounted () {

console.log('mounted')

},

然后实际上，只打印出

onLoad

mounted

全局变量

遇到很多需要全局变量，特别是状态的，最好统一管理。vue 的 vuex 是专为 Vue.js 应用程序开发的状态管理模式。使用过程遇到的坑是无法使用它的辅助函数 mapState、mapGetters、mapActions、mapMutations 等。看下 mpvue 的 issue 感觉是 mpvue 的问题。 解决方案： 用最原始的 store.commit()、store.getter

+1. 对于一在小程序组件中为 Handler或者为EventHandle 的属性，在 mpvue 框架中要写成 vue 的事件绑定形式,就像:bindchange写成@change

对于一些在小程序中绑定值的属性，组件中的 value，在 mpvue 框架中要写成 :value="date"

触发事件取值问题

小程序：event.detail = {value: value}

在 mpvue中要这样写：event.mp.detail = {value: value}

对于一些回调函数，比如getuserinfo,在原生小程序中，获取信息为：e.detail,但在mpvue中，获取方式为：e.mp.detail。

bindgetuserinfo 要写成 @getuserinfo，bindcontact 要写成 @contact，bindgetphonenumber 要写成 @getphonenumber，binderrror 要写成 @errror。

文件夹首字母不能大写

两层v-for不能用index的名字来作为索引，index改个名字就好

mpvue不支持

不支持Vue-router

不支持 纯-HTML

小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。

不支持部分复杂的 JavaScript 渲染表达式

我们会把 template 中的 {{}} 双花括号的部分，直接编码到 wxml 文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 + - * % ?: ! == === > < [] .，

不支持过滤器

渲染部分会转成 wxml ，wxml 不支持过滤器，所以这部分功能不支持。

不支持函数

不支持在 template 内使用 methods 中的函数。

动态组件，自定义 render，和

暂不支持在组件引用时，在组件上定义 click 等原生事件、v-show(可用 v-if 代替)和 class style 等样式属性(例： 样式是不会生效的)，因为编译到wxml，小程序不会生成节点，建议写在内部顶级元素上。

Slot(scoped 暂时还没做支持)

动态组件

异步组件

inline-template

X-Templates

keep-alive

transition

class

style

小程序部分

在 input 和 textarea 中 change 事件会被转为 blur 事件

小程序能力所致，bind 和 catch 事件同时绑定时候，只会触发 bind ,catch 不会被触发，要避免踩坑

如何获取小程序在 page onLoad 时候传递的 options

在所有 页面 的组件内可以通过 this.

mp.query 进行获取。

如何获取小程序在 app onLaunch/onShow 时候传递的 options

在所有的组件内可以通过 this.

mp.appOptions 进行获取。

全局的下拉加载需要在配置中设置开启

并且需要在方法中调用wx.stopPullDownRefresh()方法结束下拉动作，不然在真机上面下拉效果无法收起

如果使用scroll-view标签实现，有几个地方需要说明一下：

触发方法需要放到methods中，并且绑定在scroll-view标签上调用

在scroll-view中下拉的时候，无法触发全局的下拉效果，需要自己实现相应的动画(所以建议优先使用全局的方法)

下拉刷新只有在滑动至顶部的时候才会触发，如果你的滚动条已经在标签区域最顶部了，就无法触发下拉方法(这点是最后放弃scroll-view的主要原因，处理起来太麻烦了)