小程序官方文档，上面说明wx.getUserInfo(OBJECT) 注意：此接口有调整，使用该接口将不再出现授权弹窗，请使用
<button open-type="getUserInfo"></button>
接口调整说明
在用户未授权过的情况下调用此接口，将不再出现授权弹窗，会直接进入 fail 回调（详见《公告》)。在用户已授权的情况下调用此接口，可成功获取用户信息。
api示例代码
视图层：
<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 来授权登录 -->
<button
wx:if="{{canIUse}}"
open-type="getUserInfo"
bindgetuserinfo="bindGetUserInfo"
>
授权登录
</button>
<view wx:else>请升级微信版本</view>
逻辑层：
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad() {
// 查看是否授权
wx.getSetting({
success(res) {
if (res.authSetting['scope.userInfo']) {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo(e) {
console.log(e.detail.userInfo)
}
})
我写的具体代码：
效果图：
批注 2019-03-16 214510.jpg
视图层：
<view class="content">
<view class="bg">
<button bindgetuserinfo='isGetinfo' style='width:200rpx;color:#999;display:{{isShow?"block":"none"}}' open-type='getUserInfo'>请先登录</button>
<view class="head">
<view class="headIcon">
<image src="{{userInfo.avatarUrl}}" style="width:70px;height:70px;"></image>
</view>
<view class="login">
{{userInfo.nickName}}
</view>
<view class="detail">
<text>></text>
</view>
</view>
<view class="count">
<view class="desc">
<view>10</view>
<view>关注</view>
</view>
<view class="desc">
<view>267</view>
<view>粉丝</view>
</view>
<view class="desc" style="border:0px;">
<view>300</view>
<view>7天访客</view>
</view>
</view>
</view>
<view class="nav">
<view class="nav-item">
<view>
<image src="/images/icon/shoucang.jpg" style="width:23px;height:23px;"></image>
</view>
<view>收藏</view>
</view>
<view class="nav-item">
<view>
<image src="/images/icon/lishi.jpg" style="width:23px;height:23px;"></image>
</view>
<view>历史</view>
</view>
<view class="nav-item">
<view>
<image src="/images/icon/yejian.jpg" style="width:23px;height:23px;"></image>
</view>
<view>夜间</view>
</view>
</view>
<view class="hr"></view>
<view class="item">
<view class="title">消息通知</view>
<view class="detail2">
<text>></text>
</view>
</view>
<view class="hr"></view>
<view class="item">
<view class="title">头条商城</view>
<view class="detail2">
<text>点击速领200元新年红包 ></text>
</view>
</view>
<view class="line"></view>
<view class="item">
<view class="title">京东特供</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="hr"></view>
<view class="item">
<view class="title">我也爆料</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="line"></view>
<view class="item">
<view class="title">用户反馈</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="line"></view>
<view class="item" bindtap="setup">
<view class="title">系统设置</view>
<view class="detail2">
<text> ></text>
</view>
</view>
<view class="hr"></view>
</view>
逻辑层：
var app = getApp();
Page({
data: {
userInfo: {},
isShow:true
},
onLoad: function() {
this.getuser();
},
getuser(){
// 查看是否授权
wx.getSetting({
success:(res)=> {
console.log(res);
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: (res) =>{
console.log(res.userInfo)
console.log("成功");
this.setData({
isShow:false
})
//用户已经授权过
}
})
}else{
console.log("失败")
this.setData({
isShow:true
})
}
}
})
var page = this;
//拿到userInfo的信息
if (app.getUserInfo) {
console.log('有函数')
}
//获取用户信息
wx.getUserInfo({
success: (res) => {
//解构赋值
let {
userInfo
} = res;
this.setData({
userInfo: res.userInfo
})
},
fail: (res) => {
console.log("调用了失败的回调");
}
});
},
//绑定的是否登录授权的事件
isGetinfo(data) {
if (data.detail.rawData) {
//点击了允许
console.log("允许");
this.getuser();
} else {
//点击了不允许
console.log("不");
}
}
})
网友评论