1、常见界面API
官方文档
https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
小程序提供的界面API
包含了丰富的接口,可以满足大部分的项目场景
- 交互
- 导航栏
- 背景
Tab Bar
- 字体
- 下拉刷新
- 滚动
- 动画
- 置顶
- 自定义组件
- 菜单
- 窗口
(1)交互
wx.showToast(Object object)
作用描述:展示一个结果信息提示
wx.showToast({
title: '注册完成',
icon: 'success'
})
wx.showLoading(Object object)
作用描述:展示一个过程信息,最终这个过程完成后需要调用wx.hideLoading()
隐藏当前加载窗口
wx.hideLoading()
作用描述:隐藏加载窗口
// 展示加载窗口,这个窗口不会自动隐藏
wx.showLoading({
title: "提示信息"
})
// 其他的某些操作,加载完数据之后,主动调用api接口隐藏
wx.hideLoading()
wx.showModal(Object object)
作用描述:展示一个交互模态框
// 展示模态框
wx.showModal({
title: "清空历史记录",
content: "确定要清空历史记录吗?",
success(res) {
console.log(res)
if(res.confirm) {
console.log("用户清空历史记录")
} else {
console.log("用户取消了操作")
}
}
})
wx.showActionSheet(Object object)
作用描述:展示一个行为交互对话框
// 展示行为交互对话框
wx.showActionSheet({
itemList: ["拍照", "相册"],
success(res) {
console.log(res)
}
})
(2)导航栏
导航栏除了可以在配置文件中进行静态配置,也可以通过API
函数完成脚本修改(使用较多)
wx.setNavigationBarTitle(Object object)
作用描述:通过脚本设置页面标题,通话故事跳转到故事列表页面动态设置页面标题
// 设置页面标题
wx.setNavigationBarTitle({
title: classify,
})
wx.showNavigationBarLoading()
作用描述:展示标题栏上的加载动画,一旦展示不会自动隐藏
wx.hideNavigationBarLoading()
作用描述:隐藏标题栏上的加载动画
(3)Tab Bar
底部导航
wx.showTabBarRedDot(Object object)
wx.hideTabBarRedDot(Object object)
作用描述:tabbar
的红点提示,一般提示导航页面存在更新数据
Page({
onHide() {
wx.showTabBarRedDot({
index:0
})
},
onShow() {
wx.hideTabBarRedDot({
index: 0
})
}
})
wx.setTabBarBadge(Object obj)
wx.removeTabBarBadge(Object obj)
作用描述:添加或者移除tab bar
导航条上的徽章消息
// mine.js
onLoad() {
wx.setTabBarBadge({
index: 1,
text: "10"
})
},
// message.js
onLoad(){
wx.removeTabBarBadge({
index: 1
})
}
wx.showTabBar()
wx.hideTabBar()
作用描述:用于显示/隐藏 tabbar
底部导航
onLoad() {
......
wx.hideTabBar()
setTimeout(function() {
wx.showTabBar({animation: true})
}, 2000)
},