canIUse是对API的可用性进行判断,一直出现false返回值
原因:可能为版本不兼容或者网络延迟
网络延迟对canIUse解决方案:
app.js中编写了用户登录信息,存放在全局变量globalData中
wx.login({
success:res=>{
//发送res.code到后台接取openID
}
});
//获取用户信息
wx.getSetting({
success: res =>{
//已经授权
if(res.authSetting['scope.userInfo']){
//网络请求 获取用户信息
wx.getUserInfo({
success:res =>{
//可以将res发送给后台解码除unionId
this.globalData.userInfo = res.userInfo;
//防止网络延迟 在渲染完页面后才获取到数据 加入回调
if(this.userInfoReadyCallback){
this.userInfoReadyCallback(res);
}
}
})
}
}
})
},
//全局变量存储用户信息
globalData:{
userInfo:null
},
me.html:页面信息,用布偶值hasUserInfo和canIUse判断是否需要登录
<view class='container'>
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
<block wx:else>
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size = "cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view>
me.js:加入回调后可以解决网络延迟对canIUse的影响
data: {
userInfo:{},
hasUserInfo:false,
// 这个canIUse 判断AIP是否可用 返回布偶值
canIUse:wx.canIUse("button.open-type.getUerInfo")
},
//获取用户信息
getUserInfo:function(e){
console.log(e);
this.setData({
userInfo:e.detail.userInfo,
hasUserInfo:true
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//从全局变量中获取用户信息
var isUserInfo = app.globalData.userInfo;
if (isUserInfo){
this.setData({
userInfo: isUserInfo,
hasUserInfo: true
})}
//防止数据延迟 页面渲染出来而网络请求数据还没有获取到
else if (this.data.canIUse){
app.userInfoReadyCallback = res =>{
this.setData({
userInfo:res.userInfo,
hasUserInfo:true
})
}
}
},