预先说明：我用的colorUI的icon，如果没有用color UI，你可能需要引入一下color UI或者修改一下。
情况
众所周知，小程序的消息提示框带上图标只能显示7个汉字，很不方便。
在做小程序的时候发现这个问题，连返回的错误消息都输出不完，要你何用。。因此自己整一个消息组件。
效果展示：
代码：
toast.wxml
<view class="toast-mask"><view class="toast"><view class="toast-icon cuIcon-{{icon}}fill line-{{iconColor}} text-center"></view><view class="toast-title">{{title}}</view><view class="toast-content">{{content}}</view></view></view>
toast.wxss
@import '/colorui/main.wxss';@import '/colorui/icon.wxss';.toast-mask {position: fixed;z-index: 9999;top: 0;right: 0;bottom: 0;left: 0;/* background-color: rgba(0, 0, 0, 0.6); */display: flex;justify-content: center;align-items: center;}.toast {color: #fff;background: rgba(0, 0, 0, 0.7);border-radius: 4px;box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.3);display: flex;flex-direction: column;align-items: center; max-width: 65%;min-width: 45%;} .toast-icon {background: #fff;margin:20rpx 0;font-size: 120rpx;width: 100%;border-radius: 4rpx;}.toast-title {width: 80%;font-size: 32rpx;font-weight: bold;margin-bottom: 10rpx;text-align: center;}.toast-content {width: 90%;font-size: 28rpx;margin-bottom: 28rpx;text-align: center;}
toast.js
Component({properties: {icon: {type: String,value: ''},iconColor: {type: String,value: 'black'},title: {type: String,value: ''},content: {type: String,value: ''}},methods: {hideToast() {this.triggerEvent('hideToast')}}})
toast.json
{"component": true,"usingComponents": {}}
使用方法：
假设要在“user”这个页面中使用
复制上面的代码，创建好toast组件
在的user.json中引入toast组件
{"usingComponents": {"toast": "/components/toast/toast"}}
在user.wxml使用toast组件
<toast wx:if="{{showToast}}" icon="{{toastIcon}}" iconColor="{{toastColor}}" title="{{toastTitle}}" content="{{toastContent}}" bind:hideToast="onHideToast"></toast>
在user.js的data中加上如下变量
showToast: false, // 是否显示toasttoastIcon: 'warn', // toast图标toastColor:'yellow', //图标颜色toastTitle: '测试标题',toastContent: '测试内容测试内容',
在user.js加上如下方法
onShowToast(icon,color,title,content) {this.setData({showToast: true,toastIcon: icon,toastColor: color,toastTitle: title,toastContent: content})},onHideToast() {this.setData({showToast: false})},fastToast(icon,color,title,content){var that = this;that.onShowToast(icon,color,title,content);setTimeout(()=>{that.onHideToast()},2000);},
到此结束，想要调用的时候直接调用fastToast方法，把想要展示的标题、内容、图标和颜色作为参数传进去就可以了。
