前一篇文章封裝了http請(qǐng)求，這一篇教大家封裝toast勺届。

wx.showToast(OBJECT)

可以看到微信提供的showToast的icon只支持"success", "loading"某抓，這并不可能完全滿足，肯定還有waring 或者error的提示惰瓜。</br> 但是可以看到還提供了個(gè)image否副，可以傳圖片，這明擺著要我們自己封裝崎坊。所以有了以下思考：

• 使用icon不了备禀，使用icon可以，icon和image兼容使用怕圖標(biāo)風(fēng)格不一奈揍，所以最好全部用image曲尸，拋棄使用icon。
• 微信方法提供了success男翰，fail另患，complete的回調(diào)。但這三者都是方法執(zhí)行后回調(diào)（toast還沒(méi)隱藏）蛾绎±セ基本用不上。我們可能用上的場(chǎng)景是success成功后彈出提示租冠，然后等toast消失再回調(diào)執(zhí)行跳轉(zhuǎn)之類的操作鹏倘。

思考完后我們就開(kāi)始動(dòng)手吧。

磨刀不誤砍柴工肺稀，封裝好后才可以事半功倍第股。

找圖標(biāo)

前面說(shuō)了应民，我們拋棄使用微信的icon全部使用圖片话原，所有我們需要找一套提示的圖片，一般有：

• success
• error
• loading
• warning

常用這四個(gè)诲锹，根據(jù)需求自己添加即可繁仁。

去哪里找呢？其實(shí)去字體圖標(biāo)的網(wǎng)站都提供下載png圖片归园。

還可以自己設(shè)計(jì)一套黄虱。

不過(guò)圖片有幾個(gè)注意點(diǎn)

1. 圖標(biāo)要白色，應(yīng)為loading遮罩層是灰色的庸诱，默認(rèn)的提示字體也是白色的捻浦。
2. 尺寸1：1，不需要太大桥爽。也不要太小啦朱灿，200*200左右吧。

推薦個(gè)網(wǎng)址iconfont

選好圖標(biāo)后下載png格式圖片即可钠四，下載時(shí)候有尺寸跟顏色選擇盗扒。

[圖片上傳失敗...(image-7eb362-1510306485767)]

下載完后再根目錄建目錄/assets/icon 把圖標(biāo)圖片放好即可。

/utils/message.js

我們把toast，當(dāng)做工具類侣灶，放在工具目錄下甸祭，命名為message。

import es6 from '../lib/es6-promise.min.js'
//引入es6-promise 上github下就好
let def={
  timer:1500,//默認(rèn)顯示時(shí)間
  error: 'Message傳參錯(cuò)誤褥影。只傳title字符串或{title:"",timer""}對(duì)象'//默認(rèn)錯(cuò)誤提示
}
let message ={
  success:function (params){
    return new es6.Promise((resolve, reject) => {
      this.opera('success', params);
    })
  },
  error:function(params){
    return new es6.Promise((resolve, reject) => {
      this.opera('error', params);
    })
  },
  warning: function (params){
    return new es6.Promise((resolve, reject) => {
      this.opera('warning', params);
    })
  },
  loading: function (params){
    return new es6.Promise((resolve, reject) => {
      this.opera('loading', params);
    })
  },
  opera:function(type,params){
    var totastParams= {
      title: "",
      duration: 0
    }
    var result = new es6.Promise((resolve, reject) => {
      if (typeof (params) === 'string') {
        totastParams.title=params;
        totastParams.duration=def.timer;
        resolve(totastParams);
      } else if (typeof (params) === 'object' && params.title && params.timer && typeof (params.timer) === 'number') {
        totastParams.title = params.title;
        totastParams.duration = params.timer;
        resolve(totastParams)
      } else {
        reject()
      }
    })
    if (result._state==1){//傳參正確
      if (type == 'success') {//注意圖片的地址要寫(xiě)page頁(yè)面相對(duì)于圖片的地址池户，應(yīng)為引用的一般為頁(yè)面∥苯祝或者直接把圖片放在云上煞檩，直接填寫(xiě)外鏈更方便。注意填寫(xiě)服務(wù)器域名栅贴。
        totastParams.image = '../../assets/icon/success.png';
      } else if (type == 'error') {
        totastParams.image = '../../assets/icon/errot.png';
      } else if (type == 'warning') {
        totastParams.image = '../../assets/icon/warning.png';
      } else if (type == 'loading') {
        totastParams.loading = '../../assets/icon/loading.png';
      }
      return new es6.Promise((resolve, reject) => {
        totastParams.complete=function(){//添加提示消失后的回調(diào)
          setTimeout(function () {
            resolve();
          }, totastParams.duration)
        }
        console.log(totastParams);
        wx.showToast(totastParams)

      })
    } else {//傳參錯(cuò)誤
      console.log(def.error);
    }
    
  }
}

export default message;

使用

1. 先在app.js在引入

現(xiàn)在app.js全局引入：

import Message from './utils/message.js'
import config from './config.js'
App({
  onLaunch: function () {
    //......
  },
  Message:Message
})

然后就可以在page的每個(gè)頁(yè)面使用了：

//獲取應(yīng)用實(shí)例
const app = getApp()

app.Page({
  data: {
    
  }, 
  onLoad: function () {
    app.Message.success('成功').then(function(){//簡(jiǎn)單模式
        //toast隱藏后的操作斟湃。  
    })
    app.Message.success({title:'成功',timer:3000}).then(function(){//自定義模式
        //toast隱藏后的操作。  
    })
    //其他方法一樣
    //app.Message.error()
    //app.Message.warning().....
  }
});

是不是方便多了檐薯？

原文鏈接

未標(biāo)題-1.jpg