微信小程序 授权登录代码
时间: 2023-09-19 13:12:22 浏览: 40
下面是一个简单的微信小程序授权登录代码:
```
// 在需要授权登录的页面对应的.js文件中
Page({
onLoad: function() {
// 获取用户授权信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
}
})
},
// 授权登录
bindGetUserInfo: function(e) {
if (e.detail.userInfo) {
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
}
}
})
// 在需要授权登录的页面对应的.wxml文件中
<!-- 显示授权按钮 -->
<button type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>
<!-- 显示用户信息 -->
<view class="userinfo" wx:if="{{hasUserInfo}}">
<image src="{{userInfo.avatarUrl}}" />
<text>{{userInfo.nickName}}</text>
</view>
```
这段代码中,通过调用小程序 `wx.getSetting` 接口,可以获取用户的授权信息,如果已经授权,则直接调用 `wx.getUserInfo` 接口获取用户的头像和昵称;如果用户未授权,则通过 `button` 组件的 `open-type` 属性和 `bindgetuserinfo` 事件,提示用户授