这节的内容主要根据项目中的功能模块做一个详细的讲解,项目结构图如下
【授权登录效果图展示】
点击授权登录切换到这个界面
【解析】
对于现在大多数小程序都需要一个授权登录的功能模块,为什么呢,因为现在小程序很多功能需要获取到你的头像、昵称等,比如论坛,你发布自己的评论之后应当显示你自己的名称以及头像,这个周末获取呢,当然是通过授权登录来实现呀。当我们点击授权之后我们便可以看到控制台如下信息
【代码展示】
//login.xml
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userinfo-btn" catchtap='onPostTap'> 点击微信授权 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
//login.wxss
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
background: #14aaf0;
width: 100%;
height: 300rpx;
}
.userinfo-btn{
margin-top: 50rpx;
background: none !important;
color: #fff !important;
font-size: 40rpx;
}
.userinfo-avatar {
width: 108rpx;
height: 108rpx;
margin: 40rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #fff;
}
//login.json
{
"navigationBarTitleText": "授权登录"
}
//login.js
var app = getApp()
var userInfo = null;
Page({
globalData: {
appid: '******', //appid需自己提供
secret: '******', //secret需自己提供
},
data: {
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
var that = this;
if (this.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
this.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
this.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
}
//登录凭证校验。通过 wx.login() 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程。
wx.login({
success: function(res) {
if (res.code) {
console.log("res.code:" + res.code);
var d = that.globalData; //这里存储了appid、secret、token串
var l = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + d.appid + '&secret=' + d.secret + '&js_code=' + res.code + '&grant_type=authorization_code';
wx.request({
url: l,
data: {},
method: 'GET',
success: function(res) {
var obj = {};
obj.openid = res.data.openid;
console.log("openid:" + obj.openid);
console.log("session_key:" + res.data.session_key);
obj.expires_in = Date.now() + res.data.expires_in;
wx.setStorageSync('user', obj); //存储openid
}
});
} else {
console.log('获取用户登录态失败!' + res.errMsg)
}
}
});
},
getUserInfo: function(e) {
console.log(e)
this.globalData.userInfo = e.detail.userInfo
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
onPostTap: function(event) {
//授权登录之后实现页面之间的跳转
wx.navigateTo({
url: "../welcome/welcome"
})
}
})
【总结】
以上就是授权登录模块的基本代码,代码里面都有相应的注释,我觉得大家都可以看懂的,有什么不懂之处可以在下面留言。