微信小程序 调用微信授权窗口相关问题解决
作者:小陆斑比 发布时间: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
猜你喜欢
- python3 读取串口数据 demo最近在写一个demo,zigbee串口连接树莓派,树莓派使用串口通信接受zigbee穿过来得值。其中我
- 在编写python函数时,无意中发现一个问题:python中的变量不能以数字打头,以下函数中定义了一个变量3_num_varchar,执行时
- 要实现标题的功能,总共分四步:1.创建html错误页2.配置settings3.编写视图4.配置url我的开发环境:django1.10.3
- 本文为大家分享了python+flask实现API的具体方法,供大家参考,具体内容如下Flask 框架#-*-coding:utf-8-*-
- 突然有个想法,不知道是不是首创:用"表情符号"做植入广告. 目前的表情符号 "黄色小圆脸"系列可以说
- 数据去重可以使用duplicated()和drop_duplicates()两个方法。DataFrame.duplicated(subset
- Python中可以使用for循环实现累加求和for循环语法:for 变量 in range(x):循环需要执行的代码如下实现1到n求和:de
- 最近听说一个很好玩的图灵机器人api,正好可以用它做一个微信聊天机器人,下面是实现# test.pyimport requestsimpor
- 在网页制作中,表单中的对象总是给人一种单调与沉闷的感觉,比如说按钮、文本框等,它们一成不变的模样与颜色
- 现在我们用python代码实现感知器算法。# -*- coding: utf-8 -*-import numpy as npclass Pe
- 本文实例为大家分享了Mysql实现通讯录的具体代码,供大家参考,具体内容如下#-*-code:utf-8-*-import pymysqld
- 大家已经从实际使用中了解了jquery这个javascript框架的强大,其实jquery更加强大的是可扩展。你可以编写自己的基于jquer
- 本文讲述了Python检测网络延迟的代码。分享给大家供大家参考,具体如下:#!/usr/bin/env python # coding: u
- 本问主要写根据索引或者值对series和dataframe进行排序的实例讲解代码:#coding=utf-8import pandas as
- 代码如下_init_.pyfrom flask import Flask, request, url_for, redirect, rend
- 前面我们给了Tkinter接管Python输入和输出的介绍,我们不难可以想到,能用Tkinter来开发自己的Python代码编辑器.例如可以
- 一、环境由于这学期开了图像处理这门课,所以想着在各种实验开始之前自己先动手试一下图像处理那首先要配个环境嘛,配环境真的是我长久以来的噩梦了,
- 1.交换变量x = 6y = 5x, y = y, xprint x>>> 5print y>>> 62
- IntelliJ IDEA 2021最新激活码超详细教程,成功激活到2099年。每天专业人士测试,保证可以使用才分享给大家的,放心大胆使用哈
- 1.先停止mysqld.exe的进程2.打开cmd进入到你mysql的bin目录下输入此命令:mysqld --skip-grant-tab