mpvue+vant使用注意事项

3,433 阅读2分钟

最近公司新项目,出于学习的态度使用了美团的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时会报错

参考链接:Formatter选项格式化函数

4、待续中....

总结:

大部分问题都能在mpvue的使用手册中查找到,但开发人员一般都是在实战中才会‘幡然醒悟’, 别人说千次也不如自己踩一次来的深刻。 如果遇到相关问题或异常可以:

1、尽可能使用最新版本的框架!

2、上mpvue的github,看下有没有和你遇到类似的issues

参考文章:

1、mpvue中使用Vant Weapp组件库

2、mpvue官方使用手册

3、有赞Vant-weapp