《微信小程序开发从入门到实战》学习六十三

6.4?交互API

使用交互API可以在小程序中显示各种弹窗或动画，达到交互反馈的目的。

6.4.1 提示框API

使用wx.showToast接口可显示消息提示框。接口接受Object参。属性如下：

title（必填）? ? ? ? 提示的内容

icon? ? ? ? ? ? ? ? ? ? ? ?图标，可选值为success（默认）、loading和none

image? ? ? ? ? ? ? ? ? ? 自定义图标的本地路径，优先级高于icon

duration? ? ? ? ? ? ? ? 提示框的显示时长，单位为毫秒，默认1500

mask? ? ? ? ? ? ? ? ? ? ?是否显示透明蒙层，防止触摸穿透

success

fail

complete

示例代码如下：

wx.showToast({

?????title:?'成功',

?????icon:'success',

?????duration:?2000

????})

使用wx.hideToast接口可提前关闭消息提示框。该接口接受Object参，支持三回调。

也可使用wx.showLoading接口显示loading提示框，该接口接受Object参，支持的属性包括title（必填）、mask、duration、三回调。当duration未填写时，loading提示框会一直存在，必须主动调用wx.hideLoading接口才能关闭提示框。

示例代码如下：?

????wx.showLoading({

??????title:?'加载中',

???})

???//?2秒后关闭提示框(通常的做法是在网络请求前显示提示框，然后在complete回调中关闭提示框)

???setTimeout(()?=>?{

?????wx.hideLoading()

???},2000)

6.4.2 对话框API

使用wx.showModal接口可显示模态对话框。接口接受Object参。属性如下：

title???????????????? ? ? ? 提示的标题

content? ? ? ? ? ? ? ? ?提示的内容

showCancel? ? ? ? ?是否显示取消按钮，默认true

cancelText? ? ? ? ? ? 取消按钮的文字，最多四字符，默认取消

cancelColor? ? ? ? ? 取消按钮的文字颜色，默认#000000

confirmText? ? ? ? ? ?确认按钮的文字，最多四字符，默认确认

confirmColor? ? ? ? ?确认按钮的文字颜色，默认#576B95

success

fail

complete

示例代码如下：

???wx.showModal({

????title:?'提示',

????content:?'这是一个事态弹窗',

????success(res){

?????if?(res.confirm)?{

????????console.log('用户单击确定')

?????}else?if?(res.cancel)?{

???????console.log('用户单击取消')

?????}

????},

????complete:?(res)?=>?{

??????if?(res.cancel)?{

????????

??????}

??

??????if?(res.confirm)?{

????????

??????}

????}

??})