Personal interface writing of WeChat applet (version 2023.5.9)

introduction

Considering the recent feedback from developers on the interface adjustments related to mini-program login and user information, in order to optimize the experience of developers adjusting the interface, the deadline for reclaiming the ability to obtain user-authorized personal information through the wx.getUserInfo interface has been adjusted from April 13, 2021 to April 28, 2021 at 24:00.
Official Notification Document

purpose of writing

When we develop WeChat applets, we basically have a personal center interface, referred to as my interface, which stores the personal information, personal settings, and personal data records of each user. So this article mainly made a record for this page to prevent forgetting (the original old method can no longer be used, woo woo, I need to record it)

Renderings show

This picture is on the emulator. On the real machine, click the round button button "Avatar" and label "Please enter a nickname" to edit the corresponding nickname

Mainly to record the latest methods of obtaining user avatars and nicknames

programming

sth.wxml

<view class='container'>

<!--头像名称-->
<view class="partOne">
  
  <view style="display: flex; flex-direction: row;">
  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" src="{
     
     {avatarUrl}}"></image>
  </button> 
<view style="display: flex; flex-direction: column;justify-content: center;"> 
<input type="nickname"  placeholder="请输入昵称" />
</view>
</view>
  <view class="scanicon">
    <image src="../../icon/news/sao.png" />
  </view>
</view>

<!--我的分值、扫一扫-->
<view class="partTwo">
  <!--我的分值-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/person_message.png" /></view>
      <view ><text >个人信息</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
  <!--扫一扫-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/account_safe.png" /></view>
      <view ><text >账号安全</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
</view>
</view>

<!--关于我们、使用帮助、绑定个人信息-->
<view class="partThree">
  <!--关于我们-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/about.png" /></view>
      <view ><text >关于我们</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
  <!--使用帮助-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/help.png" /></view>
      <view ><text >使用帮助</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
  <!--绑定个人信息-->
  <view class="item">
    <view class="itemname">
      <view ><image src="../../icon/icon/exit.png" /></view>
      <view ><text >退出登录</text></view>
    </view>
    <view class="right"><image src="../../icon/icon/right_arrow.png" /></view>
  </view>
</view>
</view>

sth.wxss

/* pages/try/try.wxss */
.avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 50%;
  margin:  20px 20px !important;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;  
}

.container{
  background-color: #eeeeee;
  height : 100vh;
}
.partOne {
  display: flex;
  justify-content: space-between;
  background-color: #7bf38b;
  padding-top: 130rpx;
  padding-bottom: 130rpx;
}
.userinfo {
  display: flex;
  align-items: center;
  height: 128rpx;
  margin-left: 40rpx;
  color: rgb(255, 255, 255);
}


.partOne .scanicon{
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 128rpx;
  margin-right: 80rpx;
}
.partOne .scanicon image{
  width: 80rpx;
  height: 80rpx;
}

.partTwo{
  height: 200rpx;
  width: 90%;
  margin-left: 5%;
  margin-top: -50rpx;
  background-color: #ffffff;
  border: 1rpx solid rgb(176, 176, 176);
  border-radius: 25rpx;
}
.partTwo .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
}
.partTwo .item .itemname{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 210rpx;
  margin-left: 20rpx;
}
.partTwo .item .itemname image{
  width: 60rpx;
  height: 60rpx;
}
.partTwo .right{
  margin-right: 20rpx;
}
.partTwo .right image{
  width: 50rpx;
  height: 50rpx;
}

.partTwo .scan{
  display: flex;
  align-items: center;
  height: 100rpx;
}
.partTwo .scan .itemname{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 180rpx;
  margin-left: 20rpx;
}
.partTwo .scan image{
  width: 60rpx;
  height: 60rpx;
}

.partThree{
  height: 300rpx;
  width: 90%;
  margin-left: 5%;
  margin-top: 10rpx;
  background-color: #ffffff;
  border: 1rpx solid rgb(176, 176, 176);
  border-radius: 25rpx;
}

.partThree .item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
}
.partThree .item .itemname{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 210rpx;
  margin-left: 20rpx;
}
.partThree .item .itemname image{
  width: 60rpx;
  height: 60rpx;
}
.partThree .right{
  margin-right: 20rpx;
}
.partThree .right image{
  width: 50rpx;
  height: 50rpx;
}

sth.js

// pages/my/my.js
const app = getApp()

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl: defaultAvatarUrl,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
   onLoad() {
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

Note 1: The json file is not used
Note 2: The small icons used are all found by the Alibaba vector library
vector library

Directory Structure

Easy to see the picture reference path
insert image description here

so it is
<view ><image src="../../icon/icon/person_message.png" /></view>