前言：小程序中提供了很多种快捷方便的弹窗API供开发者使用，例如wx.showToast，wx.showModal，wx.showActionSheet，wx.showLoading还有wxml中的loading标签。

 

一、直接上代码

<!-- test.wxml -->
<view class="content"><button bindtap="popSuccessTest">成功提示弹窗</button><button bindtap="popMaskTest">带透明蒙层的弹窗</button><button bindtap="popTest">纯文字弹窗</button><button bindtap="popCustomIcon">自定义图标</button><button bindtap="popConfirm">confirm的弹窗</button><button bindtap="popLoading">加载弹窗</button><button bindtap="popSelect">选择框弹窗</button>
</view>

//test.js
Page({popSuccessTest: function () {wx.showToast({title: '成功提示弹窗',icon: '',     //默认值是success,就算没有icon这个值，就算有其他值最终也显示successduration: 2000,      //停留时间})},popMaskTest: function () {wx.showToast({title: '带蒙层的弹窗',     duration: 2000,    mask:true    //是否有透明蒙层，默认为false //如果有透明蒙层，弹窗的期间不能点击文档内容 })},popTest: function(){wx.showToast({title: '纯文字弹窗',icon: 'none',    //如果要纯文本，不要icon，将值设为'none'duration: 2000     })  },popCustomIcon: function () {wx.showToast({title: '自定义图标弹窗',image: '../../static/image/icon.png',  //image的优先级会高于iconduration: 2000     })},popConfirm: function(){wx.showModal({title: 'confirm的弹窗',content: '确认要删除该项吗？',success: function (res) {if (res.confirm) {  console.log('点击确认回调')} else {   console.log('点击取消回调')}}})},popLoading: function(){wx.showLoading({title:'加载中...'});},popSelect: function(){wx.showActionSheet({itemList: ['A', 'B', 'C'],success: function (res) {console.log(res);}})}
});

实现效果：

 

 

 

二、重点解析

①、wx.showToast中比较重要的属性

title: '弹窗文字内容',

icon: 弹窗图标默认值是success，当没有这个属性时，或者当值为''，或者为其他值时(设置了error,warning都无效)都最终为success。如果要纯文本，不要icon，将值设为'none'

image: 自定义图标,image的优先级会高于icon

duration: 弹窗停留时间,

mask: 是否有透明蒙层，默认为false ，如果有透明蒙层，弹窗的期间不能点击弹窗后面的文档内容

 

②、wx.showLoading注意点

使用wx.showLoading触发的弹窗，需要用wx.hideLoading()来关闭。