最近公司新项目,出于学习的态度使用了美团的mpvue+有赞的Vant组合,大部分注意点来自mpvue,官方已经给出了注意点,下面记录的都是高频问题,在此记录下来仅供今后参考。
首先放上mpvue的官网使用手册
1、新增页面需要npm run dev重启一下 !
2、通过navigateTo传参如果是number类型,那么在接受时会变成string类型 参考:链接
3、暂不支持在组件引用时,在组件上定义 click 等原生事件,tapEvent方法并不会生效
<invoice-rank @click="tapEvent"></invoice-rank>
4、mpvue 切换页面数据没清空,可以在onUnload方法中添加
Object.assign(this.$data, this.$options.data())
5、v-show指令无法彻底隐藏掉元素,最好使用v-if指令
6、A页面不能将B页面当子组件来引用,会引发样式丢失等问题
7、待续...
Vant框架官网:
1、mpvue+vant 无法实现双向数据绑定!这个问题最严重,如果对于页面有多个field输入框而言就是灾难,解决方法就是在组件上绑定change事件,change方法中使用event.mp.detail拿到数据
handleSearchChange (event) {
this.searchValue= event.mp.detail
},
参考链接:field表单数据获取的问题
2、vant-action-sheet 在mpvue中使用注意,如果有取消按钮,应该把close方法改为cancel方法
<van-action-sheet
:show = visibleAction
:actions = actions
cancel-text = "关闭"
@cancel="onClose"
@select="onSelect"
/>
3、日期组件自定义formatter时会报错

4、待续中....
总结:
大部分问题都能在mpvue的使用手册中查找到,但开发人员一般都是在实战中才会‘幡然醒悟’, 别人说千次也不如自己踩一次来的深刻。 如果遇到相关问题或异常可以:
1、尽可能使用最新版本的框架!
2、上mpvue的github,看下有没有和你遇到类似的issues