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

一、获取用户信息

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

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

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

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

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

示例代码:

页面js文件

javascript 复制代码
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文件

xml 复制代码
<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文件

javascript 复制代码
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)

        }

      }

    })

  }

})
相关推荐
racerun3 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳2 天前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1212 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero2 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉2 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code2 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app