用户页面代码

user.wxml

<block><view class="user_img_wrap" wx:if="{{userInfo.avatarUrl}}"><image class="user_bg" src="{{ userInfo.avatarUrl }}"></image><view class="user_info"><image class="user_icon" src="{{ userInfo.avatarUrl }}"></image><view class="user_name">{{ userInfo.nickName }}</view></view></view><view class="user_btn" wx:else><navigator url="/pages/login/login">登录</navigator></view>
</block>

user.js

Page({data: {userInfo:{},},onShow: function () {const userInfo = wx.getStorageSync("userInfo");this.setData({userInfo})},
})

先通过判断userInfo的值来显示不同的标签，如果有值那么授权登录成功了，如果没有值，那么就显示登录按钮跳转到登录页面进行授权登录。
login.wxml

<view class="login"><button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" type="primary" plain>登录</button>
</view>

// pages/login/login.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 获取用户信息*/handleGetUserInfo(e){const {userInfo} = e.detail;wx.setStorageSync("userInfo", userInfo);wx.navigateBack({delta: 1});}
})

在小程序中，如果将按钮的open-type值设置为getUserInfo，则按钮的功能为授权登录，详细解读请阅读官微文档wx.getUserInfo
使用bindgetuserinfo绑定授权登录事件，在下面展示一下函数 handleGetUserInfo(e)的参数e：

我们可以清楚的看到，在参数e.detail内，展示了用户ID、头像地址、用户名等信息，把这些信息做一次本地存储，在需要的页面获取到进行渲染

微信小程序授权登录(获取微信头像并显示)相关推荐

微信小程序授权登录获取用户头像和昵称时得到微信用户，记录getUserInfo转变为getUserProfile的使用修改
首先,在微信官方更新授权操作之前,我们一直使用getUserInfo来获取微信用户的头像和昵称以及openid,这个可以参考我的上一篇博客(使用getUserInfo获取用户头像),但是微信官方弃用g ...
微信小程序授权登录+获取手机号
微信小程序授权登录+获取手机号一.官方文档背景: 小程序登录的链接: 微信小程序获取手机号的链接: 二.微信小程序授权登录+获取手机号 1.简单说明官方文档的操作:先授权登录后拿手机号 2.前端代码 ...
SpringCloud 微信小程序授权登录获取openId SessionKey【SpringCloud系列13】
SpringCloud 大型系列课程正在制作中,欢迎大家关注与提意见. 自我提升方法推荐:神奇的早起早上 5:00 -5:20 起床刷牙 5:30-6:00 晨练(跑步.跳绳.骑自行车.打球等等) ...
基于Thinkphp5+EasyWeChat+fastadmin微信小程序授权登录获取手机号微信公众号网页---联合授权登录
战前准备 1.使用 composer 安装 EasyWeChat $ composer require overtrue/wechat:~4.0 -vvv 或者在composer.json文件renq ...
微信小程序授权登录获取用户信息详解
今天来说一下微信小程序的授权登录获取用户信息,首先我们看微信提供的小程序开发文档: https://blog.csdn.net/qq_41971087/article/details/82466647 ...
最新版微信小程序授权登录（自定义头像昵称）
根据官方微信小程序开发关于登录授权API的调整,自 2022年10月25日起有关API接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 "微信用户".(如下图所示) 那我 ...
微信小程序授权登录获取用户信息并保存至缓存用于下次登录
1.获取用户信息 wx.getUserProfile(Object object) 获取用户信息.页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗 ...
微信小程序授权登录——获取用户信息
小程序登录小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 登录流程时序效果展示: 功能实现: 新建一个login页面 login.js: wx. ...
微信小程序——按钮登录获取用户头像昵称、不需要获取权限就能显示头像和昵称、获取手机号（云端）
1.登录获取用户头像昵称代码 app.js App({globalData: {userInfo: null},onLaunch() {} }) . . . index.js const app = ...
微信小程序授权登录获取手机号,偶尔出现41003问题
最近做微信授权登录获取手机号有时会出现41003问题,研究半天网上查了不少资料,梳理下过程: 从文档可知主要是wx.login()获取code顺序问题 <button class="b ...

微信小程序授权登录(获取微信头像并显示)

用户页面代码

微信小程序授权登录(获取微信头像并显示)相关推荐

最新文章

热门文章