微信小程序自定义提示Toast提示组件

一、首先我们来看官方提供的wx.showToast(Object object)方法：

（官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html）

 很明显存在两个问题：

提示文字最多只支持7个字符长度 提示图标只支持两种：success和loading

这并不能满足我们的业务需求，所以接下来实现自定义提示组件（下面是github地址，需要的自行下载，欢迎star交流！）

地址：https://github.com/736755244/Toast

二、参照一般的组件写法（方法1）

1、提示框的样式和内容根据自己的业务需求进行设计

<!-- 组件页面 可根据自己需求添加更加丰富的内容，此处只展示图标和内容--> <view class="toast_content_box" wx:if="{{showToast}}"> <view class="toast_content"> <!-- 提示图标 --> <view class="toast_content_img {{iconType}}"></view> <!-- 提示内容 --> <view class="toast_content_text"> {{dataText}} </view> </view> </view>

2、功能实现

Component({ properties: { //此处可接收来自页面的一些参数 }, data: { dataText: 'default content',//提示文字，可默认 iconType:'',//提示图片类型 showToast: false//默认不弹出 }, methods: { //展示弹框 showDialog(data) { var _this = this _this.setData({ showToast: true,//展示弹框 dataText: data.content,//设置提示内容 iconType:data.icon//设置提示图片类型 }) // 定时器关闭弹框 setTimeout(function () { _this.setData({ showToast: false }) }, 1500); } } })

3、 页面引用

<!--wxml--> <toast id='toastDialog'></toast> <!--json--> "usingComponents": { "toast": "../../components/toast1/index" } <!--js--> onReady: function () { //获得Toast组件,此处获取的id与页面定义的组件id一致,也可以使用class属性 this.toastDialog = this.selectComponent("#toastDialog") }, showMes(){ this.toastDialog.showDialog({ content: 'xxxx',//可传入提示的内容 image:'xxxx',//可传入自定义的图片路径，优先级大于icon icon:'xxxx'//可传入提示图片的类型:success/error/warning等 }) }

 

 三、模块化写法（方法2）

1、不需要json文件，只需要js、wxml、wxss三个文件即可

2、提示框的样式和内容根据自己的业务需求进行设计

<!-- 自定义toast组件 --> <template name="toast"> <view class="toast_content_box" wx:if="{{ isHide }}"> <view class="toast_content"> <!-- 默认的提示图片 --> <view class="toast_content_img {{iconType}}" wx:if="{{!isUserImg}}"></view> <!-- 用户自定义提示图片 --> <view class="toast_content_myimg" wx:if="{{isUserImg}}"> <image src="{{imgPath}}"></image> </view> <!-- 内容 --> <view class="toast_content_text"> {{content}} </view> </view> </view> </template>

3、功能实现

let _compData = { '_toast_.isHide': false,// 控制组件显示隐藏 '_toast_.content': 'default content',// 显示的内容，可默认 '_toast_.isUserImg': false,// 控制是否显示用户自定义的图片 '_toast_.iconType': '',// 提示的图片类型 '_toast_.imgPath': ''// 用户自定义图片路径 } let toastPannel = { //展示逻辑 showTip: function (data) { let self = this; //赋值 this.setData({ '_toast_.isHide': true, '_toast_.content': data.content, '_toast_.isUserImg': data.image ? true : false, '_toast_.imgPath': data.image, '_toast_.iconType': data.icon || 'success' }); setTimeout(function () { //隐藏提示框 self.setData({ '_toast_.isHide': false }) }, 2000) }, } function ToastPannel() {//构造方法关联了当前页的方法及相关代码 // 拿到当前页面对象 let pages = getCurrentPages(); let curPage = pages[pages.length - 1]; this.__page = curPage; Object.assign(curPage, toastPannel); // 附加到page上 curPage.toastPannel = this; // 把组件的数据合并到页面的data对象中 curPage.setData(_compData); return this; } module.exports = { ToastPannel }

4、引入方法

<!--app.js--> //引入弹框组件 import { ToastPannel } from './components/toast2/index'; App({ ToastPannel,//公共组件 onLaunch: function () { //...... } }) <!--app.wxss--> //引入弹框样式 @import "./components/toast2/index.wxss"; <!--需要引入组件的页面wxml--> <import src="../../components/toast2/index.wxml"/> <template is="toast" data="{{ ..._toast_ }}"/> <!--需要引入组件的页面js--> const app=getApp();获取app实例 Page({ data: { //.... }, onLoad(){ new app.ToastPannel()//在onload中实例化 }, showMesSuc(){ //showtip是组件中的方法，这里可以直接调用 this.showTip({ image:"xxxxx",//可自定义显示的图片路径，优先级大于icon icon: "xxxxx",//可以传入success、error、warning等定义好的图标格式 content:"xxxxxxx"//可传入自定义的提示内容 }) } })

四、带动画效果

官方文档关于动画说明：https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html

1、把之前两种方法的控制弹框显示的字段去掉，替换成animation属性（默认弹框透明度为0）

<!-- 此处不用字段来控制是否展示弹框，使用动画来设置opacity透明度来完成 --> <view class="toast_content_box" animation="{{animationData}}"> <view class="toast_content"> <!-- 默认提示图标 --> <view class="toast_content_img {{iconType}}" wx:if="{{!isUserImg}}"></view> <!-- 用户自定义提示图片 --> <view class="toast_content_myimg" wx:if="{{isUserImg}}"> <image src="{{imgPath}}"></image> </view> <!-- 提示内容 --> <view class="toast_content_text"> {{dataText}} </view> </view> </view>

2、 实现方法

Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, properties: { //..... }, data: { animationData: {},//控制动画效果 dataText: '', icon:'', showToast: false, isUserImg:false, imgPath:'' }, methods: { //展示弹框 showDialog(data) { var _this = this //创建动画 var animation = wx.createAnimation({ duration: 300, timingFunction: 'ease', }) _this.animation = animation animation.opacity(1).step()//透明度由0=>1 _this.setData({ animationData: animation.export(), showToast: true, dataText: data.content,//设置提示内容 isUserImg: data.image?true:false,//是否展示用户自定义图片 imgPath: data.image,//用户自定义图片 iconType:data.icon//设置提示图片类型 }) // 定时器关闭弹框 setTimeout(function () { animation.opacity(0).step()//透明度由1=>0 this.setData({ animationData: animation.export() }) }.bind(this), 2000) } } })

五、效果展示