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

微信网页授权,微信小程序登录授权详解

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

最近,由于公司需要研究了一下微信小程序的开发,特此记录一下小程序登录授权的流程,便于自己理解,也希望对他人有多帮助。如有错误,欢迎指正!!1.实现思路由于微信官方修改了getUserInfo接口,现在一进入小程序无法自动弹出授权界面,所以需要我们自己写一个微信授权界面使用button按钮去触发该接口。①先调用wx.login获取登录凭证(code),然后通过code进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)等。②获取用户信息,先调用wx.getSetting获取用户当前的设置,判断用户是否授权过。如果已经授权,则直接调用getUserInfo获取头像、昵称等,不会弹框。需要的话设置全局变量。如果暂未授权,则需要跳转到我们写的授权界面并使用button按钮去触发来获取用户授权。③大致就是这么一个逻辑,如果其中有其他业务逻辑,还请另行添加修改。此外,如果对小程序开发不太熟悉,可以参照本篇博客和实现登录授权功能。2.界面展示3.逻辑代码主要代码如下://app.jsApp({onLaunch:function(){//小程序启动之后触发。展示本地存储能力varlogs=wx.getStorageSync(‘logs’)||[]logs.unshift(Date.now())wx.setStorageSync(‘logs’,logs)//登录wx.login({success:res={//发送res.code到后台换取openId,sessionKey,unionIdvarthat=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={varthat=this//可以将res发送给后台解码出unionIdthat.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–viewwx:if=”{{canIUse}}”viewclass=”header”imagesrc=”../../pages/images/wechatico.png”/image/viewviewclass=”content”view申请获取以下权限/viewtext获得你的公开信息(昵称、头像等)/text/viewbuttonclass=”bottom”type=”primary”open-type=”getUserInfo”lang=”zh_CN”bindgetuserinfo=”bindGetUserInfo”授权登录/button/viewviewwx:else请升级微信版本/viewlogin.js/pages/login/login.js/varapp=getApp()//获取应用实例Page({data:{//判断小程序的API,回调,参数,组件等是否在当前版本可用。canIUse:wx.canIUse(“button.open-type.getUserInfo”),},onLoad:function(options){},bindGetUserInfo:function(e){varthat=this;//此处授权得到userInfoconsole.log(“授权得到userInfo:”+e.detail.userInfo)varauthUser=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:90rpx090rpx50rpx;border-bottom:1pxsolid#ccc;text-align:center;width:650rpx;height:300rpx;line-height:300rpx;}.headerimage{width:90rpx;height:120rpx;}.content{margin-left:50rpx;margin-bottom:90rpx;}.contenttext{display:block;color:#9d9d9d;margin-top:40rpx;}.bottom{border-radius:80rpx;margin:70rpx50rpx;font-size:35rpx;}最后希望此篇博客对您有所帮助,如果有什么不太懂或者不对的地方,欢迎留言讨论,共同进步!!!

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

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏