微信小程序开发用户授权登录(上)
思路：
1.点击 按钮授权 绑定点击事件
<button open-type="getUserInfo" bindgetuserinfo='getUserInfo'>获取头像昵称 </button>
2.事件获取e 获取授权信息 console.log(e.detail)//userInfo登录人微信信息
3.进入页面 获取之前有没有授权过 ---在app.js获取信息 设置成全局
wx.getSetting({}) success--->res.authSetting['scope.userInfo'] 判断授权
wx.getUserInfo({}) success-->userInfo 用户信息
4.about.js 判断全局授权信息
实现效果：

第一步：授权界面

about.wxml代码
<!-- 登录授权 -->
<view wx:if='{{isShow}}'>
<view wx:if='{{canIuse}}'>
<button open-type="getUserInfo" bindgetuserinfo='getUserInfo'>获取头像昵称 </button>
</view>
<view wx:else>请升级微信版本</view>
</view>
<!-- 内容显示--头像 -->
<view class='userinfo' wx:else>
<view class="avatarUrl"> <image src='{{userInfo.avatarUrl}}'></image></view>
<text class='nickName'>{{userInfo.nickName}}</text>
</view>
第二步：获取头像事件 bindgetuserinfo

about.js代码 后面演示---最下面
第三步：再次进入页面后 获取是否授权过
app.js
app.js代码
App({
onLaunch:function(){
var that=this;
//进入页面获取是否授权----------------------------
wx.getSetting({
success(res) {//authSetting用户授权结果
console.log(res.authSetting);
//scope.userInfo
if (res.authSetting['scope.userInfo']) {//授权过
console.log('授权过信息');
// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
wx.getUserInfo({
success: function (res) {
console.log(res.userInfo);
//存储到本地
that.globalData.userInfo = res.userInfo;
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (that.userInfoReadyCallback) {
that.userInfoReadyCallback(res)
}
}
})
} else {
console.log('没有授权')
}
}
})
wx.showModal({
title: '是否授权当前的用户信息',
content: '',
})
},
globalData: {
cityInfo: '',
userInfo:null,
}
})
第四步：进入我的登录界面 获取用户头像信息

代码：
var app=getApp();
Page({
data: {
isShow:true,//显示
//判断小程序的API，回调，参数，组件等是否在当前版本可用
canIuse: wx.canIUse('button.open-type.getUserInfo'),
userInfo:{},//微信信息
},
onLoad: function (options) {
//进入页面---判断全局是否有数据
var that=this;
console.log(app.globalData.userInfo)
//进入页面后---获取本地存储是否有数据授权----------
if(app.globalData.userInfo){
this.setData({
isShow:false,
userInfo:app.globalData.userInfo
})
}
else if (this.data.canIuse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
that.setData({
userInfo: res.userInfo,
isShow: false,
})
}
}
},
//-----点击授权--------------------------
getUserInfo:function(e){
console.log(e.detail)//userInfo登录人微信信息
//存储全局变量-----------------
app.globalData.userInfo = e.detail.userInfo;//存全局的账号信息
this.setData({
userInfo:e.detail.userInfo,
isShow:false
})
},})