今天寫微信小程序突然發現一個尷尬的問題，請求報錯需要提示，就去小程序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.dialog.showToast('恭喜你，獲得了toast');},