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标签

• tempalte模板中的img标签url指向相对路径时不能正确解析
• tempalte模板中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声明周期

        所有页面里面的created生命周期函数都会在小程序加载的时候，一次性执行，而不是每进入一个页面执行一次
        解决方法：
        用小程序的 onload()/ vue 的 mounted()

    组件中的onShow

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

    事件
        小程序中的bind事件，在 mpvue 框架中要写成 vue 的事件绑定形式,就像:bindchange写成@change
    对于一些在小程序中绑定值的属性，组件中的 value，在 mpvue 框架中要写成 :value="date",bindgetuserinfo 要写成 @getuserinfo。

触发事件取值问题

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

event.detail = {value: value}

    在 mpvue中要这样写：

event.mp.detail = {value: value}

文件夹首字母不能大写

两层v-for不能用index的名字来作为索引

mpvue不支持方面

• 不支持Vue-router，但是可以使用vue-router-patch
• 不支持 纯-HTML，小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
• 不支持部分复杂的 JavaScript 渲染表达式 我们会把 template 中的 {{}} 双花括号的部分，直接编码到 wxml，文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。目前可以使用的有 +,-,*,%,?:, ! ==,===.>,<, []，不支持ES6的 ${}

小程序部分

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

 <map
 	@regionchange="functionName"
 	@end="functionName"
 	@begin="functionName"
 ><map>

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

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

    在所有 页面 的组件内可以通过 this.$root.$mp.query进行获取。

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

    在所有的组件内可以通过 this.$root.$mp.appOptions 进行获取。

下拉加载

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

链接：https://www.jianshu.com/p/184db91b101d