小程序 | 13-弹窗和Toast
小程序 | 13-弹窗和Toast
1. showToast
Toast API 文档
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
Toaset 可以设置的内容如下：
// pages/about/about.js
Page({
onBtnClick(event){
wx.showToast({
title: '正在加载ing。。。',
duration:2000,
icon:"loading",
// 自定义展示的图片——会覆盖 icon
// image:"/assets/tabbar/faxian.png"
})
}
})
2. showModel
showModal API 的文档:
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showModal.html
// pages/about/about.js
Page({
onBtnClick(event) {
wx.showModal({
cancelColor: '#999999',
title:'标题',
content:'内容',
success:function(res){
console.log(res)
if(res.cancel){
console.log("用户点击了取消按钮")
}
if(res.confirm){
console.log("用户点击了确定按钮")
}
}
})
}
})
3. showLoading
showLoading API 文档:
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
// pages/about/about.js
Page({
onBtnClick(event) {
wx.showLoading({
title: '加载中',
})
// 延时 1500ms 后关闭 loading
setTimeout(() => {
wx.hideLoading()
},1500)
}
})showLoading 与 Toast 比，不会自动消失。想关闭 loading 时必须主动调用 wx.hideLoading()
4. showActionSheet
showActionSheet API 文档:
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showActionSheet.html
// pages/about/about.js
Page({
onBtnClick(event) {
wx.showActionSheet({
itemList: ["相册","拍摄"],
itemColor:'#ff0000',
success:function(res){
console.log(res)
const clickIndex = res.tapIndex
console.log("被点击的条目索引是：",clickIndex)
}
})
}
})5. 分享弹窗
5.1. onShareAppMessage
onShareAppMessage API 文档:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onshareappmessageobject-object
在页面的 js 文件中会有： onShareAppMessage(Object object) 回调，当用户点击页面右上角的默认分享按钮时，会触发该回调。
用于监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。
注意：只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
参数 Object object: 中包含如下内容
此事件处理函数需要 return 一个 Object，用于自定义转发内容，返回内容如下：
示例代码:
Page({
onShareAppMessage: function (res) {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})
5.2. 分享按钮
如果我们需要让用户点击指定的按钮触发分享，则可以使用下面的方式。
<button open-type="share">点击分享</button>用户点击该按钮之后，效果同前一小节中的效果。
腾讯云开发者
