命名格式
组件名不要和微信的组件名重名
微信自带组件
- 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的主要原因，处理起来太麻烦了）
网友评论