微信小程序中获取用户的信息

获取用户信息

wx.getUserInfo()方法
可以获取用户的信息，但是值得注意的是，此接口有调整，使用该接口将不会再出现授权弹窗。
在JS代码中：

Page({
    data:{
        msg:'用户名',
        userInfo:{}//接收用户信息，最后放到页面中显示
    }
})


在onLoad生命周期函数中：
wx.getUserInfo({
    success:(data)=>{        //原来的形式为success(data){console.log(data);}，但setData方法在成功的回调中，所以修改
        console.log(data);
        //更新data中的userInfo
        //setData方法在成功的回调中，不是当前实例调用的，所以success成为箭头函数
        this.setData({
            userInfo:data.userInfo
        })
    },
    fail:()=>{
        console.log('获取用户数据失败')
    }
})

通过以上代码，从控制台的AppData中可以看出来已经更新成功了。
通过AppData可以找到具体信息，在wxml中将之显示。

<image class='avatar' src='{{userInfo.avatarUrl}}'></image>
<text class="username">hello {{userInfo.nickName}}</text>

 

增添获取用户信息按钮

一运行上面的代码，就会获得到用户信息，这样是不合理的，没有经过用户同意。

通过在wxml中添加：

<button open-type='getUserInfo'>获取用户登录信息</button>

单击按钮，刷新之后，可以获取权限获得用户信息。（刷新之后才可以获取，用户体验不好之后会解决该问题）。

我们根据scope.userInfo属性判断用户是否授权：
未授权该属性为undefined，布尔值就为false。授权之后为true。
再根据true或者false让button是否显示。

在onLoad中,在wx.getUserInfo之后可添加：

wx.getSetting({
    success:(data)=>{
        console.log(data);
        if(data.authSetting['scope.userInfo']){   //不规则属性的获取方式
            this.setData({
                isShow:false   //已经授权，设置变量isShow为false，按钮不显示
            })
        }else{
            this.setData({
                isShow:true   //未授权，设置变量isShow为true，按钮显示
            })
        }
    }
})

在Page的data中要增加isShow变量，且初值为true。
且在wxml中：

<button style='display:{{isShow?"block":"none"}}' open-type='getUserInfo'>获取用户登录信息</button>

这样用户体验及其不好，在获取信息之后还要手动刷新。（下文解决）。

 

根据选择允许或拒绝来判断是否刷新页面

如果用户允许获取个人信息，那么刷新页面，否则不做处理。
在button中，open-type值若是getUserInfo，可以从bindgetuserinfo回调获取到用户信息
在wxml中：

<button bindgetuserinfo='handleGetUserInfo' style='display:{{isShow?"block":"none"}}' open-type='getUserInfo'>获取用户登录信息</button>

上面的属性绑定了一个函数，那么在js中就要定义该函数：

handleGetUserInfo(data){
    console.log('用户点击了',data);
    if(data.detail.rawData){   //允许的话，rawData有值，那么就刷新获取用户信息。拒绝，没有该属性。所以用该属性判断。
        this.getuserinfo();    //允许之后，要获取用户信息，判断按钮是否显示，即再执行onLoad中的内容，所以将原来onLoad中的内容封装成getuserinfo函数，便于调用
    }
}

 

完整代码

js文件中：

// pages/index/index.js
Page({

/**
* 页面的初始数据
*/
data: {
    msg:'用户名',
    userInfo:{},
    isShow:true
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
    this.getuserinfo();   //调用封装的方法
},

//将原来onLoad中的内容封装为方法
getuserinfo(){
    wx.getUserInfo({
        success: (data) => {
            console.log(data);
            this.setData({
                userInfo: data.userInfo
            })
        }
    }),

    wx.getSetting({
        success: (data) => {
            if (data.authSetting['scope.userInfo']) {
                this.setData({
                    isShow: false
                })
            } else {
                this.setData({
                isShow: true
                })
            }
        }
    })
},


handleGetUserInfo(data){
    if(data.detail.rawData){
        this.getuserinfo();
    }
},

})

wxml文件中：

<!--pages/index/index.wxml-->
<view class="indexContainer">
    <image class='avatar' src='{{userInfo.avatarUrl}}'></image>
    <text class="username">hello {{userInfo.nickName}}</text>
    <view class="goStudy">
        <text>开启小程序之旅</text>
    </view>
    <button bindgetuserinfo="handleGetUserInfo" style='display:{{isShow?"block":"none"}}' open-type="getUserInfo">获取用户登录信息</button>
</view>