微信小程序实用组件：自定义弹框toast

小程序提供的提示弹框没有错误，警告的样式只有success和loading的,但是在实际需求中需要很多的这样的提示框，简单的做了一个，供大家参考 
效果预览：

代码介绍： 
alert.js：

function alertShow(that, iconType, alertlable) {
    that.setData({
        isAlert: true,
        iconType: iconType,
        alertLable: alertlable
    });
    setTimeout(function (e) {
        that.setData({
            isAlert: false
        })
    }, 1500)
}
module.exports = {
    alertShow: alertShow
}

alert.wxml

<view wx:if="{{isAlert}}" style="position:fixed;margin: auto;left: 0;right: 0;top: 0;bottom: 0;width: 70%;height: 22%;background-color: rgba(66, 66, 66, 0.9); text-align: center;border-radius: 10rpx;z-index:9999">
  <icon type="{{iconType}}" color="White" size="45" style="margin-top:5%;"></icon>
  <view style="color:white; width:80%;margin-left:10%;margin-top:5%">
    {{alertLable}}
  </view>
</view>

使用界面：

//index.js
//获取应用实例
var Show = require("../../utils/alert/alert.js");
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  warn: function (e) {
    Show.alertShow(this, "warn", "这是警告框");
    // 第一个参数是this，
    // 第二个参数是提示框种类具体可参照icon的type
    // 第三个参数是提示框的文字
  },
   info: function (e) {
    Show.alertShow(this, "info", "这提示框");
  },
   success: function (e) {
    Show.alertShow(this, "success", "这是成功框");
  },
   waiting: function (e) {
    Show.alertShow(this, "waiting", "这是等待框");
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function (userInfo) {
      //更新数据
      that.setData({
        userInfo: userInfo
      })
    })
  }
})

<!--index.wxml-->
<view class="container">
  <view bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <view bindtap="warn" class="item">
      警告框
    </view>
    <view bindtap="success" class="item">
      提示框
    </view>
    <view bindtap="info" class="item">
      成功框
    </view>
    <view bindtap="waiting" class="item">
      等待框
    </view>
  </view>
</view>
<!--引入alert-->
<include src="../../utils/alert/alert.wxml" />

文件下载：自定义弹框.zip