E企盈营销工具技术服务商 热线:4006-838-530

微信小程序登录授权详解

E企盈直播平台营销卖货系统

最近,由于公司需要研究了一下微信小程序的开发,特此记录一下小程序登录授权的流程,便于自己理解,也希望对他人有多帮助。如有错误,欢迎指正!!1.实现思路由于微信官方修改了getUserInfo接口,现在一进入小程序无法自动弹出授权界面,所以需要我们自己写一个微信授权界面使用button按钮去触发该接口。①先调用wx.login获取登录凭证(code),然后通过code进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。②获取用户信息,先调用wx.getSetting获取用户当前的设置,判断用户是否授权过。如果已经授权,则直接调用getUserInfo获取头像、昵称等,不会弹框。需要的话设置全局变量。如果暂未授权,则需要跳转到我们写的授权界面并使用button按钮去触发来获取用户授权。③大致就是这么一个逻辑,如果其中有其他业务逻辑,还请另行添加修改。此外,如果对小程序开发不太熟悉,可以参照本篇博客和官方文档实现登录授权功能。2.界面展示        3.逻辑代码主要代码如下://app.js App({ onLaunch: function () { // 小程序启动之后触发。展示本地存储能力 var logs = wx.getStorageSync(‘logs’) || [] logs.unshift(Date.now()) wx.setStorageSync(‘logs’, logs) // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, unionId var that = this; console.log(res) if(that.globalData.openId){ try{ wx.setStorageSync(“open_id”, that.globalData.openId)//**设置本地缓存**同步 }catch(e){} }else{ console.log(res.code); wx.request({ url: ”,//**请求后台地址** data: {code: res.code }, success: (res) =>{ that.globalData.openId = res.data.openid //**给全局变量赋值** wx.setStorage({//**设置本地缓存**异步 key: “open_id”, data: res.data.openid, }) if(res.data.nickname == null){} } }) } }, }) // 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting[‘scope.userInfo’]) { // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res => { var that = this // 可以将 res 发送给后台解码出 unionId that.globalData.userInfo = res.userInfo // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (that.userInfoReadyCallback) { that.userInfoReadyCallback(res) } } }) }else{ //获取用户信息失败后,跳转到授权页面 wx.navigateTo({ url: ‘/pages/login/login’, }) } } }) }, globalData: { openId: null, userInfo: null } }) login.wxml<!–pages/login/login.wxml –> <view wx:if=”{{canIUse}}”> <view class=”header”> <image src=”../../pages/images/wechatico.png”></image> </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> login.js/* pages/login/login.js */ var app = getApp() //获取应用实例 Page({ data: { //判断小程序的API,回调,参数,组件等是否在当前版本可用。 canIUse: wx.canIUse(“button.open-type.getUserInfo”), }, onLoad: function (options) { }, bindGetUserInfo: function (e) { var that = this; //此处授权得到userInfo console.log(“授权得到userInfo :” + e.detail.userInfo) var authUser = e.detail.userInfo; if (authUser == undefined) {//判断 console.log(“用户点击 拒绝 按钮”) return; } wx.request({ url: ”,//请求后台地址授权后更新用户信息 data: { “openId”: app.globalData.openId, “nickName”: authUser.nickName, “avatarUrl”: authUser.avatarUrl, }, success: function(res){ console.log(res); }, }) //最后,返回返回刚才的界面 wx.navigateBack({ delta: 1 }) } }) login.wxss/* pages/login/login.wxss */ .header { margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 300rpx; } .header image { width: 90rpx; height: 120rpx; } .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; } 最后希望此篇博客对您有所帮助,如果有什么不太懂或者不对的地方,欢迎留言讨论,共同进步!!!

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序登录授权详解
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏