当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 微信小程序获取用户信息流程实例

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

2020年07月15日  | 移动技术网IT编程  | 我要评论

授权

部分接口需要经过用户授权同意才能调用。我们把这些接口按使用范围分成多个 scope ,用户选择对 scope 来进行授权,当授权给一个 scope 之后,其对应的所有接口都可以直接使用。

此类接口调用时:

  • 如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;
  • 如果用户已授权,可以直接调用接口;
  • 如果用户已拒绝授权,则不会出现弹窗,而是直接进入接口 fail 回调。请开发者兼容用户拒绝授权的场景。

获取用户授权设置

开发者可以使用 wx.getSetting 获取用户当前的授权状态
只要授权了,才能使用某种方式(button按钮,有些可以通过api)来进行获取

第1次获取用户信息,必须通过button按钮的open-type来 引用用户进行同意授权

如果用户允许 ,则代表授权成功。

如果用户同意授权,那么以后,就可以通过wx.getUserInfo方法获取到用户信息。

示例

<button open-type="getUserInfo" bindgetuserinfo="_getUserInfo">获取用户信息</button>
<view wx:if="{{userinfo !== ''}}">
  <image src="{{userinfo.avatarUrl}}" />
  <view>国籍:{{userinfo.country}}</view>
  <view>姓名:{{userinfo.nickName}}</view>
</view>
// pages/03getuserinfo/03getuserinfo.js
Page({
  data: {
    userinfo: ''
  },
  onLoad() {
    // 先检查用户是否授权用户信息权限
    // 若没有授权 跳转授权页
    // 授权了 直接获取用户信息
    // 检测是否授权,应该写在app.js的onLaunch中
    wx.getSetting({
      success:(res) =>{
        console.log(res)
        // authSetting ->{scope.userInfo:true}
        if (res.authSetting['scope.userInfo']) {
          console.log("用户已经授权")
          wx.getUserInfo({
            success:(res)=> {
              this.setData({
                userinfo: res.userInfo
              })
              console.log(res.userInfo);
            },
            fail(err) {
              console.log(err)
            }
          })
        } else {
          console.log("未授权,跳转授权")
        }
      }
    })
    
    // 官方api修改 调用此接口,不在弹出
    // wx.getUserInfo({
    //   success(res){
    //     console.log(res.userInfo);
    //   },
    //   fail(err){
    //     console.log(err)
    //   }
    // })
  },
  _getUserInfo(e) {
    console.log(e.detail.userInfo);
    this.setData({
      userinfo: e.detail.userInfo
    })
  }
})

 

本文地址:https://blog.csdn.net/JackieDYH/article/details/107349040

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网