微信小程序自定义toast实现的方法

1. 概述

在开发微信小程序过程中，我们经常需要给用户一些提示信息，这个时候使用toast就比较合适了。微信小程序官方给出了很多组件，但不支持toast直接调用。因此，我们需要通过自定义实现toast效果。

2. 实现方法

2.1 手写Toast

我们可以通过手写一个Toast组件的方式实现自定义toast。具体实现如下：

 /* 在 app.js 中定义 showToast 和 hideToast 方法 */
App({
  showToast: function (title, duration=1500) {
    var that = this;
    that.globalData.toastTitle = title;
    that.globalData.toastDuration = duration;
    wx.showToast({
      title: title,
      icon: 'none',
      duration: duration
    })
  },
  hideToast: function () {
    wx.hideToast();
  }
});

在需要使用Toast的页面，在onLoad函数中调用方法：

onLoad: function (options) {
        getApp().showToast('上传中...');
}

在onHide函数中调用hideToast方法：

onHide: function () {
    getApp().hideToast();
},

这样我们就自定义了一个简单的Toast组件。我们可以根据需要修改Toast的样式。需要注意的是，Toast要在每一个页面中单独调用并绑定相关的生命周期。

2.2 使用第三方插件

另外，我们也可以使用第三方插件来实现自定义toast。在微信小程序官方给出的组件库中也有一些扩展了Toast功能的插件。例如： wx-toptips ，它是一个轻量级的气泡提示插件，可以用于小程序中。它的使用方法很简单，只需要引入js文件，然后在需要调用的页面中使用即可。

var Toptips = require('../../lib/wx-toptips/index');
Toptips('提示信息!', {
        duration: 1000,
        type: 'success'
})

这样我们就可以在我们的小程序中轻松实现自定义toast了。

3. 总结

以上是一些简单的自定义toast实现方法。如果我们要修改toast的样式，一般是通过修改样式表的方式，将Toast的样式进行修改。自定义toast功能在我们的小程序开发过程中比较常用，灵活使用能够给用户带来更好的使用体验。