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


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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
使用PHP+JavaScript将HTML页面转换为图片的实例分享
Apr 18 Javascript
基于mpvue的小程序项目搭建的步骤
May 22 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
layer.prompt输入层的例子
Sep 24 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中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php依赖注入知识点详解
2019/09/23 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
ie和firefox不兼容的解决方法集合
2009/04/28 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
js输出阴历、阳历、年份、月份、周示例代码
2014/01/29 Javascript
简单的jQuery入门指引
2015/07/28 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
JavaScript实现翻页功能(附效果图)
2017/02/16 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
Python中的高级数据结构详解
2015/03/27 Python
Python爬虫文件下载图文教程
2018/12/23 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
pandas分区间,算频率的实例
2019/07/04 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
美国最大的城市服装和运动鞋零售商:Jimmy Jazz
2016/11/19 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
天逸系统(武汉)有限公司Java笔试题
2015/12/29 面试题
私有程序集与共享程序集有什么区别
2013/04/05 面试题
《最后的姿势》教学反思
2014/02/27 职场文书
学习教师法的心得体会
2014/09/03 职场文书
维稳工作情况汇报
2014/10/27 职场文书
警示教育观后感
2015/06/17 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
Redis入门基础常用操作命令整理
2022/06/01 Redis
SpringBoot详解执行过程
2022/07/15 Java/Android