这篇文章主要介绍了微信小程序如何调用微信授权窗口,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
成都创新互联是专业的扎兰屯网站建设公司,扎兰屯接单;提供网站设计、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行扎兰屯网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!1. 具体实现
app.js的onLaunch()函数中,添加获取用户个人信息的代码段。实现在用户已经授权的情况(例如第二次打开小程序时)下,自动获取用户个人信息,而不需要用户的授权。
// 获取用户信息 wx.getSetting({ success: res => { if (res.authSetting['scope.userInfo']) { console.log("app: " + "用户已经授权") // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框 wx.getUserInfo({ success: res => { // 可以将 res 发送给后台解码出 unionId this.globalData.userInfo = res.userInfo console.log(this.globalData.userInfo) this.globalData.hasUserInfo = true // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res) } }, fail: (res) => { console.log("app: " + "获取用户信息失败") } }) }else { console.log("app: " + "用户暂时未授权") } } })
me.wxml中添加授权按钮(具体的页面根据大家的实际情况)。这里的button组件必须按照如下的形式。
<button open-type="getUserInfo" bindgetuserinfo="你自己定义函数"></button>
<block wx:if="{{!hasUserInfo}}"> <image src='../../images/icon/wechat.png'></image> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授权登录</button> </block>
效果这样,具体的样式根据大家的喜好更改
me.js中添加如下变量和方法,在用户之前没有授权的情况下,需要用户主动点击按钮。
data: { userInfo: null, hasUserInfo: false }, getUserInfo: function(e) { console.log("me: " + "用户点击授权") if(e.detail.userInfo){ this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) app.data.userInfo = this.userInfo app.data.hasUserInfo = true } }
2. 无法弹出授权窗口
这里一定要注意
授权窗口只会在用户第一次授权时出现,也就是,只会出现一次!!
在微信小程序开发工具里,需要我们清除所有缓存
3. 已经授权的情况下,不显示按钮
由于用户已经授权的时候,app.js会获取用户个人信息(而不是在用户点击授权按钮时获取),但是这个过程是异步的。
可以看到我们的授权按钮的出现时根据{{!hasUserInfo}}的真值来判断,这个值可以通过app.js是否获取了信息来赋值。
<block wx:if="{{!hasUserInfo}}"> <image class="userAvatar" src='../../images/icon/wechat.png'></image> <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授权登录</button> </block>
但是,可能出现用户已经授权了,但是app.js获取个人信息时过慢,然而我们的授权按钮却错误的以为app.js没有获取到信息,所以将授权按钮渲染了出来。
这时,我们希望,在app.js判断用户已经授权且获取到信息后,告诉我们的授权按钮。
我们在me.js中添加如下代码段。
onLoad: function() { // 获取个人信息 if(app.globalData.userInfo){ this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) }else{ // 在app.js没有获取到信息时,判断app.js的异步操作是否返回信息 app.userInfoReadyCallback = res => { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } } }
为什么这里会有个app.userInfoReadyCallback函数呢,我们注意到在app.js的wx.getSetting里有一段回调函数,这个函数就是用来解决异步的问题。
感谢你能够认真阅读完这篇文章,希望小编分享的“微信小程序如何调用微信授权窗口”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
本文标题:微信小程序如何调用微信授权窗口-创新互联
链接分享:https://www.cdcxhl.com/article24/ccocje.html
成都网站建设公司_创新互联,为您提供电子商务、外贸网站建设、营销型网站建设、用户体验、App设计、网站策划
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联