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，和<script type=“text/x-template”> 字符串模版等都不支持

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

• Slot（scoped 暂时还没做支持）

• 动态组件

• 异步组件

• inline-template

• X-Templates

• keep-alive

• transition

• class

• style

• http://mpvue.com/mpvue/#_6 建议把官方给的这个文档可以看下

小程序部分

• 在 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()方法结束下拉动作，不然在真机上面下拉效果无法收起

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

• 触发方法需要放到methods中，并且绑定在scroll-view标签上调用
  在scroll-view中下拉的时候，无法触发全局的下拉效果，需要自己实现相应的动画（所以建议优先使用全局的方法）
  下拉刷新只有在滑动至顶部的时候才会触发，如果你的滚动条已经在标签区域最顶部了，就无法触发下拉方法（这点是最后放弃scroll-view的主要原因，处理起来太麻烦了）