「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」。

前言

为了适应和满足设计图的要求，必须要加上自定义提示，就是在顶部弹出对后端返回的内容和请求成功失败和提示（warning）的颜色区分，给用户带来视觉的效果体验因此开发出这套自定义组件（个人觉得微信的那一套够用，但是存在即合理）企业微信截图_16460596208820.png

提示方法的开发

既然是方法，那肯定是公用的，我是放到app.js里了，因为该方法几乎每个页面每个请求都有使用到，这样直接引入app.js然后调用即可，showTopTips为开启和关闭，msg为自定义消息，statu为状态，color为背景颜色

 methods: {
    showTopTips: function(statu,mssage) {
      let that = this;
      that.setData({
        showTopTips: false, //开启提示
        msg: mssage, //提示内容
        status:statu //提示状态
        color:statu == 'success' ? 'green':statu == 'warning' ?'yellow':'red',
      });
    }
  }

在showtip.jsmethods方法里创建功能方法showTopTips里边有二个参数status为当前状态比如正确：success,错误：error，提示：warning，并让它提示成功后延迟1.5后关闭（这用的是延时调用，也可以自行更改）

var that = this;
setTimeout(function() {
    that.setData({
      showTopTips: true,
      message: '',
      statu:''
      color:''
    });
}, 1500);

创建组件

创建showTips.wxml,一定要设置为固定样式，让它固定在一个位置这样方便统一和有直观性，用户一眼即可看到，颜色也要设置的醒目些。

<view class="toptips" style="{{background:color}}"  hidden="{{true}}">{{message}}</view>
.toptips {
  position: fixed;
  top: 0;
  right: 0;
  padding: 5rpx;
  font-size: 14rpx;
  text-align: center;
  color: #fff;
  z-index: 500;
  word-wrap: break-word;
}

在app.json里的usingComponents里封装加载该组件方便所有的组件都调用

  "usingComponents": {
    "viTips": "/components/viTips/viTips",
  }

调用组件

在需要引入的wxml里引入该组件，一定要放在在文件代码内的顶部！

<viTips id='showToptips'></viTips>

在该wxml的js里调用该组件的方法首先是引入app.js，因为这个是单独的方法所以我也是放到顶部，也可以放到data里一样的。。

const app = getApp()

调用app.showTopTip方法，传入两个参数当前状态和提示语句

app.showTopTip('error','用户不存在/密码错误')

最后

上述方法也可以自行更改，有很多种写法，但是觉得这个是最简单的，如果有更好的用法，欢迎评论！

微信小程序灵活的自定义提示方法

前言

提示方法的开发

创建组件

调用组件

最后