iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序开发之获取用户信息的两种方法
  • 526
分享到

微信小程序开发之获取用户信息的两种方法

2024-04-02 19:04:59 526人浏览 八月长安
摘要

今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事

今天介绍两种微信小程序获取用户信息的方法

第一中直接授权获取(在同一页面之中):

首先在微信程序一个页面的WXML文件写入获取用户信息的按钮

<!-- bindTap用于绑定事件 -->
<button type="default"  bindtap="getUserInfor"> 登录</button>
<!-- 展示获取到的用户信息 -->
<image  src="{{userinfor.avatarUrl}}" />
<view> {{userinfor.nickName}}</view>

然后是在js页面写具体点击事件的逻辑结构

 data: {
        userinfor:{},//用户存放获取到的用户信息
    },
    getUserInfor(e){
       wx.getUserProfile({
         desc: '用来完善用户个人信息',//展示的消息
         success:(res)=>{
             console.log(res.userInfo)//将用户信息打印至控制台
            this.setData({ userinfor:res.userInfo})//将信息保存到定义的容器里
         }
       })
    }

第二种方式可以实现不同页面获取用户信息:

第二中的主要思想就是将用户信息先获取到,然后将其存放在缓存中,然后再跳转到其他页面对缓存中的数据进行获取

首先我们要从A页面进入到B页面

A页面WXML代码

<button bindtap="Goto" > 进入登录页面</button>
<!-- 展示用户信息 -->
<image  src="{{userinfor.avatarUrl}}" />
<view> {{userinfor.nickName}}</view>

A页面JS页面代码

//
    data: {
        userinfor:{},
    },

   goto(){
       wx.navigateTo({
         url: '../text/text',
       })
   }

B页面WXML页面代码

<button type="default"  bindtap="getUserInfor"> 登录</button>

B页面JS页面代码

   data: {
        
    },
    getUserInfor(e){
       wx.getUserProfile({
         desc: '用于获取用户信息',
         success:(res)=>{
            const userinfor = res.userInfo
            //将用户数据写入缓存
           wx.setStorageSync('UserInfo', userinfor);
           //跳回前一个页面
           wx.navigateBack({
               delta:1
           })
         }
       })
    }
   

当我们点击B页面登录按钮并且允许获取用户信息时,我们可以发现控制台缓存页面会跳出一个KEY值为UserInfo的键值,这就说明我们已经把用户的信息存放入缓存之中,接下来就是如何将缓存中的信息取出来,接下来我们就来到A页面编写获取缓存中数据的方法,

A页面JS页面中添加onShow方法,或者在原有的onShow方法里添加下列方法中的代码

 data: {
      userinfor:{},
 },
 onShow(){
       const userinfor = wx.getStorageSync('UserInfo')
       this.setData({ userinfor })
    }

这时就成功将用户数据写入缓存在从其他页面读取数据

总结

其实两种获取方式都是一样的,都是用wx.getUserProfile方法进行获取,但是只是采取了不同的数据处理方式,让开发更加的便捷

到此这篇关于微信小程序开发之获取用户信息的文章就介绍到这了,更多相关微信小程序获取用户信息内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序开发之获取用户信息的两种方法

本文链接: https://www.lsjlt.com/news/143646.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序开发之获取用户信息的两种方法
    今天介绍两种微信小程序获取用户信息的方法 第一中直接授权获取(在同一页面之中): 首先在微信程序一个页面的WXML文件写入获取用户信息的按钮 <!-- bindTap用于绑定事...
    99+
    2022-11-13
  • 微信小程序开发之获取用户信息
    环境 微信开发者工具 Stable 1.06.2303220云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识。注意, openid 并不是微信用户的...
    99+
    2023-09-27
    微信小程序
  • 微信小程序开发怎么获取用户信息
    这篇文章主要介绍了微信小程序开发怎么获取用户信息的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序开发怎么获取用户信息文章都会有所收获,下面我们一起来看看吧。第一中直接授权获取(在同一页面之中):首先在微...
    99+
    2023-06-29
  • 微信小程序获取用户信息
    要在微信小程序中获取用户信息,你可以按照以下步骤进行操作: 在小程序的app.json文件中添加"scope.userinfo"权限,例如: ``` "permission": {   "scope.userinfo": {     "d...
    99+
    2023-09-21
    微信小程序 小程序
  • 微信小程序开发中如何获取用户信息
    这篇文章主要为大家展示了微信小程序开发中如何获取用户信息,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“微信小程序开发中如何获取用户信息”这篇文章吧。wx.getUserInfo(OBJECT)获取...
    99+
    2023-06-26
  • 微信小程序如何获取用户信息
    自我介绍 我是IT果果日记,微信公众号请搜索 IT果果日记 一个普通的技术宅,定期分享技术文章,欢迎点赞、关注和转发,请多关照。 微信小程序用户基本信息有哪些? 除了基本信息,微信还会提供openId和union...
    99+
    2023-09-05
    微信小程序 小程序 微信 Powered by 金山文档
  • 小程序开发如何获取用户信息
    这篇“小程序开发如何获取用户信息”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“小程序开发如何获取用户信息”文章吧。有两种获取...
    99+
    2023-06-26
  • 微信小程序实现授权登录之获取用户信息
    本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内...
    99+
    2022-11-13
  • 微信小程序获取用户位置的方法
    微信小程序获取用户位置的方法 :1、 wx.getLocation(多与wx.openLocation一起用)。2、 wx.chooseLocation。3、wx.openLocation。 wx.getLocation(多与wx.open...
    99+
    2022-10-20
  • 微信小程序实现授权登录之怎么获取用户信息
    这篇文章主要讲解了“微信小程序实现授权登录之怎么获取用户信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序实现授权登录之怎么获取用户信息”吧!小程序登录小程序可以通过微信官方提供的...
    99+
    2023-06-30
  • 微信小程序使用uni-app一键获取用户信息
    用户不想输入账号密码,一键登录  <label for="" @click="LoginDL">一键登陆</label> uni.getUserPr...
    99+
    2023-01-28
    微信小程序使用uni-app一键获取用户信息 uni-app一键获取微信小程序用户信息
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
    🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc...
    99+
    2023-10-26
    小程序 微信小程序 微信 1024程序员节
  • 微信小程序获取用户openid的方法详解
    目录获取openid的思路需要修改的地方完整代码总结小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系然而因为小程序中的openid不可...
    99+
    2022-11-13
  • IVX低代码平台——微信小程序获取用户信息
    写在前面 小程序可以通过方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。本文将向大家展示低代码开发:小程序实现获取用户信息的方法,供大家参考。 文章目录 写在前面开发概述准备工作用户组件发起小程序登录用户组件获...
    99+
    2023-08-17
    低代码 微信小程序 小程序
  • uniapp开发小程序之获取用户基本信息与手机号方式
    介绍 首先讲讲小程序的登录注册,一般登录首先需要获取code code的有效期是十五分钟左右,前端通过接口获取到code之后传给后端,然后后端会根据code来判断是否有该用户,并且后台可以携带code发送请求,获取到用户 openid,es...
    99+
    2023-08-31
    uni-app 小程序
  • 微信小程序分享及授权获取用户信息接口调整的方法
    这篇文章主要介绍了微信小程序分享及授权获取用户信息接口调整的方法的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇微信小程序分享及授权获取用户信息接口调整的方法文章都会有所收获,下面我们一起来看看吧。调整方案具体如...
    99+
    2023-06-26
  • 微信小程序开发之用户授权登录的方法
    这篇文章将为大家详细讲解有关微信小程序开发之用户授权登录的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。准备:微信开发者工具下载地址:https://developers.weixin.qq.com/...
    99+
    2023-06-14
  • 微信小程序如何授权获取用户详细信息openid
    这篇文章主要介绍微信小程序如何授权获取用户详细信息openid,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序获取用户的头像昵称openid之类第一种使用wx.getUserIn...
    99+
    2022-10-19
  • Thinkphp5微信小程序如何实现获取用户信息接口
    这篇文章主要为大家展示了“Thinkphp5微信小程序如何实现获取用户信息接口”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Thinkphp5微信小程序如何实现...
    99+
    2022-10-19
  • 微信小程序登录方法之授权登陆及获取微信用户手机号
    目录先看一下小程序的登陆流程第一步, 调用微信登陆方法 wx.login() 获取临时登录凭证code ,并回传到开发者服务器。​​​​​第二步,获取用户信息,点击事件,获...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作