【微信小程序：获取用户头像和昵称】

munume

已于 2024-08-20 19:11:08 修改

阅读量720

点赞数 13

文章标签：微信小程序

于 2024-08-19 20:51:11 首次发布

本文链接：https://blog.csdn.net/m0_67893784/article/details/141334480

版权

2024年夏季《移动软件开发》实验报告

实验名称	实验1：第一个微信小程序
Gitee仓库地址	numune/Mobile_Software (gitee.com)

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1. 全局设计

app.json 文件

在pages文件夹下创建index页面

设置导航栏的背景颜色为#eeeeff，字体为黑色

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#eeeeff",
    "navigationBarTitleText": "我的第一个小程序"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

导航栏设计效果如下：

在这里插入图片描述

app.wxss文件

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

2. 创建文件夹images

用于存放图像

在这里插入图片描述

3. index页面的设计与功能实现

组件设计

在index.wxml中使用三个组件：

组件：用于显示初始图片和头像，用变量userInfo.avatarUrl保存图像信息，便于替换
组件：用于显示昵称，用变量userInfo.nickName保存文字信息
组件：点击实现对应功能，用变量func显示按钮当前的功能

<view class="container">
      <image bindtap="bindViewTap"  src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text>{{userInfo.nickName}}</text>
      <view wx:if= '{{!hasUserInfo}}'>
        <button bindtap="getUserProfile">{{func}} </button>
      </view>
      <view wx:else>
        <button bindtap="logout">{{func}} </button>
      </view>
</view>

这里的逻辑设计：

我们需要用hasUserInfo属性来判断是否已经获取了用户信息。如果没有，则点击button组件时调用getUserProfile方法来获取信息；如果有，则此时再点击button组件将调用logout方法来退出登陆

页面布局

在index.wxss中对页面布局进行设置

.container{
  height:100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

image{
  width:400rpx;
  border-radius: 50%;
}

text{
  font-size:50rpx;
}

button{
  font-size: medium;
  background-color: #eeefff;
}

设计效果如下：

在这里插入图片描述

功能实现

在index.js文件中完成，在Page({})中补充代码

定义data对象

初始状态时用图像代替用户头像，

用文字代替用户昵称，

用hasUserInfo记录当前是没有获取用户信息的状态，

用func表示当前button组件的点击功能
```
data: {
      userInfo: {avatarUrl:'/images/2.jpg',nickName:"欢迎来到我的小程序🥰"},
      hasUserInfo: false,
      func: "获取头像昵称"
    },
```

方法getUserProfile(e)用于实现获取用户信息的功能

调用微信小程序提供的API：wx.getUserProfile，弹出用户信息授权框，用户同意后执行回调函数，此时获得用户的头像和昵称，更新页面数据
调用API：wx.showToast，显示一个轻提示，告知用户正在登录

getUserProfile(e) {
      wx.getUserProfile({
        desc: '授权', 
        success: (res) => {//用户同意授权
          this.setData({
            userInfo: res.userInfo,
            func:"退出",
            hasUserInfo: true
          })
        }
      })
      wx.showToast({//显示一个轻提示，告知用户正在登录
        icon:"loading",
        title: '正在登陆'
      })
    },

获取用户信息时的效果如下：

在这里插入图片描述

方法logout用于实现退出登陆

调用API：wx.showToast，显示一个轻提示，告知用户已经退出登陆
更新页面数据为初始值

logout(e){
      wx.showToast({
        icon:"success",
        title: '已退出登录'
      })
      this.setData({
        userInfo: {avatarUrl:'/images/2.jpg',nickName:"欢迎来到我的小程序🥰"},
        hasUserInfo: false,
        func: "获取头像昵称"
      })
    },