微信小程序 调用微信授权窗口相关问题解决
作者:小陆斑比 发布时间:2024-04-18 10:08:44
引言
微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口。需要用户主动点击按钮,触发授权窗口。
那么,在我实践过程中,出现了以下问题。
1. 无法弹出授权窗口
2. 希望在用户已经授权的情况下,不显示按钮
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.cnblogs.com/Lu-Yuyang/p/11237362.html
猜你喜欢
- 本文实例讲述了python求众数问题的方法,是一个比较典型的应用。分享给大家供大家参考。具体如下:问题描述:多重集中重数最大的元素称为众数.
- 简介 SQL Server 2014提供了众多激动人心的新功能,但其中我想最让人期待的特性之一就要算内存数据库了。去
- 一般在线增加从库有两种方式,一种是通过mysqldump备份主库,恢复到从库,mysqldump是逻辑备份,数据量大时,备份速度会很慢,锁表
- 本文实例为大家分享了wxPython色环电阻计算器的具体代码,供大家参考,具体内容如下import wx # 导入wxPythonclass
- ASP(英文全称Active Server Pages)是一个编程环境,在其中,可以混合使用HTML、脚本语言以及组件来创建服务器端功能强大
- 引言故事从好多年前说起。想必大家也听说过数据库单表建议最大2kw条数据这个说法。如果超过了,性能就会下降得比较厉害。巧了。我也听说过。但我不
- 当你需要一个简单易用的导航菜单得时候。CSS Menu是个不错的选择。相对于Flash/Javascript,他们小巧轻便,而且方便使用。当
- 当需要制作转动鼠标滚轮放大页面字体这样的交互效果时,会用到 Mousewheel 事件。其实在大多数浏览器(IE6, IE7, IE8, O
- 从头讲讲编码的故事。那么就让我们找个草堆坐下,先抽口烟,看看夜晚天空上的银河,然后想一想要从哪里开始讲起。嗯,也许这样开始比较好……很久很久
- 网上资料结合自己的操作整理出的一套靠谱的彻底卸载Oracle 11g的步骤!(Win7),具体内容详情如下所示:1:停掉所有Oracle相关
- 分页,就是按照某种规则显示分组数据集,但是在SQL Server 中,分页并不是十分容易就能够实现。在过去,开发人员通常需要自己编写程序,使
- 之前用pymysql连接数据库的方法太繁杂了,用django自带的orm进行数据库的创建修改。1、首先在终端打开数据库mysql -u ro
- 程序没有改动过运行一直正常,突然有一天同事告知出现错误了。经过检查发现传递的数据中出现了#等特殊字符,浏览器只取到#号前面的数据,后面的被截
- 1、Python的内置高阶函数1.1 map()map()会根据提供的函数对指定序列做映射语法格式:map(function, iterab
- in Navicat for MySQL,PostgreSQL and Oracle 产生错误的原因是mysql帐户连接到远程mysql服务
- 首先贴一张验证码上来做案例:第一步先通过二值化处理把干扰线去掉:from PIL import Image# 二值化处理def two_va
- 引子任务调度(Task Scheduling)是很多软件系统中的重要组成部分,字面上的意思是按照一定要求分配运行一些通常时间较长的脚本或程序
- 本文实例介绍了如何使用ASP代码来读写注册表,呵呵厉害吧! 一个例子: <%Dim ReadComputerNam
- 原文:https://dev.mysql.com/doc/refman/8.0/en/group-replication-monitorin
- 界面文件 Ui_ControlBoard.py# -*- coding: utf-8 -*-# Form implementation ge