小程序-用户授权/授权后的信息读取流程

Posted 2023-05-03

参考技术A 在小程序中，不允许直接弹出用户授权的选择框，所以需要开发人员在界面上来设置提示信息，诱导用户点击，然后完成用户数据的录入和存取。在开发的过程中，某些请求是依托用户登录之后获取到的openId才能继续执行的，所以在页面上，某些数据渲染之前需要判断用户是否登陆，如若没有登录，怎样设计更好的交互来让用户登录。

使用小程序时，首先会进入到app.js这个文件中，这个文件里包含了俩个方法，一个是wx.login()，另一个是wx.getSetting()，wx.login()的目的是为了在用户登陆之后获取到一个对应的 code 值，然后通过这个值去自己的后台换取一个openId；wx.getSetting()第一是为了判断用户的授权范围，另一个是获取对应权限内的信息，比如说，用户授权小程序可以使用自己的基本信息，就可以在这个方法中获取到用户的头像、微信名、微信设置的城市这些字段，这就是一些需要掌握的基本流程，具体怎么实现登录呢？

在小程序中，官方给出了一种解决方案-button按钮：

在这个按钮中，有几个属性：

●  type ：按钮的类型，可以设置为primary，背景色为绿色

●  wx:if ：显示条件，内容分别为hasUserInfo和canIUse俩个字段，同时为真即可显示（俩个字段均需要在data中初始化赋值）

●  open-type ：按钮的功能类型，getUserInfo是为了获取基本信息（也可以设置为其他→getPhoneNumber：获取用户手机号）

●  bindgetuserinfo ：绑定的点击事件。在js中写对应的逻辑

在用户点击按钮之后，会出现一个弹窗，确定用户是否授权 ：

当用户点击允许之后，进入我们绑定的getUserInfo函数中：

在执行逻辑中，首先通过wx.login()方法获取到用户对应的openId，方便后续的操作，然后再通过wx.getUserInfo()来获取到用户的基本信息，发送请求，将基本信息入库存储，或者展示到页面上，就完成了登录流程。

1.在登陆中可能会涉及到多个页面登陆成功之后的状态同步，可以通过 app.gloableData 来实现，在全局对象中设置一个字段，然后不论在哪个页面实现了登录，都可以通过全局对象来完成更新。

2.在 获取用户信息 的时候，有时候需要获取的是 中文类型 的数据，可以在 wx.getSetting() 的请求体中加一个 lang:'zh_CN'。 这样获取到的数据就是中文格式的了

微信小程序获取用户信息流程

获取用户信息与其他授权不太一样，其他授权会自动弹出对话框，请求获取用户授权，但获取用户信息不回，需要引导用户点击授权按钮同意授权获取用户基本信息

1、前端页面要有授权登录按钮

<button
  wx:if="{{canIUse}}"
  open-type="getUserInfo"
  bindgetuserinfo="bindGetUserInfo"
>
  授权登录
</button>
<view wx:else>请升级微信版本</view>

2、数据canIUse

  data: {
    canIUse: wx.canIUse(‘button.open-type.getUserInfo‘)
  },

3、如果用户已经授权则直接显示用户信息，不在显示授权按钮

  onLoad: function (options) {
    // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting[‘scope.userInfo‘]) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },

 

4、没有显示授权按钮引导用户点击获取

  bindGetUserInfo:function(e){
    
     console.log(e.detail.userInfo)     
   
  },