微信小程序 自定义提示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、提示框的样式和内容根据自己的业务需求进行设计

  
    
    
    
    
      
       {{dataText}}
      
    
 

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、 页面引用

 



"usingComponents": {
   "toast": "../../components/toast1/index"
}


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、提示框的样式和内容根据自己的业务需求进行设计

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、引入方法

//引入弹框组件
import { ToastPannel } from './components/toast2/index';

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


//引入弹框样式
@import "./components/toast2/index.wxss";