封装微信小程序消息提示框

在mpvue框架中，封装微信小程序消息提示框。快速开发，少敲代码。若要多次使用，建议封装

//新建toast.js文件(路径utils/toast.js)，封装函数
function showToast (params) {
  wx.showToast({
    title: params,
    icon: 'success',
    duration: 2000
  })
}
export default {
  showToast
}

//在公共main.js，引入
import Vue from 'vue'
import App from './App'
import WxToast from './utils/toast' //引入

Vue.config.productionTip = false
Vue.prototype.$toast = WxToast

const app = new Vue(App)
app.$mount()

vue文件中使用

<template>
  <div>
    <button @click="fn">点击</button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    fn () {
      this.$toast.showToast('我是消息提示框')  //一行代码搞定
    }
  }
}
</script>

以上效果等价于：

<template>
  <div>
    <button @click="fn">点击</button>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    fn () {
      wx.showToast({
        title: '我是消息提示框',
        icon: 'success',
        duration: 2000
      })
    }
  }
}
</script>