小程序开发之二（toast封装）

前一篇文章封装了http请求，这一篇教大家封装toast。

wx.showToast(OBJECT)

参数	类型	必填	说明	最低版本
title	String	是	提示的内容
icon	String	否	图标，有效值 "success", "loading"
image	String	否	自定义图标的本地路径，image 的优先级高于 icon	1.1.0
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

可以看到微信提供的showToast的icon只支持"success", "loading"，这并不可能完全满足，肯定还有waring 或者error的提示。</br> 但是可以看到还提供了个image，可以传图片，这明摆着要我们自己封装。所以有了以下思考：

• 使用icon不了，使用icon可以，icon和image兼容使用怕图标风格不一，所以最好全部用image，抛弃使用icon。
• 微信方法提供了success，fail，complete的回调。但这三者都是方法执行后回调（toast还没隐藏）。基本用不上。我们可能用上的场景是success成功后弹出提示，然后等toast消失再回调执行跳转之类的操作。

思考完后我们就开始动手吧。

磨刀不误砍柴工，封装好后才可以事半功倍。

找图标

前面说了，我们抛弃使用微信的icon全部使用图片，所有我们需要找一套提示的图片，一般有：

• success
• error
• loading
• warning

常用这四个，根据需求自己添加即可。

去哪里找呢？其实去字体图标的网站都提供下载png图片。

还可以自己设计一套。

不过图片有几个注意点

1. 图标要白色，应为loading遮罩层是灰色的，默认的提示字体也是白色的。
2. 尺寸1：1，不需要太大。也不要太小啦，200*200左右吧。

推荐个网址iconfont

选好图标后下载png格式图片即可，下载时候有尺寸跟颜色选择。

[图片上传失败...(image-7eb362-1510306485767)]

下载完后再根目录建目录/assets/icon 把图标图片放好即可。

/utils/message.js

我们把toast，当做工具类，放在工具目录下，命名为message。

import es6 from '../lib/es6-promise.min.js'
//引入es6-promise 上github下就好
let def={
  timer:1500,//默认显示时间
  error: 'Message传参错误。只传title字符串或{title:"",timer""}对象'//默认错误提示
}
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') {//注意图片的地址要写page页面相对于图片的地址，应为引用的一般为页面。或者直接把图片放在云上，直接填写外链更方便。注意填写服务器域名。
        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(){//添加提示消失后的回调
          setTimeout(function () {
            resolve();
          }, totastParams.duration)
        }
        console.log(totastParams);
        wx.showToast(totastParams)

      })
    } else {//传参错误
      console.log(def.error);
    }
    
  }
}

export default message;

使用

1. 先在app.js在引入

现在app.js全局引入：

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

然后就可以在page的每个页面使用了：

//获取应用实例
const app = getApp()

app.Page({
  data: {
    
  }, 
  onLoad: function () {
    app.Message.success('成功').then(function(){//简单模式
        //toast隐藏后的操作。  
    })
    app.Message.success({title:'成功',timer:3000}).then(function(){//自定义模式
        //toast隐藏后的操作。  
    })
    //其他方法一样
    //app.Message.error()
    //app.Message.warning().....
  }
});

是不是方便多了？

原文链接

未标题-1.jpg