三.常用界面api及案例
常用界面API:wx.showToast()、wx.showLoading()、wx.hideLoading()、wx.setNavigationBarTitle()
案例需求:请求接口,获取数据,进行数据渲染,添加点击事件,跳转页面,动态显示导航,使用交互api,完善页面加载效果
代码案例:
wx.showLoading({
title: '加载数据...',
})
wx.hideLoading()
showLoading 不会自动消失,需要hideLoading消失
wx.showToast({
title: '数据加载失败',
icon:'none',
image:"/imgs/laba.jpg",
duration:5000
})
showToast 提示信息
wx.setNavigationBarTitle({
title: classify,
})
setNavigationBarTitle动态设置顶部标题
四、授权
1.概述
(1)部分接口需要经过用户授权同意才能调用,比如获取用户信息,保存图片到相册等,我们把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。
(2)此类接口调用时:
-
如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
-
如果用户已授权,可以直接调用接口;
-
如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。
2.检测授权状态
wx.getSetting
在授权前,先检测授权状态,如果已经授权,直接调用相关接口,如果没有授权,出现授权弹窗
3.进行授权
wx.authorize
_record(){
wx.getSetting({
success(res){
console.log(res)
// 录音 res 有没有录音
if(res.authSetting['scope.record']){
// 已经授权,直接开始录音
wx.startRecord()
}else{
// 没有授权,提示授权
wx.authorize({
scope: 'scope.record',
success(){
console.log("授权成功")
wx.startRecord()
}
})
}
}
})
}
五、获取用户信息
1.通过API获取用户信息
1、给组件绑定事件,在事件里出现弹窗(wx.getUserProfile)
2、如果用户点击允许,改变授权状态,把用户信息存入缓存
3、再次按编译,走onLoad,在onLoad函数里取出来userinfo做判断,
给按钮添加的点击事件
_getuserinfo(){
if(!wx.getUserProfile){
// 基础库版本过低
wx.showToast({
title: '请升级您的微信版本',
icon:'none'
})
return
}
let that = this
wx.getUserProfile({
desc:"学习使用",
success(res){
console.log(res.userInfo)
// 1、改变授权状态
that.setData({
isshow:true,
userinfo:res.userInfo
})
// 2、拿到用户信息之后,存在缓存里,再次编译时候,在onLoad里判断
wx.setStorageSync('userinfo', res.userInfo)
},
fail(){
console.log