微信小程序实例：开发showToast消息提示接口

最新推荐文章于 2024-08-09 11:27:38 发布

草灯

最新推荐文章于 2024-08-09 11:27:38 发布

阅读量5w

点赞数 18

分类专栏： web前端微信开发小程序文章标签：微信小程序

本文链接：https://blog.csdn.net/eadio/article/details/54616595

版权

本文介绍如何在微信小程序中实现自定义的wx.showToast接口，以满足个性化提示需求。内容包括无图标纯文字提示、指定图标、设置延迟时间、控制遮罩层以及使用回调函数。同时提供模板代码结构及测试示例。

摘要由CSDN通过智能技术生成

相信在学习小程序文档或者已经创建项目的开发员们，都很清楚小程序的wx.showToast接口只提供了两种icon【success和loading】展示形式，那假如我想要的是不要图标只要存粹的文字提醒呢？或者是我不要微信单方面提供的那种图片呢？想要自己指定的情况呢？这时候要怎么办..

这几天我根据wx.showToast接口提供的参数，跟着写了个消息提醒模板，

1、如果没有指定icon图标地址，那么就是单纯的显示文字提示，否则就是图标+文字的模式，这时候就要确保icon指向的图片地址是正确的啦。

2、如果没有指定duration提示的延迟时间，默认是1.5s，而我设置的最大值10s是不会自动隐藏消息提示的，除非手动hideToast. 单位：毫秒

3、如果没有指定mask遮罩，默认是跟着显示的，防止触摸穿透

4、如果没有指定cb回调函数，默认直接显示消息提醒，否则可以在等消息提示结束后即刻处理一些其他业务：例如地址跳转，改变订单状态等等

以下是整个模板代码结构：

showToast.wxml：：

<template name="showToast">
  <block wx:if="{
  {showToast.isShow? showToast.isShow: false}}">
    <view class="toast-bg" wx:if="{
  {showToast.mask==false? false : true}}"></view>
    <view class="toast-center">
      <view class="toast">
        <image class="toast-icon" src="{
  {showToast.icon}}" mode="scaleToFill" wx:if="{
  {showToast.icon}}" />
        <text class="toast-text">{
  {showToast.title}}</text>
      </view>
    </view>
  &