宝哥软件园

微信小程序调用微信授权窗口解决相关问题

编辑:宝哥软件园 来源:互联网 时间:2021-08-21

为了优化用户体验,微信小程序在进入小程序时会立即取消授权窗口。用户需要主动点击按钮来触发授权窗口。

然后,在我的实践中,出现了以下问题。

1.授权窗口无法弹出。2.如果用户已经授权,按钮将不会显示。1.具体实施

在app.js的onLaunch()函数中,添加一个代码段,获取用户的个人信息。在用户已经授权的情况下(例如小程序第二次打开时),无需用户授权即可自动获取用户的个人信息。

//获取用户信息wx . getsetting({ success : RES={ if(RES . auth setting[' scope . user info ']){ console . log(' app 3360 ' '用户已授权')//已被授权。你可以直接调用getuserinfo获取头像昵称,不会播放wx . getUserInfo({ success : res={//可以发送RES到后台解码union idthis . globaldata . userinfo=RES . userinfoconsole . log(this . globaldata . userinfo)this . globaldata . hasuserinfo=true//因为getUserInfo是网络请求,可能会在Page.onLoad//so之后返回在这里添加回调来防止这种if (this。userinforeadycallback) {this。userinforeadycallback (RES)}},fail :(RES)={ console . log(' app : ' '未能获取用户信息')}}})} else { console . log(' app : ' '用户暂时未经授权')} } })在me.wxml中添加授权按钮(具体页面视每个人的实际情况而定)。此处的按钮组件必须采用以下形式。

button open-type=' getuser info ' bindtgetserinfo='定义自己的函数'/buttonblock wx:if='{{!hasuserinfo } }“image src=”././images/icon/微信. png '/image button open-type=' getuserinfo ' bindergetuserinfo=' getuserinfo '微信授权登录/button/block效果这样,具体的风格就根据大家的喜好而变化了

下面的变量和方法被添加到me.js中,这需要用户在没有授权之前主动点击按钮。

data: { userInfo: null,hasUserInfo: false },Getuserinfo:函数(e) {console.log ('me: ' '用户点击授权')if(e . detail . userinfo){ this . setdata({ userinfo : e . detail . userinfo,Hauserinfo : true })app . data . userinfo=this . userinfo . data . Hasuserinfo=true } 2。授权窗口无法弹出

一定要注意这里

授权窗口只有在用户第一次授权时才会出现,也就是只出现一次!

在微信小程序开发工具中,我们需要清除所有缓存

3.如果已授权,将不显示任何按钮

因为当用户已经授权的时候,app.js会获取用户的个人信息(而不是当用户点击授权按钮的时候),但是这个过程是异步的。

您可以看到我们的授权按钮根据{{!HasUserInfo}},可以通过app.js是否获取信息来赋值。

block wx:if='{{!hasuserinfo } } ' image class=' user avatar ' src='././images/icon/微信. png '/image Button open-type=' getuser info ' bindgetuserinfo=' getuser info '微信授权登录/Button/block不过可能会出现用户已经授权,但app.js获取个人信息太慢的情况。但是我们的授权按钮误以为app.js没有获取信息,所以呈现了授权按钮。

这时候希望app.js判断用户已经授权并获取信息后,告诉我们授权按钮。

我们将以下代码段添加到me.js中

OnLoad:函数(){//获取个人信息if(app . global data . user info){ this . setdata({ user info . global data . user info,HasUserInfo: true }) }else{ //当app.js没有获取信息时,并判断app.js的异步操作是否返回了信息app . user inforeadycallback=RES={ this . setdata({ user info : app . global data . user info,hasuserinfo 33660)我们注意到app.js的wx.getSetting中有一个回调函数,用来解决异步问题。

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

更多资讯
游戏推荐
更多+