微信小程序 - 获取用户信息的几种方式

时间:2024-04-15 06:34:11

1. 老接口(上线使用-测试用button先获取用户信息)

   // 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
// 也就是发送到后端,后端通过接口发送到前端,前端接收用户信息等....
wx.setStorageSync('code', res.code);
console.log(wx.getStorageSync('code')) // 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
}
})

2. button - 官方示例

wxml

 <!--index.wxml-->
<view class="container">
<view class="userinfo">
<block wx:if="{{!hasUserInfo && canIUse}}" class='show-author'>
<button open-type="getUserInfo" class='show-author' bindgetuserinfo="getUserInfo"> <!--随意定制 -->
<view class='get-userinfo'>获取用户信息</view>
</button>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view>

wxss

 .show-author {
position: absolute;
top:;
bottom:;
left:;
right:;
z-index:;
background: #000;
opacity: 0.8;
} .show-author>.get-userinfo {
color: #fff;
background-color: #f00;
border-radius: 10rpx;
top: 50%;
margin-top: 70%;
}

后面的app.js和index.js均是官方示例(或者直接点击拉取Github示例,哈哈)

微信小程序 - 获取用户信息的几种方式

3. 当然是发送code到后端,我们接收用户信息就OK了