微信小程序自定义的toast样式比较单一，而且不一定符合每个人的需求。比如以下这几种或者其他样式
在小程序中实现上面的方法并不难，难点主要是如何实现像普通html中那样定义一个公用方法，然后每个页面都能复用。
下面具体说明如何实现上图中的提示样式
一、先上已经做好的项目结构，showToast文件夹即公用的提示文件，包含wxml, js，wxss三个文件
1. showToast.wxml
template name="toast" view class="toast-content-wrap" wx:if="{{isShowToast}}" view class="toast-content" i wx:if="{{iconToast!==''&&!imageToast}}" class="iconfont {{iconToast}}"/i image src="{{imageToast}}" class="toast-loading" wx:if="{{imageToast}}"/image view class="content-text"{{textToast}}/view /view /view/template
2.showToast.wxss
.toast-content-wrap { display: flex; position: fixed; height: 100%; width: 100%; justify-content: center; align-items: center; z-index: 999;}.toast-content { height: 196rpx; width: 360rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #d2d2d2; background: rgba(0, 0, 0, 0.90); border-radius: 8px;}.toast-content .iconfont { margin-bottom: 30rpx; font-size: 60rpx;}.toast-content .content-text { font-size: 16px;}.toast-loading { width: 50 rpx; height: 50 rpx; margin-bottom: 30rpx;}3.showToast.js
let showAlert = { show: function(data) { var that = this; this.setData({ '_toast_.isShowToast': true, '_toast_.iconToast': data.iconToast, '_toast_.imageToast': data.imageToast, '_toast_.textToast': data.textToast }); if (data.imageToast !== 'loading.gif') { setTimeout(function() { that.setData({ '_toast_.isShowToast': false }) }, 1500) } if (data.close === true) { that.setData({ '_toast_.isShowToast': false }) } }}function ShowAlert() { let pages = getCurrentPages(); let curPage = pages[pages.length - 1]; Object.assign(curPage, showAlert) curPage.showAlert = this; curPage.setData({ '_toast_.isShowToast': false, '_toast_.iconToast': '', '_toast_.imageToast': '', '_toast_.textToast': '' }) return this;}module.exports = { ShowAlert}
4.字体图标 iconfont.wxss
@font-face { font-family: "iconfont"; src: url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAc8AAsAAAAACsQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAAQwAAAFZW7k6BY21hcAAAAYAAAACAAAAB1qrepdBnbHlmAAACAAAAAxwAAAQo5wvVEGhlYWQAAAUcAAAALwAAADYRIR5BaGhlYQAABUwAAAAdAAAAJAhxBBtobXR4AAAFbAAAABYAAAAcHHwAAGxvY2EAAAWEAAAAEAAAABADgASQbWF4cAAABZQAAAAfAAAAIAEXAGNuYW1lAAAFtAAAAUUAAAJtPlT+fXBvc3QAAAb8AAAAQAAAAFEPFtOPeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkEWKcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGBwYKt7UMjf8b2CIYW5gaAAKM4LkAOLODAoAeJzFkcENwzAIRR+xG1UR6iQdpQPkkj18ScfllB0SMKnUTJBvPeSPQFgGeADFeTsV5IsQap6Vni9MPV/5uFeeDH5vJqa2bOu+R7Xx534Sr1Ze/YSrPq0wej8ycpvkvtFXaY/z6eJH2ok/0UhiKyZJbMs0ia3ZkkTvtiYMB9znHPF4nJVT32sUVxi93717Zza/ZrOzO3Mzszs7mRl3ZqNmjbObXZdqsmBFjVurFIKikSgKimhEBBVsCIJY1AdBaPvUhyS0qU+F0uKDNYb2of4NBUlp8S8Qn+JNv81WaUEEZy6Hb853uPecO/cSTsj6n+wxGyAZUiLbycfkECGgbAFfow54UbVMt4DhcUNkNRYFkacGfpntAuErWTOuVUOhqEoKNChAxYtrUZlGMFodox9BbDoAVs7+TC/mdXYfugeiwi05QefBcIN8amxY7t86no0HM8mrvbpu6fq9pMJ5ktJESoMLwuziXd2KXOQp23jsDlEXeq3Ibh3tG8zpJ7+oXnSKogtgbg4yuUHtu/G0ncZxwzYzuqX29yUH7L5gUxau/t0zkOl1wr8IPgpmXUg8YFMkiWnzJMK0k5i2GnbCYBG0q0pcY+/gIqw0MLJCCfxwG+BQ6yFmhUpcAMgqqoiwU6b/Ei1nJAxHHFhyRMq2U8K5nR8pFkfycL5gtgmz8LVuTi9M9WUzWl63ksK5P/TtzPKlMz9eg9MHdw9enoym56fgxPz08YWT9LpwCsNOXr7qt2zXtqDy/++X9MiXR4c3U8oSwJX9n19ZxJlbt+SF3dfjs+PGoTuLdw4fvot7kMA9eMqesibpJx4Zwj9OoAyRBmoBxBjUG8xDxBoZ5BuMZ+PRdNU3mBnXw0hR2TJfe/JkjXdw7Wf+fGnpOe8gzDSbnO1hLPAZzL0VIb6VIB7xfWj6vqz4foDSjqdH7He2j/QQQXLEbZ9AoppE1Eg9JAx9vPEEQo2KAiJKVuQ65wArKwCcy/WVh6uJxOrDDZRfPSs9g19K8kWJ7W33/qNd++GNChEeoXC2rfsQD3V8PRDwXg9M3izBrJwEnP7m+138tKHZAEIo+vie/cGOoYdhQriHC6dxZc/w8OylO7dsNF1JmwoEo+1GVAdVgwDbKtvx+kqjRWmrAafkN1YAnknvWu4BPiGTE/TcpzDzawUy3QmzR+7a1oRJOFCjs419MJFwjde3Lde1YKf8rfEJbFo9eIYu75Cvcj1p2Fkm5B+WaPojeJxjYGRgYABiqWLF3nh+m68M3CwMIHBte64Sgv6/mGUycyyQy8HABBIFAAkTCccAeJxjYGRgYG7438AQwzKZAQiAJCMDKmAHAGBRA5YAAAB4nGNhYGBgfsnAwDIZiBlQMQAhnAGYAAAAAAAAAHYA+AFCAYQByAIUeJxjYGRgYGBnCGdgYwABJiDmAkIGhv9gPgMAEhABewB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICdkYmRmZGFkZWRjZGdkYOBsYKtPDU5I7GEvTyxKC8zL505pTSTObk0nyWtIqOYgQEAuZYKgg==') format('woff'), url('iconfont.ttf?t=1519471650795') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont.svg?t=1519471650795#iconfont') format('svg'); /* iOS 4.1- */}.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.icon-warning:before { content: "e60c";}.icon-dui:before { content: "e600";}.icon-cuo:before { content: "e601";}
和loading.gif
二、使用(需要特别注意import时引入的目录结构要正确，根据自己项目结构更改)
1.在app.js(小程序公用js文件，可以通过getApp()方法获取app.js中的方法)中引入公用js，ShowAlert为提示公用对象
import { ShowAlert}from './resources/components/showToast/showToast';App({ ShowAlert, onLaunch: function () {}})2.在app.wxss中引入公用样式和字体图标
@import "resources/iconfont/iconfont.wxss";@import "resources/components/showToast/showToast.wxss";3.在要使用的wxml文件中引入showToast.wxml
import src="../../resources/components/showToast/showToast.wxml" /template is="toast" data="{{..._toast_}}"/4.在要使用的js文件的onload方法中声明ShowAlert
onLoad: function (options) { let app = getApp(); new app.ShowAlert();}5.在要使用的地方
//1.对错、警告字体图标，提示完会自动关闭this.show({ iconToast: 'icon-warning', // 对：icon-dui, 错：icon-cuo,警告：icon-warning textToast: '请输入手机号'}) //2.loading.gif加载,加载完需要手动关闭this.show({ iconToast: '', imageToast: '../../images/loading.gif', textToast: '加载中'})//关闭that.show({ close: true})到这里就ok了
本文参考https://www.cnblogs.com/Jacky-MYD/articles/7372365.html
