命名格式
组件名不要和微信的组件名重名
以下为微信自带组件
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()
方法结束下拉动作,不然在真机上面下拉效果无法收起