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


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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
Angular4学习笔记之根模块与Ng模块
Sep 09 Javascript
js中let能否完全替代IIFE
Jun 15 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
vue+iview使用树形控件的具体使用
Nov 02 Javascript
关于Vue中$refs的探索浅析
Nov 05 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
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
让Json更懂中文(JSON_UNESCAPED_UNICODE)
2011/10/27 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery的bind()方法使用详解
2015/07/15 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)
2016/09/02 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
VueJS事件处理器v-on的使用方法
2017/09/27 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
简单实现python进度条脚本
2017/12/18 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python3多线程操作简单示例
2018/05/22 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python实现停车管理系统
2018/11/30 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
基于 Python 实践感知器分类算法
2021/01/07 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
3.12植树节活动总结2014
2014/03/13 职场文书
应用数学专业求职信
2014/03/14 职场文书
争做文明公民倡议书
2014/08/29 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Centos7中MySQL数据库使用mysqldump进行每日自动备份的编写
2021/08/02 MySQL
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电
分享五个Node.js开发的优秀实践 
2022/04/07 NodeJs
canvas 中如何实现物体的框选
2022/08/05 Javascript