微信小程序 自定义提示Toast提示组件

一、首先我们来看官方提供的wx.showToast(Object object)方法：

（官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html）

 很明显存在两个问题：

1. 提示文字最多只支持7个字符长度 
2. 提示图标只支持两种：success和loading

这并不能满足我们的业务需求，所以接下来实现自定义提示组件（下面是github地址，需要的自行下载，欢迎star交流！）

地址：https://github.com/736755244/Toast

二、参照一般的组件写法（方法1）

1、提示框的样式和内容根据自己的业务需求进行设计

<!-- 组件页面 可根据自己需求添加更加丰富的内容，此处只展示图标和内容-->
<view class="toast_content_box" wx:if="{{showToast}}">  
  <view class="toast_content">  
    <!-- 提示图标 -->
    <view class="toast_content_img {{iconType}}"></view>
    <!-- 提示内容 -->
    <view class="toast_content_text">  
       {{dataText}}
    </view>  
  </view>  
</view> 

2、功能实现

Component({
  properties: {
     //此处可接收来自页面的一些参数
  },
  data: {
    dataText: 'default content',//提示文字，可默认
    iconType:'',//提示图片类型
    showToast: false//默认不弹出
  },
  methods: {
    //展示弹框
    showDialog(data) {
      var _this = this
      _this.setData({
        showToast: true,//展示弹框
        dataText: data.content,//设置提示内容
        iconType:data.icon//设置提示图片类型
      })
      // 定时器关闭弹框  
      setTimeout(function () {
        _this.setData({
          showToast: false
        })
      }, 1500);
    }
  }
})

3、 页面引用

<!--wxml--> 
<toast id='toastDialog'></toast>

<!--json-->
"usingComponents": {
   "toast": "../../components/toast1/index"
}

<!--js-->
onReady: function () {
    //获得Toast组件,此处获取的id与页面定义的组件id一致,也可以使用class属性
    this.toastDialog = this.selectComponent("#toastDialog")
},
showMes(){
  this.toastDialog.showDialog({
    content: 'xxxx',//可传入提示的内容
    image:'xxxx',//可传入自定义的图片路径，优先级大于icon
    icon:'xxxx'//可传入提示图片的类型:success/error/warning等
  })
}

 

 三、模块化写法（方法2）

1、不需要json文件，只需要js、wxml、wxss三个文件即可

2、提示框的样式和内容根据自己的业务需求进行设计

<!-- 自定义toast组件 -->
<template name="toast"> 
  <view class="toast_content_box" wx:if="{{ isHide }}">  
    <view class="toast_content">
      <!-- 默认的提示图片 -->
      <view class="toast_content_img {{iconType}}" wx:if="{{!isUserImg}}"></view>
      <!-- 用户自定义提示图片 -->
      <view class="toast_content_myimg" wx:if="{{isUserImg}}">
        <image src="{{imgPath}}"></image>
      </view>
      <!-- 内容 -->
      <view class="toast_content_text">  
        {{content}} 
      </view>  
    </view>  
  </view> 
</template> 

3、功能实现

let _compData = {
  '_toast_.isHide': false,// 控制组件显示隐藏
  '_toast_.content': 'default content',// 显示的内容，可默认
  '_toast_.isUserImg': false,// 控制是否显示用户自定义的图片
  '_toast_.iconType': '',// 提示的图片类型
  '_toast_.imgPath': ''// 用户自定义图片路径
}
let toastPannel = {
  //展示逻辑
  showTip: function (data) {
    let self = this;
    //赋值
    this.setData({
      '_toast_.isHide': true,
      '_toast_.content': data.content,
      '_toast_.isUserImg': data.image ? true : false,
      '_toast_.imgPath': data.image,
      '_toast_.iconType': data.icon || 'success'
    });
    setTimeout(function () {
      //隐藏提示框
      self.setData({ 
        '_toast_.isHide': false 
      })
    }, 2000)
  },
}
function ToastPannel() {//构造方法关联了当前页的方法及相关代码
  // 拿到当前页面对象
  let pages = getCurrentPages();
  let curPage = pages[pages.length - 1];
  this.__page = curPage;
  Object.assign(curPage, toastPannel);
  // 附加到page上
  curPage.toastPannel = this;
  // 把组件的数据合并到页面的data对象中
  curPage.setData(_compData);
  return this;
}
module.exports = {
  ToastPannel
}

4、引入方法

<!--app.js-->
//引入弹框组件
import { ToastPannel } from './components/toast2/index';

App({
  ToastPannel,//公共组件
  onLaunch: function () {
    //......
  }
})

<!--app.wxss-->
//引入弹框样式
@import "./components/toast2/index.wxss"; 

<!--需要引入组件的页面wxml-->
<import src="../../components/toast2/index.wxml"/>
<template is="toast" data="{{ ..._toast_ }}"/>

<!--需要引入组件的页面js-->
const app=getApp();获取app实例
Page({
  data: {
    //....
  },
  onLoad(){
    new app.ToastPannel()//在onload中实例化
  },
  showMesSuc(){
    //showtip是组件中的方法，这里可以直接调用
    this.showTip({
      image:"xxxxx",//可自定义显示的图片路径，优先级大于icon
      icon: "xxxxx",//可以传入success、error、warning等定义好的图标格式
      content:"xxxxxxx"//可传入自定义的提示内容
    })
  }
})

四、带动画效果

官方文档关于动画说明：https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

1、把之前两种方法的控制弹框显示的字段去掉，替换成animation属性（默认弹框透明度为0）

<!-- 此处不用字段来控制是否展示弹框，使用动画来设置opacity透明度来完成 -->
<view class="toast_content_box" animation="{{animationData}}">  
  <view class="toast_content">  
    <!-- 默认提示图标 -->
    <view class="toast_content_img {{iconType}}" wx:if="{{!isUserImg}}"></view>
    <!-- 用户自定义提示图片 -->
    <view class="toast_content_myimg" wx:if="{{isUserImg}}">
      <image src="{{imgPath}}"></image>
    </view>
    <!-- 提示内容 -->
    <view class="toast_content_text">  
       {{dataText}}
    </view>  
  </view>  
</view> 

2、 实现方法

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持 
  },
  properties: {
     //.....
  },
  data: {
    animationData: {},//控制动画效果
    dataText: '',
    icon:'',
    showToast: false,
    isUserImg:false,
    imgPath:''
  },
  methods: {
    //展示弹框
    showDialog(data) {
      var _this = this
      //创建动画
      var animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      })
      _this.animation = animation
      animation.opacity(1).step()//透明度由0=>1
      
      _this.setData({
        animationData: animation.export(),
        showToast: true,
        dataText: data.content,//设置提示内容
        isUserImg: data.image?true:false,//是否展示用户自定义图片
        imgPath: data.image,//用户自定义图片
        iconType:data.icon//设置提示图片类型
      })
      // 定时器关闭弹框  
      setTimeout(function () {
        animation.opacity(0).step()//透明度由1=>0
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 2000)
    }
  }
})

五、效果展示