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


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 相关文章推荐
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
微信小程序 条件渲染详解
Oct 09 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Angular2之二级路由详解
Aug 31 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
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获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
javascript事件模型代码
2007/07/01 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
javascript标签在页面中的位置探讨
2013/04/11 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
Python生成随机数的方法
2014/01/14 Python
Python中的引用和拷贝浅析
2014/11/22 Python
python将ip地址转换成整数的方法
2015/03/17 Python
pycharm安装图文教程
2017/05/02 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
python执行精确的小数计算方法
2019/01/21 Python
Python实现将蓝底照片转化为白底照片功能完整实例
2019/12/13 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
北美领先的智能产品购物网站:Wellbots
2018/06/11 全球购物
英语师范专业毕业生自荐信
2013/09/21 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
地道战观后感300字
2015/06/04 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python