微信小程序开发之获取用户信息

这篇具有很好参考价值的文章主要介绍了微信小程序开发之获取用户信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

环境

  • 微信开发者工具 Stable 1.06.2303220
  • 云开发控制台 v1.5.47

用户的openid和头像名称信息

openid 是小程序用户的唯一标识。注意, openid 并不是微信用户的唯一标识,它是和小程序绑定的。也就是说,同一个微信用户,他在小程序A中的openid和小程序B中的openid是不同的。

头像和名称并不能唯一代表用户。头像名称等信息是可以公开的,而openid则相对私密,需要较高的安全性。

获取用户头像名称

显示用户头像名称

用户的头像和名称是公开的,可以直接在小程序中显示。

<open-data style="align-self: center; width: 150rpx; height: 150rpx;" type="userAvatarUrl"></open-data>
<open-data style="text-align: center;" type="userNickName"></open-data>
<open-data style="text-align: center;" type="userGender" lang="zh_CN">aaa</open-data>
<open-data style="text-align: center;" type="userCity" lang="zh_CN"></open-data>
<open-data style="text-align: center;" type="userProvince" lang="zh_CN"></open-data>
<open-data style="text-align: center;" type="userCountry" lang="zh_CN"></open-data>

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

不过,通过该方法,小程序只是能够显示用户信息,并不能使用该信息。

wx.getUserProfile()

在小程序里,要想获取并使用用户信息,需要用户授权才行。下面是一个示例小程序:

  • 页面显示时,若缓存中没有用户信息,则显示缺省的图标和用户名。若缓存中有用户信息,则显示用户的图标和用户名。
  • 点击“获取用户信息”按钮,从微信服务器获取用户信息,然后把图标和用户名替换为微信用户的图标和用户名。此外,把信息缓存到本地。
  • 同理,点击“清除用户信息”按钮,则把图标和用户名替换为缺省的图标和用户名,并把本地缓存的信息清空。

在微信开发者工具中,创建一个新项目 miniprogram-11 ,输入AppID,并选择“微信云开发”。

找一张图片(本例中为 defaultUser.jpg )作为缺省的用户头像图标,把该图片复制到 images 目录下。

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

修改“miniprogram -> pages -> index -> index.wxml”文件内容如下:

<banner style="margin: 100rpx; text-align:center">
  <view><image mode="aspectFill" src="{{userinfo.avatarUrl}}" style="width: 150rpx; height: 150rpx;"></image></view>

  <text>\n{{userinfo.nickName}}\n</text>
</banner>

<button wx:if="{{!hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="getUserProfile">获取用户信息</button>

<button wx:if="{{hasUserInfo}}" style="width: 300rpx" type="primary" bindtap="clearUserProfile">移除用户信息</button>

修改“miniprogram -> pages -> index -> index.js”文件内容如下:

......
  data: {
    userinfo: {
      avatarUrl: '../../images/defaultUser.jpg',
      nickName: '未授权'
    },
    
    hasUserInfo: false,
  },

  getUserProfile: function(e){
    wx.getUserProfile({
      desc: '获取您的微信个人信息',
      success:(res)=>{
          this.setData({
            userinfo: res.userInfo,
            hasUserInfo: true
          })
          wx.setStorageSync('userinfo', res.userInfo)
          wx.showToast({
            title: '已获取信息',
          })
      },
      fail:function(e){
          wx.showToast({
            title: '已取消',
            icon: "none",
            duration: 1500,
            mask: true
          })
      }
    })
  },

  clearUserProfile() {
    wx.removeStorage({
        key: 'userinfo',
    })
    
    this.setData({
      userinfo: {
        avatarUrl:'../../images/defaultUser.jpg',
        nickName:'未授权',
      },
      hasUserInfo: false
    })
    
    wx.showToast({
      title: '已移除信息',
    })
  },

  onShow: function () {
    var n = wx.getStorageSync("userinfo");
    
    if(n.nickName != null && n.nickName != ''){
      console.log(n)

      this.setData({
          userinfo: n,
          hasUserInfo: true,
      })
    }
  },
......

测试效果如下:

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

点击“获取用户信息”按钮,如下:

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

如果选择“拒绝”,则提示“已取消”:

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

如果选择“允许”,则显示用户的图标和用户名,并提示“已获取信息”:

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

此时,如果点击“移除用户信息”按钮,则又恢复为缺省状态:

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

此外,缓存用户信息后,下次再打开页面,就会直接显示用户信息:

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

可以手工清除缓存信息:

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

获取openid

官方文档( https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a )给出的微信登录流程如下:

微信小程序获取用户信息,微信小程序,微信小程序
官方文档也解释了为何不能通过 wx.login直接拿到微信用户的ID编号,主要是出于安全的考虑。

基本流程为:

  • wx.login() 的success回调中拿到微信登录凭证code(code类似于一个临时身份证)。
  • 通过 wx.request() 把code传到开发者服务器(若尚未绑定业务ID,则也传入业务用户的ID和密码来验证;若已绑定业务ID,则用户无需输入业务ID和密码)。
  • 开发者服务器通过code和其它信息(AppId和AppSecret),访问微信服务器,获取微信用户ID。
  • 开发者服务器绑定微信用户ID和自己的业务用户ID。

有了这个绑定信息,小程序在下次需要用户登录的时候就可以不需要输入账号密码,因为通过 wx.login() 获取到code之后,可以拿到用户的微信身份 openid ,通过绑定信息就可以查出业务侧的用户身份ID,这样静默授权的登录方式显得非常便捷。

上图中的第3步:“通过code和其他信息换取用户ID”,官方文档里提到,微信服务器提供的接口地址是: https://api.weixin.qq.com/sns/jscode2session?appid=<AppId>&secret=<AppSecret>&js_code=<code>&grant_type=authorization_code

在实现上,有几种考虑:

  • 在小程序里直接 wx.request 请求
  • 在云函数里请求
  • 在开发者服务器里请求

方法1:小程序直接请求

在小程序里直接发上述请求,会报错: https://api.weixin.qq.com 不在以下 request 合法域名列表中,请参考文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

官方文档里提到:

出于安全考虑,api.weixin.qq.com 不能被配置为服务器域名,相关API也不能在小程序内调用。 开发者应将 AppSecret保存到后台服务器中,通过服务器使用 getAccessToken 接口获取 access_token,并调用相关 API;

网上有人说可以配置微信开发者工具,不检验合法域名,我没仔细研究。

方法2:云函数

创建云函数 getMyOpenid ,默认生成的 index.js 文件内容如下:

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}

可见,默认返回值里已经包含了 openid

我们来测试一下。

修改 index.wxml ,添加以下内容:

<button style="width: 300rpx" type="primary" bindtap="getMyOpenid">获取openid</button>

<view style="text-align: center;">{{myOpenid}}</view>

修改页面的 index.js ,添加以下内容:

......
  data: {
    userinfo: {
      avatarUrl:'../../images/defaultUser.jpg',
      nickName:'未授权'
    },
    
    hasUserInfo: false,

    myOpenid: ''
  },

  getMyOpenid: function() {
    wx.cloud.callFunction({
      name: 'getMyOpenid'
    })
    .then(res => {
      console.log(res)

      this.setData({
        myOpenid: res.result.openid
      })
    })
  },
......

测试效果如下:

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

方法3:开发者服务器

具体方法就是官方文档里提到的,使用code和其它信息(AppId和AppSecret),访问微信服务器的接口地址 https://api.weixin.qq.com/sns/jscode2session?appid=<AppId>&secret=<AppSecret>&js_code=<code>&grant_type=authorization_code ,获取openid。

注:AppId和AppSecret,可以在 https://mp.weixin.qq.com 获取:

微信小程序获取用户信息,微信小程序,微信小程序
注意:AppID是公开的,AppSecret是私密的。

我没有具体试验过,有待研究。文章来源地址https://www.toymoban.com/news/detail-600232.html

参考

  • https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000cc48f96c5989b0086ddc7e56c0a
  • https://blog.csdn.net/calm_programmer/article/details/124207072

到了这里,关于微信小程序开发之获取用户信息的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序获取用户信息nickname为“微信用户”

    最近两天小程序用户登录获取到的用户微信名称都变成了\\\"微信用户\\\",在网上找到的问题原因是getUserProfile API被收回微信社区 头像昵称填写能力可以获取用户头像和昵称直接上代码,如果有更好的方案请留言!!!!!!!!

    2024年02月12日
    浏览(39)
  • 微信小程序-获取用户信息【梳理历史】

    有一个迭代的过程,时间很近 大概分为4个内容 1.2021年4月15日  简述:回收了一个接口,新增了一个接口 小程序登录、用户信息相关接口调整说明 | 微信开放社区 (qq.com) 通过wx.login接口获取的登录凭证可直接换取unionID 回收wx.getUserInfo接口可获取用户个人信息能力 新增getUse

    2024年02月11日
    浏览(45)
  • 微信小程序-获取用户头像信息以及修改用户头像

    这里主要用到 button的open-type 功能,官网已有说明: 给 button 设置 open-type=\\\"chooseAvatar\\\" ,来使 bindchooseavatar 方法生效,在 bindchooseavatar 指定的函数中获取用户的头像信息 该方法触发后会自动弹出提示框,让用户选择头像,用户选择的头像会在 bindchooseavatar 指定的函数内获取,

    2024年02月11日
    浏览(77)
  • 微信小程序:获取用户信息(昵称和头像)

    微信小程序获取用户信息的接口几经变更,建议直接使用方式四: wx.getUserProfile 获取 组件功能调整为优化用户体验,平台将于2022年2月21日24时起回收通过展示个人信息的能力。 如有使用该技术服务,请开发者及时对小程序进行调整,避免影响服务流程。查看详情: https://de

    2023年04月08日
    浏览(55)
  • 微信小程序登录,解决无法获取用户信息方法

    在上面的代码中,首先定义了应用的AppID和AppSecret。然后,实现了获取微信用户access_token的方法getAccessToken()和获取微信用户信息的方法getUserInfo()。其中,getAccessToken()方法需要传入微信小程序登录时获取的code,会返回一个包含access_token和openid的Map;getUserInfo()方法需要传入用户

    2024年02月11日
    浏览(64)
  • 【微信小程序】使用微信API获取用户信息实现登录

    实现步骤 1. 通过定义button按钮点击事件,点击登录后触发事件 2. 通过 wx.getUserProfile API 调用用户信息 3. 获取成功就将数据存储到本地存储中,使用 wx.setStorageSync(\\\'user\\\', user) 4. 存储完获取本地数据 wx.getStorageSync(\\\'user\\\') 5. 页面渲染数据 实现登录 wxml页面 js页面  wxss页面

    2024年02月05日
    浏览(50)
  • java对接微信小程序(登录&获取用户信息)

    用户通过小程序登录,进入到平台系统,进行各功能操作; 解决方案: 首先通过对接小程序,用户通过小程序登录及授权获取用户信息,后端调用接口获取微信用户信息,进行保存到数据库,然后返回token给前端(实际在这里相当于用户的一个注册及登录),前端使用该to

    2024年02月15日
    浏览(44)
  • 微信小程序之获取用户信息(流程+2种方法)

    获取流程图 ui库Vant Weapp: Vant Weapp地址(点击跳转) 第一种方法 适用于直接点击登录获取 在界面添加登录按钮,用户点击按钮调用wx.getUserProfile()函数来提示用户授权登录,授权成功后,把用户头像数据和名称数据保存到缓存区里,并且改变全局变量的值 点击登录后 登录成

    2024年02月11日
    浏览(40)
  • 微信小程序获取用户信息(附代码、流程图)

    本篇文章主要总结了微信小程序开发,获取用户信息的整个流程步骤。补充了网上很多碎片化的代码,本人梳理了思路写下了这篇文章。  前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家 跳转到教程   思路 1、在js文件中,设置use

    2024年02月09日
    浏览(47)
  • 微信小程序个人订单,微信头像用户名信息获取页面

    这里先做一个简单的展示,这个页面是我参加比赛做的小程序,分享给大家,不是很好看哈哈哈哈 话不多说,先上代码。首先是前端页面 .wxml   接下来是美化一下页面.wxss 最后就是js页面啦,这里涉及到微信头像昵称的获取,还有一些button的实现,我这里其他页面没有附着,

    2024年02月11日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包