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

2024-02-17 23:11:03

引言

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

那么，在我实践过程中，出现了以下问题。

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里有一段回调函数，这个函数就是用来解决异步的问题。

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

微信小程序如何调用json数据接口并解析

开始写js,用request请求接口url,当请求成功的时候,在控制台打印一下返回的res.data数据,在控制台可以看到打印了接口数据了,在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量. Page({ data: { list: [] }, onLoad: function (options) { wx.request({ url: 'https://c.y.qq.com/v8/fcg-bin/fcg_v8_toplist_cp.fcg?g_tk=538
微信小程序授权获取用户详细信息openid的实例详解

小程序获取用户的头像昵称openid之类第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl, }) }, }) 第二种我们在使用小程序wx.login API进行登录的时候,直接使用wx.getUserInfo是不能获取更多的信息的,如
微信小程序如何调用图片接口API并居中显示

写完调用天气接口的demo之后,小程序调用天气接口并且渲染在页面,顺便再调用了一下美图的接口API: 美图API url wxml: <view class='imagesize' wx:for="{{list}}" wx:key="index"> <image src="{{list.img}}" class='in-image' > </image> </view> js: Page({ dat
微信小程序 wx.request(接口调用方式)详解及实例

微信小程序 wx.request----接口调用方式最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结. 官方接口官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例. wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content-type': 'application/json' },
微信小程序调用摄像头隐藏式拍照功能

微信小程序最近非常火热,小编最近做了一个新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大家,具体内容如下: 问题今天小编遇到了这么个问题,就是在用户使用App参加考试的时候调用摄像头抓拍用户是否作弊,其实这也没什么,关键在于不能打扰用户考试,不能被用户发现什么时候抓拍的,也不能给用户查看图片,只有考完是后才能查看.这系统相当于考驾照时的上机答题部分.开始经理的要求是调用小程序外部的手机拍摄功能,这
微信小程序如何调用新闻接口实现列表循环

找到了一个比较好用的新闻接口 1:首先写js,老样子用request请求接口url,当请求成功的时候,在控制台打印一下返回的res.data数据,在控制台可以看到打印了接口数据了,在请求接口成功之后,用setData接收数据,并且需在data中声明一个接收数据的变量. Page({ data: { // 3:需在data中声明一个接收数据的变量. list: [] }, onLoad: function (options) { wx.request({ url: 'https://www.ap
微信小程序调用微信支付接口的实现方法

前言:应项目要求,需要使用微信小程序做支付,写完后告知手续费太高方案不予通过(宝宝心里苦,但宝宝不说).此次开发在因站在巨人的肩膀上顺利完成. 微信支付文档传送门:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3 1.开发工具: Eclipse+Tomcat+微信web开发工具 2.开发环境: java+maven 3.开发前准备: 3.1 所需材料小程序的appid,APPsecret,支付商户号(mch_i
微信小程序调用微信登陆获取openid及java做为服务端示例

一.微信小程序第一步:调用 wx.login获取code 文档地址第二步:判断用户是否授权读取用户信息文档地址第三步:调用wx.getUserInfo读取用户数据文档地址第四步:由于小程序后台授权域名无法授权微信的域名,所以我们只能通过我们自己的服务器去调用微信服务器去获取用户信息,故我们将wx.login获取code 和 wx.getUserInfo 获取的encryptedData与iv 通过wx.request 请求传入后台服务器返回的数据: 小程序代码: //调用登录接口,
微信小程序调用微信授权窗口相关问题解决

引言微信小程序为了优化用户体验,取消了在进入小程序时立马出现授权窗口.需要用户主动点击按钮,触发授权窗口. 那么,在我实践过程中,出现了以下问题. 1. 无法弹出授权窗口 2. 希望在用户已经授权的情况下,不显示按钮 1. 具体实现 app.js的onLaunch()函数中,添加获取用户个人信息的代码段.实现在用户已经授权的情况(例如第二次打开小程序时)下,自动获取用户个人信息,而不需要用户的授权. // 获取用户信息 wx.getSetting({ success: res => { if
详解微信小程序开发用户授权登陆

本篇将帮助读者实现基于微信开发者工具 & C#环境下的用户在小程序上的授权登陆. 准备: 微信开发者工具下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 微信小程序开发文档:https://developers.weixin.qq.com/miniprogram/dev/index.html 开发: 在开发之初,我们需要先明确微信方已经制定好的授权登陆流程,参看官方API - 登陆接口.
微信小程序后端实现授权登录

登录与授权官方文档一.登录登录流程时序说明: 调用 wx.login()获取临时登录凭证code,并回传到开发者服务器. 调用code2Session接口,换取用户唯一标识 OpenID和会话密钥 session_key. 之后开发者服务器可以根据用户标识来生成自定义登录态,用于后续业务逻辑中前后端交互时识别用户身份. 注意: 会话密钥session_key是对用户数据进行加密签名的密钥.为了应用自身的数据安全,开发者服务器不应该把会话密钥下发到小程序,也不应该对外提供这个密钥. 临时登录
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现

这个接口只能获得一些非敏感信息,例如用户昵称,用户头像,经过用户授权允许获取的情况下即可获得用户信息,至于openid这些,需要调取wx.login来获取. index.wxml  <view wx:if="{{result == 'ok'}}" class="result"> <view class="headimg"> <image src="{{avata
微信小程序结合ThinkPHP5授权登陆后获取手机号

1.在我们授权登陆后会获取到用户的 sessionKey 这个是获取手机号不可分割的一部分上代码 wxml: <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button> js:当我们在调用这个方法的时候可以在控制台输出一下 e 下方用红框框起来的两个也是获取手机号不可分割的一部分 getPhoneNumber: function
微信小程序同步请求授权的详解

微信小程序同步请求授权的详解需求分析: 1.在小程序首次打开的时候,我需要同时请求获取多个权限,由用户逐一授权. (['scope.userInfo','scope.userLocation','scope.address','scope.record','scope.writePhotosAlbum']) 问题分析: 1. wx.authorize接口同时调用,请求多个权限,由于异步原因,将授权请求一并发出,显然不符合要求. 2. promise能很好的解决问题,试着尝试了一下,下面代码分
微信小程序获取手机号授权用户登录功能

小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

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

相关推荐

随机推荐

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