目前小程序官方提供的交互反饋組件只有Toast、Loading、Modal這3種线婚。

wx.showToast()

默認有success和loading兩種圖標可選，也可以自定義圖標盆均，設置好duration持續(xù)時間后可自動消失塞弊，或者主動調用wx.hideToast()來關閉。title設置過長會被隱藏部分內容泪姨。

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

wx.showLoading()

loading組件無圖標可選游沿，只有轉圈圈的圖標可用，而且必須調用wx.hideLoading()來關閉驴娃。同樣title設置過長文字會被隱藏奏候。

wx.showLoading({
  title: '加載中',
})
...
wx.hideLoading()

wx.showModal()

Modale組件功能就更豐富了一些〈匠ǎ可以設置title蔗草、content咒彤、confirm和cancel按鈕的內容和顏色，還有各自的回調函數(shù)等等咒精。title和content設置過長也會被完整顯示镶柱。在上一篇的《微信小程序開發(fā)之授權邏輯》中就用到了這種彈窗來讓用戶進行選擇操作。

wx.showModal({
  title: '提示',
  content: '這是一個模態(tài)彈窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用戶點擊確定')
    } else if (res.cancel) {
      console.log('用戶點擊取消')
    }
  }
})

不過在開發(fā)過程中模叙，總有一些提示性的信息需要一個更舒服的提示組件來展示歇拆。比如提示用戶電話號碼輸入錯誤、搜索內容不能為空范咨、無法打開地圖等等故觅。這些提示如果用上述的3種組件來展示，會很難受渠啊，也不優(yōu)美输吏，所以需要我們自己去開發(fā)一個新的提示組件，來滿足我們項目的需求替蛉。

個人提示組件myTopTips

網(wǎng)上其實有很多大廠開發(fā)的微信組件ui贯溅，可以直接集成到項目中，或者只提取出我們需要的部分躲查，以下我使用的topTips組件來源于有贊開源的組件它浅，zanui-weapp，基于其topTips組件镣煮，我將其樣式做了修改姐霍，添加了3種不同的提示類型：success、warning怎静、error邮弹，基本上滿足了我在項目中的使用。
項目中新建一個page蚓聘，命名為mytips腌乡，記得將其引用路徑從app.json中刪除，不然會有很多錯誤夜牡。參看我的另一篇博客《微信小程序開發(fā)之踩坑記錄》与纽。然后編輯mytips.js文件

<!-- mytips.js文件 -->
module.exports = {
  showMyTips(content = '', icon = '', options = {}) {
    let MyTips = this.data.MyTips || {};
    // 如果已經(jīng)有一個計時器在了，就清理掉先
    if (MyTips.timer) {
      clearTimeout(MyTips.timer);
      MyTips.timer = undefined;
    }
    if (typeof options === 'number') {
      options = {
        duration: options
      };
    }
    // options參數(shù)默認參數(shù)擴展
    options = Object.assign({
      duration: 3000
    }, options);
    // 設置定時器塘装，定時關閉topTips
    let timer = setTimeout(() => {
      this.setData({
        'MyTips.show': false,
        'MyTips.timer': undefined
      });
    }, options.duration);
    // 展示出topTips
    this.setData({
      MyTips: {
        show: true,
        content,
        icon,
        options,
        timer
      }
    });
  }
};

接下來編輯wxml和wxss文件

<!-- mytips.wxml文件 -->
 <template name='mytips'>
  <view class="mytips {{ MyTips.show ? 'mytips-show' : '' }}">
    <view class='mytips-box'>
      <text class='mytips-{{MyTips.icon}}'>{{ MyTips.content}}</text>
    </view>
  </view>
</template> 

<!-- mytips.wxss文件 -->
<!-- 圖標使用了base64的背景圖 -->
.mytips{position:fixed;top:10rpx;left:0;right: 0;z-index: 999;display: flex;justify-content: center;-webkit-transform:translateZ(0) translateY(-150%);transition:all .3s ease}
.mytips-show{-webkit-transform:translateZ(0) translateY(0)}
.mytips .mytips-box{padding: 12rpx 28rpx;background: #fff;box-shadow:0 2px 8px rgba(0,0,0,.2);border-radius: 8rpx;height:36rpx;}
.mytips .mytips-box text{padding-left:40rpx; font-size: 24rpx;line-height: 36rpx;height: 36rpx;display: block}
.mytips .mytips-box text.mytips-success{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAADh0lEQVRIia2WPYhcVRTHf+fc92ZXO4PBRkgsYiOaQIxEEXaJ4LIrCTbpIgQJiYQtLaIgBCstbCyCBsRCbbYJISQbP4gs+AEaggS2iIKspQEVETTz3rvnbzGzyc5zZrNj5hQP3rn3/H/349x7j00vA4CZY14CggiyQd3JlE2BZz+gFPOG7THZLmBbL4rfZfpJ6AfLvhwprtRFQ1klkgB3wFDUSNHjjAYKJTuZwk8a9phhCDHM1tuEVrPHGcs6k2RbA0oC6VGMs25phpGYYeDeN5RXEMcx+9FsEOiDIQJYMPfrZj6jMWDr0UKY+Yy5XwcWaCm0gMyZ2UVgagzOKJvqa82NAu4EX54AqGW+3NPu/3WnoeoY5sUSyCaBMBl3hGTmxVLVMbrT4Erg+FHH900K1njzeiaeA/4CcHyf40eVwMovCsrwNcN2jJMgw8zldFP1du35VKcpKfCbwHYDhH6pPXZ6yj5r+ARgRjdV79RFPlU0hSfsG4Pt0MtTw3ek7LOuFAftHmkmo0r1W3XKrxZVaR2lrx17WgN9QCkOeor0ZNwD0TCyxwdVmV9D0In0lRn724phIkXa68CO/w+DkD6uLR9DMB3leTOe2WT4DzvwYMv5pyz2GizaJqekB+PDypuXcspM1eX5IqdD2ny1HiqGOLPgWmNxzbHHHTvRlliHdb15OcrMVFOeK6M4FBabwQCSA7+1nNtc6dtMwz9F9UqWPt04TwMy+uTWbVhxrszFi1uAAfzqwFrba7C/UPoIoPGYB1bXoULLQkfcxVRTLI0BA1jz7Pmqt/ZKCCcduS933nRQtjgg1AhdDbSQMKZz+V6Ri8NbzXCXkT1fc8t+YVRuJPkbKfzYrdTcrFLzhIlnvXdLnhWcuEuCDE7CwLJfuOvV5jL+LqrnMX1+f90hTO+DHd8yid6+377a6k5DlfLpjff74MjEVBQXy5wOC94dF9YDGlXKp+tOg9mXYGFM5/I7sKEvhvXIjLOErWF/fyvVT8k1UNPsNO/8PKk38Y4ZiuoRKdZg8MVfg1iYLAwg5thw9No1zWVJLwDdCZC6SPPAZxudLaABXJJitxQrxqhUGm5Gv0ZVrEixG7hMS6E9w16QdCMsZmtvFgOt0hcaDeq1BVqtvVkMi1mTbgzt+5/KWwIF2aFOmVL9Ut9iwbA9hu0CHujH/yH6pb78UqS4UltDmRMpAHNoFcL/AsvcwfKVBFWTAAAAAElFTkSuQmCC) no-repeat left center/28rpx 28rpx;} 
.mytips .mytips-box text.mytips-warning{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACRElEQVRIib3WT2sVZxTH8c95xpCWFhQVuilo6Z9dVUQQRBClatNFuyt05dK2vom8iuJWXGRtF9WWkGwtFFp1JdJE6KoLS7spGuc+x8Xca9Jrkju3cvODgZnnnPN8zzwzz3lO5JKXqhVJFCLxHPvI4oJqQTiBD3FwGPIXHkm/KW5HtaLFHIKanVMpm4zYFTjwbRZfCx+LzratRrb0IKrrGt9NC/xIuo7zOyAmaTXC1ZoejQPLK67hU+n+a8DgfKZ7uDRuGAdeCm5jfpfJ2kjHo3VGGuzi92bwIz7ZOrh1Sd/Lam1i7vyDAxLhb+yf4F+j+ADrUDzFBlkt7R63mSQaRTO8n6SS1ZINPKUYkFwRTvcEdtrpj90+xdPJFQOKeeyzONUE0yqHjHlKNs7h6AxxIx3Nxrli4PNeX+J1FRj4oihOzXQ5R0oUJwuO7AFupHcLDu8h8J1XS9ts1RQ82UPgnwWP9xD4uKh+mXJbdCdld9XeUYHq16Lx/ZTb4m2cxUm8NVWajVuRN8li3eyrzVpU7xfP0FqcabUpGFi0oTtkItzAzz3D2+BIdAWj7RVR3Y3qpqB4A3NE+Eq/nyAzNZka/Q6pNlpfqnTATa0nl3tMMCesCWtdqhOyYwF/jJ7LmHU50wKe9QBP0r+ZLmN56+B2pe2OcFxY/V+YrkddVh0Tfho371RLH0a6oLqGB1Pg7qm+iXRR+n3bfP7TCA+bvlHnnc+JZtjqp8+EY7pW/9Aw5Imu1b8v/BDVStYuPpNshm/V6upS8AJ22r+NeHvxEQAAAABJRU5ErkJggg==) no-repeat left center/28rpx 28rpx;}
.mytips .mytips-box text.mytips-error{background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAACD0lEQVRIibWWz0tVQRTHP5NCJLoIqk3/RxBEUGKLQCjaFrgICWwhlBKC4KqNv/BHqzZFIChoi1qGC1dCLdpFi+CBYaKIiIqrOafFnZvXaaY743sNfLmPmXPO587c884co/w9yjlTPC4o9AI9wHXgKtBWMd8G1g2sKnwwsFPGMIHYaEBS6LzAoMCGgCZqX2FUoUsisWPAWwI/MkC+fgrcSQX2NQE6JYUndcBHrYJVoANBoMC1VsMq0B4f2Caw6Rl+FVg6A+CjwGdv7lCLbP+zu8GA44J7mRepMAszzud1YP1lCewQ2I8cxUgqtAIbjthYhcsI3K85/1EpAj1vAlaqH4E3CW8/5aDPAmtzsbWA3iPwLfX7iLcLC/MZMBXYQGAvJykcYM7Covs9lOovcITAUYaDWli2J3+n+RxfgYP2UEGvGca4Ag9cCt4I/xq5R6onR7pgAQuTGTs8ROB7JqyaNNMOOpEIbCDwNgEWTX0LUw46nQBcROBBDexVDFaxGXfQmRrgQwQ6Y5lqYVYSU9/CRM1OjxUulu1EKOCy1JS0AHTSxov3WPV6Oiew7Rl80YSyF9A7hU/e3N6p68ldUTfOEDxJCt2xFuPxf4A9rWui+lsIG/Djx9rEboFGE7CGwt2cvhQpOoFhgV8ZoC2BEYGOUFwFjAbqqzfXCdwDbgM3gSue+S6wBqwaWFE4gEibD/wGOu7Ykd5d0vYAAAAASUVORK5CYII=) no-repeat left center/28rpx 28rpx;}

文件編輯完之后急迂，就是頁面的引用了，其實現(xiàn)在來看蹦肴，引入自定義組件還是比較麻煩的一件事僚碎，每個用到的頁面都需單個引入，異常麻煩阴幌。不過我現(xiàn)在也沒有更好的解決方案勺阐，只能先這樣使用了卷中。
假如我們要在index頁面中使用這tips組件，則需要分別在index.wxml和index.js中引入該組件的內容渊抽，樣式文件mytips.wxss直接放到了app.wxss中進行引入蟆豫，所以該組件的樣式會在所有小程序頁面中覆蓋到，建議取的class類名個性一點懒闷，防止影響頁面樣式十减。

<!-- app.wxss文件中全局引入mytips.wxss樣式 -->
@import "/component/mytips/mytips.wxss";
...

<!-- index.wxml中引入mytips的模板 -->
<import src="path/to/component/mytips/mytips"/>
<template is="mytips" data="{{ MyTips }}"></template>
<view class='container'>
...
<view>

<!-- index.js中需要這樣引入，修改Page({})為如下愤估，其他數(shù)據(jù)不會受到影響 -->
const MyTips = require('path/to/component/mytips/mytips');
Page(Object.assign({}, MyTips, {
  data:{  },
  onLoad: function(){  }
}))

如上引入完畢后帮辟，在頁面中要使用該tips提示時，只需在js方法中

<!-- 第二個參數(shù)可選為：success,warning,error灵疮；第三個參數(shù)為顯示的時間 -->
showTips: function(){
  this.showMyTips('這里填需要提示內容', 'warning', 2000);
}

最后的提示效果如下：

warning.png

error.jpg