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


Posted in Javascript onJuly 25, 2019

引言

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js数字转换为float,取N位小数
Feb 08 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
分享十三个最佳JavaScript数据网格库
Apr 07 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
浅谈JS函数节流防抖
Oct 18 Javascript
详解Puppeteer 入门教程
May 09 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
使用layer模态框给新页面传值的方法
Sep 27 Javascript
原生js+css实现tab切换功能
Sep 17 Javascript
mock.js模拟前后台交互
Jul 25 #Javascript
解决Vue打包后访问图片/图标不显示的问题
Jul 25 #Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 #Javascript
vue使用代理解决请求跨域问题详解
Jul 24 #Javascript
Vue父组件如何获取子组件中的变量
Jul 24 #Javascript
mock.js模拟数据实现前后端分离
Jul 24 #Javascript
vue+mock.js实现前后端分离
Jul 24 #Javascript
You might like
php $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
php实现JWT验证的实例教程
2020/11/26 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
Jquery之美中不足小结
2011/02/16 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
2013/04/07 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
JavaScript组件开发之输入框加候选框
2017/03/10 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
浅谈js闭包理解
2019/04/01 Javascript
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
python中的函数用法入门教程
2014/09/02 Python
python连接oracle数据库实例
2014/10/17 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
用python解压分析jar包实例
2020/01/16 Python
吃透移动端 1px的具体用法
2019/12/16 HTML / CSS
HTML5 图片预加载的示例代码
2020/03/25 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
《东方明珠》教学反思
2014/04/20 职场文书
消防安全承诺书
2014/05/22 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
mysql函数全面总结
2021/11/11 MySQL
德生2P3收音机开箱评测
2022/04/30 无线电
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL