微信小程序之界面交互API07
关于界面交互,在官方文档上提供了API来
wx.showToast(Object object) 土司(只有提示,会在延迟时间过后消失)!
显示消息提示框
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
title | string | 是 | 提示的内容 | ||
icon | string | 'success' | 否 | 图标 | |
image | string | 否 | 自定义图标的本地路径,image 的优先级高于 icon | 1.1.0 | |
duration | number | 1500 | 否 | 提示的延迟时间 | |
mask | boolean | false | 否 | 是否显示透明蒙层,防止触摸穿透 | |
success | function | 否 | 接口调用成功的回调函数 | ||
fail | function | 否 | 接口调用失败的回调函数 | ||
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.icon 的合法值
值 | 说明 | 最低版本 |
---|---|---|
success | 显示成功图标,此时 title 文本最多显示 7 个汉字长度 | |
loading | 显示加载图标,此时 title 文本最多显示 7 个汉字长度 | |
none | 不显示图标,此时 title 文本最多可显示两行,1.9.0及以上版本支持 |
示例代码
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
注意
- wx.showLoading 和 wx.showToast 同时只能显示一个
- wx.showToast 应与 wx.hideToast 配对使用
给我们开发者进行调用,唯一不足的是官方文档没有把界面交互的效果展示出来,只是为我们提供了代码,和参数的属性.
wx.showModal(Object object) 一个包含确认和取消的提示消息框
显示模态对话框
参数
Object object
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
title | string | 否 | 提示的标题 | |
content | string | 否 | 提示的内容 | |
showCancel | boolean | true | 否 | 是否显示取消按钮 |
cancelText | string | '取消' | 否 | 取消按钮的文字,最多 4 个字符 |
cancelColor | string | #000000 | 否 | 取消按钮的文字颜色,必须是 16 进制格式的颜色字符串 |
confirmText | string | '确定' | 否 | 确认按钮的文字,最多 4 个字符 |
confirmColor | string | #576B95 | 否 | 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
object.success 回调函数
参数
Object res
属性 | 类型 | 说明 | 最低版本 |
---|---|---|---|
confirm | boolean | 为 true 时,表示用户点击了确定按钮 | |
cancel | boolean | 为 true 时,表示用户点击了取消(用于 Android 系统区分点击蒙层关闭还是点击取消按钮关闭) | 1.1.0 |
示例代码
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
注意
- Android 6.7.2 以下版本,点击取消或蒙层时,回调 fail, errMsg 为 "fail cancel";
- Android 6.7.2 及以上版本 和 iOS 点击蒙层不会关闭模态弹窗,所以尽量避免使用「取消」分支中实现业务逻辑
-
wx.showLoading(Object object)会进入到一个加载的状态,在定时器的规定事件内出现一个加载中的提示
基础库 1.1.0 开始支持,低版本需做兼容处理。
显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
参数
Object object
属性 类型 默认值 必填 说明 title string 是 提示的内容 mask boolean false 否 是否显示透明蒙层,防止触摸穿透 success function 否 接口调用成功的回调函数 fail function 否 接口调用失败的回调函数 complete function 否 接口调用结束的回调函数(调用成功、失败都会执行) 示例代码
wx.showLoading({ title: '加载中', }) setTimeout(function () { wx.hideLoading() }, 2000)
注意
- wx.showLoading 和 wx.showToast 同时只能显示一个
- wx.showLoading 应与 wx.hideLoading 配对使用
更多内容请参考官方文档API:https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
微信小程序基本组件总结
组件的基本用法
语法问题
组件的使用是类似于HTML的方式(有不同),组件使用的严格的XML标准(开闭标签问题)
组件的分类
-
功能性的组件
-
完成具体功能的
-
-
布局类型的组件
-
用来完成页面结构的(DIV)
-
-
API 类型(使用的角度)
-
wx.showModal
-
通过调用一个方法来使用的
-