小程序获取用户信息、登录

一、获取用户信息

官网：developers.weixin.qq.com/miniprogram...

wx.getUserProfile({})获取用户信息，页面产生点击事件后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo

步骤：

1. 定义一个变量，判断是否具有通过wx.getUserProfile获取用户信息的权限

2. 界面上定义一个按钮，点击调用wx.getUserProfile接口获取用户信息

3. 界面显示用户信息userInfo.nickName/userInfo.avatarUrl

示例代码：

页面js文件

Page({

  data: {

    imageURL: '<https://c-ssl.dtstatic.com/uploads/blog/202101/11/20210111220519_7da89.thumb.1000_0.jpeg>',

    canIUseGetUserProfile:false,//是否具有获取用户信息的权限

    userInfo:{},//用户信息

    hasUserInfo:false,

  },

  onLoad(options) {

    //判断是否具有通过wx.getUserProfile获取用户信息的权限

    if(wx.getUserProfile){

      this.setData({canIUseGetUserProfile:true})

    }

  },

  getUserProfile(e){

    //获取用户信息

    wx.getUserProfile({

      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (res) => {//成功后的回调

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    })

  }

})

wxml文件

<view>

    \<van-card desc="TASYT" title="{{hasUserInfo?userInfo.nickName:'神秘食客'}}" thumb="{{ hasUserInfo?userInfo.avatarUrl:imageURL }}">

      \<view slot="footer" class="g-footer">

        <text>{{hasUserInfo?'':'暂无会员卡信息'}}</text>

        \<van-button type="warning" size="small" round wx:if="{{!hasUserInfo}}" bind:tap="getUserProfile">请登录</van-button>

      </view>

    </van-card>

  </view>

二、登录（一个客户端、两个服务端（开发者服务器、微信接口服务））

appid(小程序的唯一标识)

openid(微信账号唯一标识)

unionid(区分微信生态下不同应用(公共号，小程序，...))

wx.login({})调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户在当前小程序的唯一标识（openid）、微信开放平台账号下的唯一标识（unionid，若当前小程序已绑定到微信开放平台账号）及本次登录的会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。

登录流程：

步骤：

1. 调用wx.login获取code登陆凭证，调用wx.request把code传到开发者服务器

2. 开发者服务器调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 （类似于token），返回给前端这个自定义登录态

3. 前端保存返回的登录状态到storage中，以后发起业务请求都带上这个自定义登录态，服务器验证，验证成功后返回业务数据

示例代码：

页面js文件

Page({

  data: {

    imageURL: '<https://c-ssl.dtstatic.com/uploads/blog/202101/11/20210111220519_7da89.thumb.1000_0.jpeg>',

    canIUseGetUserProfile:false,//是否具有获取用户信息的权限

    userInfo:{},//用户信息

    hasUserInfo:false,

  },

  onLoad(options) {

    //判断是否具有通过wx.getUserProfile获取用户信息的权限

    if(wx.getUserProfile){

      this.setData({canIUseGetUserProfile:true})

    }

  },

  getUserProfile(e){

    //获取用户信息

    wx.getUserProfile({

      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

      success: (res) => {//成功后的回调

        this.setData({

          userInfo: res.userInfo,

          hasUserInfo: true

        })

      }

    })

    // 1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器

    wx.login({

      success (res) {

        if (res.code) {

          //发起网络请求

          // 2. 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台帐号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台帐号） 和 会话密钥 session\_key。

          wx.request({

            url: '<http://10.7.163.165:8089/api/system/mini/login>',

            data: {

              code: res.code

            },

            success(data) {

              // 3. 小程序端保存 返回的登录状态， 以后业务请求都带上这个登录状态

              console.log('登录成功 ', data)

            },

          })

        } else {

          console.log('登录失败！' + res.errMsg)

        }

      }

    })

  }

})