微信小程序如何来获取用户头像昵称

大家一定对下面这个图不陌生吧，我们在进入小程序之前，都会遇见类似这样的情况，那么这个是怎么用微信开发者工具实现的呢？

要求

1.首先，我们打开微信开发者工具，新建一个项目，并打开，比如说我新建的是page。

2.当打开开发者工具时，默认会生成一下文件：

我们在app.json这个文件夹中写配置，我们要实现当程序运行时首先进入到获取用户信息的界面，然后当用户同意时进入到下一个界面

3.所以，相信你已经猜出来了，我们要将这个代码写在index文件里面，下面我们就在index这个文件夹里面写获取用户的头像和昵称的代码了。

4.打开index这个文件，我们在index这个文件夹里面，有我们事先创好的目录，它包含：index.js和index.wxml和index.wxss三个文件

4.首先我们要写这个获取用户头像的样式，并且将用户的头像显示出来，如何实现将用户的头像显示出来呢，我们将用到微信小程序里面的“open-data”这个标签

下面我把我写好的index.wxml代码展现一下：

讲解：首先我们将所有的内容写在一个view标签中并用if:{{canIuse}}的形式来判断该页面是否可以显示
，下面展示一下index.json文件中的代码。

 data: {canIUse: wx.canIUse('button.open-type'), //判断button下的open.type属性是在当前版本否支持isHide:false},

“wx.canIUse”这的目的就是要判断button下的open-type属性在当前微信版本支持如果支持的话，其他view标签也可以显示出来。

wxss代码：

.header {position: relative;margin: 90rpx 0rpx 90rpx 50rpx;width: 650rpx;height: 320rpx;color: #fff;display: flex;flex-direction: column;align-items: center;     /*居中对齐弹性盒子当中的各项元素*/border-bottom: 1px solid #ccc;
}
.userinfo-avatar {overflow:hidden;display: block;width: 160rpx;height: 160rpx;margin: 20rpx;margin-top: 50rpx;border-radius: 50%;border: 2px solid #fff;box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.content {margin-left: 50rpx;margin-bottom: 90rpx;
}
.content text {display: block;color: #9d9d9d;margin-top: 40rpx;
}
.bottom {border-radius: 80rpx;margin: 70rpx 50rpx;font-size: 35rpx;
}

当我们把这些都布局好了之后，想一下，当用户已经用了这个小程序，并且已经获取到他的基本信息了，下次登录还需要获取他的信息吗？肯定不需要了，所以我们要在onLoad:function(options)（也是就是程序打开的时候首先运行的函数中）：

 onLoad: function (options) {wx.getSetting({     //获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。success: function(res)              //返回成功时{if(res.authSetting['scope.userInfo'])  //授权用户信息{wx.getUserInfo({              //获取用户的信息成功后并打印在控制台success:function(res){console.log(res.userInfo);}});}}})},

wx.getsetting 用来获取用户当前的设置（用户已经登录）

那么，如果用户没有授权是不是需要授权登录呢？
我们上面index.wxml中有定义一个bindgetUserInfo的函数所以下面这个函数中我们要写，如果用户没有授权需要进行交互，判断用户是否授权：

 bindGetUserInfo:function(e)     //当用户点击授权登录按钮触发 bindGetUserInfo函数{if(e.detail.userInfo)      //触发后返回到detail中，detail调用userInfo获取用户信息{wx.switchTab({              //获取完用户信息进入的界面，我这边写的时classic这个界面中url: '/pages/classic/classic',});}else{wx.showModal({           //如果用户选择拒绝,会提示用户是否返回去授权title: '提示',content: '您选择了拒绝您将无法进入小程序当中',showCancel:false,confirmText:'返回授权',success:function(res)   {if(res.confirm){console.log("点击了授权登录")}}});}},

感谢您的观看
望大家多多支持，共同学习一些编程技巧

微信小程序实现登录获取头像昵称相关推荐

微信小程序——读取显示用户头像昵称
微信小程序--读取显示用户头像昵称代码仓库地址一.实验目标 1.学习使用快速启动模板创建小程序的方法: 2.学习不使用模板手动创建小程序的方法. 二.实验步骤 2.1 自动生成小程序完成开发者注 ...
微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...
SpringCloud 微信小程序授权登录获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...
微信小程序授权登录获取用户头像和昵称时得到微信用户，记录getUserInfo转变为getUserProfile的使用修改
首先,在微信官方更新授权操作之前,我们一直使用getUserInfo来获取微信用户的头像和昵称以及openid,这个可以参考我的上一篇博客(使用getUserInfo获取用户头像),但是微信官方弃用g ...
微信小程序——按钮登录获取用户头像昵称、不需要获取权限就能显示头像和昵称、获取手机号（云端）
1.登录获取用户头像昵称代码 app.js App({globalData: {userInfo: null},onLaunch() {} }) . . . index.js const app = ...
【微信小程序开发】用户头像昵称获取规则调整 2022
之前通过wx.getUserInfo获取用户的头像.昵称等信息 2021年4月调整为通过wx.getUserProfile获取用户的头像.昵称等信息详情请看:https://developers.w ...
微信小程序授权登录获取用户名和昵称
微信授权官方文档登录流程时序: 这里我是用微信开发者工具写的前端 login.wxml代码: <view class="userinfo"><block wx: ...
微信小程序授权登录获取用户信息并保存至缓存用于下次登录
1.获取用户信息 wx.getUserProfile(Object object) 获取用户信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗 ...

微信小程序实现登录获取头像昵称

微信小程序如何来获取用户头像昵称

要求

wxss代码：

微信小程序实现登录获取头像昵称相关推荐

最新文章

热门文章