小程序中 微信授权登录 获取用户信息

由于微信改了getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发
第一步：在首页中校验 用户是否微信授权 如果没有 则去微信授权页 代码如下
html 如下：

<view class="container">
   <view>
    <view wx:if="{{canIUse}}" >
        <view class='header'>
           <icon class="iconweixin iconfont"></icon>
        </view>
  
        <view class='content'>
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称，头像等)</text>
        </view>
  
        <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            授权登录
        </button>
    </view>
    <view wx:else>请升级微信版本</view>
</view>
</view>

css 如下：

.header {
  margin: 90rpx 0 90rpx 50rpx;
  border-bottom: 1px solid #ccc;
  text-align: center;
  width: 650rpx;
  height: 300rpx;
}

.header icon {
  width: 200rpx;
  height: 200rpx;
font-size: 150rpx;

}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.bottom {
  border-radius: 80rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

在首页的onLoad中 加入授权校验

  onLoad: function () { 
         //  授权登录
		var that = this;
		// 查看是否授权
		wx.getSetting({
				success: function(res) {
						if (res.authSetting['scope.userInfo']) {
								wx.getUserInfo({
										success: function(res) {
											console.log("用户已授权 用户信息如下" )
											console.log(res.userInfo)
											//设置app.js中的用户信息
											app.globalData.userInfo = res.userInfo
												// 根据自己的需求有其他操作再补充
												// 我这里实现的是在用户授权成功后，调用微信的 wx.login 接口，从而获取code
												wx.login({
														success: res => {
																// 获取到用户的 code 之后：res.code
																console.log("用户的code:" + res.code);
																// 可以传给后台，再经过解析获取用户的 openid
																// 或者可以直接使用微信的提供的接口直接获取 openid ， 由于微信不让secret放在小程序客户端 所以这个方法行不通 只能通过服务端请求 以下接口：
																// wx.request({
											// 自行补上自己的 APPID 和 SECRET 小程序客户端一般不放secret 需服务端调用接口 在返回openid
//url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
																//     success: res => {
																//         // 获取到用户的 openid
																//         console.log("用户的openid:" + res.data.openid);
																//     }
																// });
														}
												});
												
										}
								});
						} else {
                // 用户没有授权 去授权页
                wx.navigateTo({
                  url: '/pages/login/login',
                })		
						}
				}
		})
    },

授权登录页的JS 如下：

// pages/login/login.js
const app = getApp();
Page({

	/**
	 * 页面的初始数据
	 */
	data: {
    //判断小程序的API，回调，参数，组件等是否在当前版本可用。
		canIUse: wx.canIUse('button.open-type.getUserInfo'),
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad: function (options) {
  
	},
   // 操作 允许按钮
	 bindGetUserInfo(e) {
		if (e.detail.userInfo) {
				//用户按了允许授权按钮
				var that = this;
				// 获取到用户的信息了，打印到控制台上看下
				console.log("用户的信息如下：");
				console.log(e.detail.userInfo);
				//将获取的用户信息存入到app.js中 供全局调用
				app.globalData.userInfo = e.detail.userInfo;
				//授权成功后,重定向 去首页 
					wx.switchTab({
						url: '/pages/index/index',
					})
		} else {
				//用户按了拒绝按钮
				wx.showModal({
						title: '警告',
						content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
						showCancel: false,
						confirmText: '返回授权',
						success: function(res) {
								if (res.confirm) {
										console.log('用户点击了“返回授权”');
								}
						}
				});
		}
},
})

到这 微信登录授权 以及获取用户信息就可以了