微信小程序之授权登录
之前微信授权登录时是直接可以通过getUserInfo接口 弹出授权弹窗。由于微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发
微信的官方解释如下：
为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息：
一、小程序:
1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。
详情参考文档:
https://developers.weixin.qq.com/miniprogram/dev/component/button.html
2、使用 open-data 展示用户基本信息。
详情参考文档:
https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
然后是自己的实现思路是 通过点击button组件去触发 getUserInof 接口，在用户进入微信小程序的时候，判断用户是否授权了，未授权，弹出授权窗口，授权进入主界面，效果如图所示：
详细代码如下：
login.wxml代码如下：
<view wx:if="{{canIUse}}">
<view class='headView'>
<view class='headImageView'>
<image class='headImage' src='/pages/imageSource/IMG_3456.png' mode='scaleToFill'></image>
</view>
<view class='titleText'>申请获取以下权限</view>
<view class='contentText'>获得你的公开信息(昵称,头像,手机等)</view>
<button class='authBtn' type='primary' open-type='getUserInfo' bindgetuserinfo='bindGetUserInfo'>授权登录</button>
</view>
</view>
<view wx:else>请升级微信版本</view>
login.wxss代码如下
.headView {
margin: 90rpx 50rpx 90rpx 50rpx; /*上右下左*/
}
.headImageView {
display: block;
margin-left: 25px;
margin-top: 25px;
margin-right: 25px;
margin-bottom: 0px;
height: 50px;
}
.headImage{
display: flex;
width: 50px;
height: 50px;
}
.titleText {
margin-left: 25px;
margin-top: 25px;
margin-bottom: 10px;
font-size: 14px;
color: #020e0f;
text-align: center;
}
.contentText {
margin-left: 25px;
margin-top: 0px;
margin-bottom: 0px;
font-size: 14px;
color: #666;
text-align: center;
}
.authBtn {
margin-top: 35px;
margin-left: 25px;
margin-right: 25px;
height: 45px;
font-size: 17.5px;
}
login.js代码如下：
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
//查看是否授权
wx.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
console.log("用户授权了");
} else {
//用户没有授权
console.log("用户没有授权");
}
}
});
},
bindGetUserInfo: function(res) {
if (res.detail.userInfo) {
//用户按了允许授权按钮
var that = this;
// 获取到用户的信息了，打印到控制台上看下
console.log("用户的信息如下：");
console.log(e.detail.userInfo);
//授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
that.setData({
isHide: false
});
} else {
//用户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
// 用户没有授权成功，不需要改变 isHide 的值
if (res.confirm) {
console.log('用户点击了“返回授权”');
}
}
});
}
}
},
然后就实现了 上面的效果。
如有其它问题请联系我，代码可以评论写下邮箱地址，私发给你们。
