微信小程序自定義toast的實現

今天寫微信小程序突然發現一個尷尬的問題，請求報錯需要提示，就去小程序API里找，可悲的小程序的toast並不能滿足我的需求，原生提供的方法調用如下

wx.showToast({
   title: '成功',
   icon: 'succes',
   duration: 1000,
   mask:true
})

下面是官方API的說明

可以看到支持的圖標只有兩種，連基本的warning和error都沒有，最可悲的是title最多只支持7個漢字的長度，完全不能忍啊，現在哪個框架里還沒有個正兒八經提示框的組件，想想還是自己寫一個算了，下面是效果圖

下面來說下小程序實現自定義公共組件的方法，以自定義toast為例

1、新建toast組件

在toast.json里修改如下，設置為組件

{
  "component": true
}

toast.wxml

<view class='wx-toast-box' animation="{{animationData}}">
  <view class='wx-toast-content'>
    <view class='wx-toast-toast'>{{ content }}</view>
  </view>
</view>

定義樣式，toast.wxss，這里使用flex布局，代碼很簡單，也沒什么好說的，直接貼上

.wx-toast-box{
  display: flex;
  width: 100%;
  justify-content: center;
  position: fixed;
  z-index: 999;
  bottom:80rpx;
  opacity: 0;
}
.wx-toast-content{
  max-width: 80%;
  border-radius:30rpx;
  padding: 30rpx;
  background: rgba(0, 0, 0, 0.6);
}
.wx-toast-toast{
  height: 100%;
  width: 100%;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}

toast.js

Component({
  options: {
    multipleSlots: true // 在組件定義時的選項中啟用多slot支持 
  },
  /** 
   * 私有數據,組件的初始數據 
   * 可用於模版渲染 
   */
  data: { // 彈窗顯示控制 
    animationData: {},
    content: '提示內容'
  },
  /**
   * 組件的方法列表 
   */
  methods: {
    /** 
     * 顯示toast，定義動畫
     */
    showToast(val) {
      var animation = wx.createAnimation({
        duration: 300,
        timingFunction: 'ease',
      })
      this.animation = animation
      animation.opacity(1).step()
      this.setData({
        animationData: animation.export(),
        content: val
      })
      /**
       * 延時消失
       */
      setTimeout(function () {
        animation.opacity(0).step()
        this.setData({
          animationData: animation.export()
        })
      }.bind(this), 1500)
    }
  }
})

 

2、在父級組件中調用公共組件，以login頁面為例

在login.json中注冊組件

{
  "navigationBarTitleText": "登錄注冊",
  "usingComponents":{
    "toast": "../common/toast/toast"
  }
}

login.wxml中調用組件

<view>
  <toast id='toast'>
  </toast>
</view>

login.js里點擊登陸錄的時候調用顯示showDialog方法

onReady: function () {
    this.toast = this.selectComponent("#toast");
},
listenerLogin: function() {
    this.toast.showToast('恭喜你，獲得了toast');
},