大前端学习之旅(7)-小程序获取用户登陆信息实战问题及解决方案

举报
@Wu 发表于 2021/08/22 23:46:19 2021/08/22
【摘要】 在学习大前端的微信小程序课程中,在学习到获取用户信息基本信息的时候会发现出现以下错误。同时有时候会发现没有弹出授权弹窗问题原因:经过查询微信官方开发文档,主要是由于调用函数引起。课程使用的微信开发库的版本较低,同时在课程发布后,微信对相关的接口调用做出了更改。同时由于近期课程学习的时候,本地安装的版本为兼容性最高的版本,多重因素的作用下,造成了以上问题解决方案:根据问题原因,查询了官方文档之...

在学习大前端的微信小程序课程中,在学习到获取用户信息基本信息的时候会发现出现以下错误。同时有时候会发现没有弹出授权弹窗

问题原因:

经过查询微信官方开发文档,主要是由于调用函数引起。课程使用的微信开发库的版本较低,同时在课程发布后,微信对相关的接口调用做出了更改。同时由于近期课程学习的时候,本地安装的版本为兼容性最高的版本,多重因素的作用下,造成了以上问题

解决方案:

根据问题原因,查询了官方文档之后,找到以下兼容性方案:

index.wxml 代码

<view class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

index.js 代码

Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserInfo) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})


主要涉及的代码信息在图中已经标注,采用兼容的方案做相关的应对,仅以此文记录备查。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。