小程序获取用户的登录头像和用户名

本案例可加小程序交流群在文件中获取本例代码。(找到今日日期就可以找到本文件)。本案例复制有可能会报错。因为标点有可能报错。只做参考

WXML:

<view class="page-body-info">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="btn-area">
  <button type="primary" bindtap="getUserInfo">获取用户信息</button>
</view>

WXSS:

复制代码
.page-body-info {
  padding-bottom: 0;
  height: 230px;
}
.userinfo-avatar {
  border-radius: 128rpx;
  width: 128rpx;
  height: 128rpx;
}
.userinfo-nickname {
  margin-top: 20rpx;
  font-size: 38rpx;
}
复制代码

JS:

复制代码
Page({
  data: {
  },
  getUserInfo: function () {
    var that = this
    _getUserInfo();
    function _getUserInfo() {
      wx.getUserInfo({
        success: function (res) {
          that.setData({
            userInfo: res.userInfo
          })
          that.update()
        }
      })
    }
  }
})
复制代码

 

posted @   生如逆旅,一苇以航  阅读(24118)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示