微信小程序之授权登录

最新推荐文章于 2022-02-16 08:35:20 发布

「已注销」

最新推荐文章于 2022-02-16 08:35:20 发布

阅读量398

点赞数 1

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/X_xinmu/article/details/112489613

版权

随着微信官方修改了getUserInfo接口，现在无法直接通过该接口弹出授权窗口。现在需要使用button组件触发getUserInfo，或者利用open-data展示用户信息。本文介绍了如何实现用户授权登录，包括点击button触发授权，判断授权状态，以及授权后的主界面效果。提供了login.wxml、wxss和js的代码示例。

摘要由CSDN通过智能技术生成

微信小程序之授权登录

之前微信授权登录时是直接可以通过getUserInfo接口弹出授权弹窗。由于微信官方修改了 getUserInfo 接口，所以现在无法实现一进入微信小程序就弹出授权窗口，只能通过 button 去触发

微信的官方解释如下

为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息：

一、小程序:

1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。

详情参考文档:

链接

2、使用 open-data 展示用户基本信息。

详情参考文档:

链接

然后是自己的实现思路是通过点击button组件去触发 getUserInof 接口，在用户进入微信小程序的时候，判断用户是否授权了，未授权，弹出授权窗口，授权进入主界面，效果如图所示：

在这里插入图片描述

详细代码如下

login.wxml代码如下：

<view wx:if="{
    {canIUse}}">

  <view class='headView'>

    <view class='headImageView'>

      <image class='headImage' src='/pages/imageSource/IMG_3456.png' mode='scaleToFill'></image>

    </view<