剖析美团开源的mpvue Toast组件，初探mpvue开发体验

前不久，美团开源了一个使用Vue来开发小程序的框架mpvue，立刻吸引了很多人的注意，包括我。对mpvue这种集大成者抱着很大的好奇心，在日常开发中尝试使用mpvue来开发一个toast组件，从中体验了一把mpvue的开发流程。

因为之前一直使用wepy作为小程序开发框架，但是一直以来都觉得wepy的开发体验不是很好，所以我一直以来都在期待一个新的、更好用的框架，而mpvue恰好满足了我的这个需求。

从我目前的开发体验来看，总体来说还是非常不错的，详细的开发体验可以看看我之前写的一篇文章：初次使用mpvue进行小程序开发的体验与感受，写的比较长，不过很详细，感兴趣的可以看看，里面有我具体开发的一些心得体会。

废话不多说了，我们来看一下基于mpvue编写的toast组件吧！

一、github地址

这个toast组件很简单，没什么技术含量，它已经放在github上了，有兴趣的可以去看看，也希望大家能够多多支持，喜欢的可以给个star。

github地址：https://github.com/bailicangdu/mpvue-toast

二、使用方式

1. 安装组件

npm install --save mpvue-toast

2. 在main.js中引入组件

import Toast from 'mpvue-toast'

Vue.component('toast', Toast)

3. 在需要使用的地方调用组件

this.$toast('这是一个提示')

三、组件配置

组件的配置项如下：

配置项	类型	默认值	说明
duration	number	3000	提示持续时间，单位为毫秒
icon	string	'success'	提示图标，支持'success'、'loading'、'error'
position	string	'bottom'	提示位置，支持'top'、'bottom'

四、组件方法

组件的方法如下：

方法	参数	返回值	说明
show	message, options	Promise	显示提示
hide		Promise	隐藏提示

五、注意事项

1. 该组件只支持Vue2.0及以上版本。
2. 该组件需要在小程序中使用，在其他环境下无法正常工作。
3. 该组件在小程序中使用时，需要在app.json文件中配置usingComponents字段，如下所示：

{
  "usingComponents": {
    "toast": "/components/toast/toast"
  }
}