小程序的登录流程具体步骤

1.首先看api提供的登录流程:

login.png

第一步:先来写一个漂亮的登录页面,代码如下:
wxml
<view class='con' width="">
<image src='../images/loginbg.png' class='login-img-bg' animation="{{animationData}}"></image>
<view class='login-bg'></view>
<view class='login-con'>
<text class='login-title'>登录测试</text>
<button class="login-btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGetUserInfo" >登陆</button>
</view>
</view>
wxss
page {height:100%}
.con {position:relative;width:100%;height:100%;}
.login-img-bg {width:1125rpx;height:104%;}
.login-bg {width:1125rpx;height:100%;background:rgba(0,0,0,0.5);position:absolute;top:0;left:0;}
.login-con {width:100%;height:100%;position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;}
.login-title {font:80rpx "DFKaiShu-SB-Estd-BF";color:rgba(255,255,255,1);margin-top:50%}
.place-hoder {font:44rpx "PingFangSC-Medium";color:rgba(255,255,255,1);}
.login-btn {width:568rpx;height:94rpx;background:rgba(255,255,255,1);border-radius:12rpx;margin-top:46rpx;font:bold 44rpx "PingFangSC-Medium";color:rgba(93,93,93,1);display:flex;align-items:center;justify-content:center;}
第二部:编写js
①点击授权按钮,调用微信接口wx.login(),过程如下

l01.png

②在wx.login()的回调函数中调用获取openid和session_key的函数getUserSessionKey()并传入code,此函数主要是对接后端数据接口,用得到的code和开发者的appid和appseccret调用微信小程序内部的接口返回openid,openid是用来表示用户身份的唯一性,类似身份证的东西。代码如下:
 getUserSessionKey(code){
let that =this;
wx.request({
url: '这里是后端处理过的接口',
// method:"post",
data:{
code:code
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success(res){
console.log("getUserSessionKey",res);
app.globalData.userInfo['openid'] = res.data.openid;
app.globalData.userInfo['sessionId'] = res.data.session_key;
var openid=res.data.openid;
}
})
},
获取到openid和session_key,打印信息如下:

l02.png

最后:接下来就是把获取到的数据存入缓存,再次登录的时候先从缓存读取用户是否已经有登录过,来判断是否还走登录页面,此处具体省略。
中间遇到的问题:在获取openid的时候总是报40029错误,网上搜索得到的结果有:多次登录导致code重复,还有就是appid不对应,不是同一个小程序。

0 个评论

要回复文章请先登录注册