常见界面`API`

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)
},