wx.showToast(Object object)
- 显示消息提示框
- title - 提示信息
- icon - 提示图标；系统内置，数量教少
- image - 自定义图片；使用后配置项 icon 无效
- mask - 默认为 false；建议开启，增加透明遮罩层，避免事件穿透
- success - 成功后的回调函数
- fail - 识别后的回调函数
- complete - 完成后的回调函数
- 修改昵称后，延时1秒返回上级
wx.showToast({
title: '用户昵称修改成功',
success: () => {
setTimeout(() => {
wx.navigateBack({
delta: 1,
success: (res) => {},
fail: (res) => {},
complete: (res) => {},
})
}, 1000)
}
})
wx.hideToast(Object object)
. 隐藏消息提示框
wx.showLoading(Object object)
. 显示 loading 提示框
wx.hideLoading(Object object)
. 隐藏 loading 提示框
wx.showModal(Object object)
- 显示模态对话框；通过判断 res.confirm 还是 res.cancel 确定下一步操作
- title - 提示标题
- content - 提示内容
- editable - 可编辑；确认后在返回结果 res的 content 中获取
- placeholderText - 占位符，显示输入框时的提示文本，此时 content 相当于值
[] 使用编辑 editable 和占位 placeholderText 提供交互 - 修改个人信息
wx.showModal({
title: 'rename',
content: this.data.user.uname,
editable: true,
placeholderText: '8 chars',
complete: (res) => {
if (res.cancel) {
console.log('cancel', res);
}
if (res.confirm) {
console.log('confirm', res);
this.setData({
'user.uname': res.content
})
}
}
})
wx.showActionSheet(Object object)
- 可以看作是 radio / picker 的一种拓展
- 显示操作菜单；在事件对象 res 获取选中的列表 tapIndex
- alertText - 提示文案
- itemList - 待选列表项，长度最大为6
[] 选择性别
- 页面提供的 gender 数据，不直接参与页面渲染，可以作为静态数据声明
- alertText 用来给出提示信息
- 数据更新：全局状态、本地存储
data: {
userInfo: {
userGender: 'Male',
},
}
gender: ['Male', 'Female']
chooseGender() {
wx.showActionSheet({
alertText: '性别选择',
itemList: ['Male', 'Female'],
success: (res) => {
let userInfo = this.data.userInfo
userInfo.userGender = this.gender[res.tapIndex]
// 全局更新
app.globalData.userInfo = userInfo
// 本地存储同步更新
wx.setStorageSync('userInfo', userInfo)
this.setData({
userInfo
})
},
fail: (e) => {
wx.showToast({
title: '请稍后再试',
})
},
complete: () => {
wx.showToast({
title: '性别选择完毕',
})
}
})
}