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

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

首先在微信程序一个页面的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方法进行获取,但是只是采取了不同的数据处理方式,让开发更加的便捷

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

微信小程序开发之获取用户信息的两种方法的更多相关文章

  1. 微信小程序之html5 canvas绘图并保存到系统相册

    这篇文章主要介绍了微信小程序之html5 canvas绘图并保存到系统相册,需要的朋友可以参考下

  2. 微信小程序如何获取图片宽度与高度

    这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  3. 微信小程序多项选择器checkbox

    这篇文章主要为大家详细介绍了微信小程序多项选择器checkbox,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  4. 微信小程序实现收缩式菜单

    这篇文章主要为大家详细介绍了微信小程序实现收缩式菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. 微信小程序自定义状态栏

    这篇文章主要为大家详细介绍了微信小程序自定义状态栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  6. 微信小程序实现简单的购物车功能

    这篇文章主要为大家详细介绍了微信小程序实现简单的购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  7. 微信小程序实现手机号码验证

    这篇文章主要为大家详细介绍了微信小程序实现手机号码验证,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  8. 微信小程序预览二进制流文件的方法

    这篇文章主要为大家详细介绍了微信小程序预览二进制流文件的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  9. 微信小程序实现滚动条功能

    这篇文章主要为大家详细介绍了微信小程序实现滚动条功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. 微信小程序中显示html格式内容的方法

    最近在工作中遇到一个需求,需要在不能显示html格式的微信小程序中显示html格式的内容,通过查找相关的资料发现可以利用wxParse来实现,下面这篇文章就主要给大家介绍了微信小程序实现显示html格式内容的方法,需要的朋友可以参考借鉴,下面来一起看看吧。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部