1.从基础库 2.21.2 开始支持
当小程序需要让用户完善个人资料时，可以通过微信提供的头像昵称填写能力快速完善。
根据相关法律法规，为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，已接入内容安全服务端接口（mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。具体使用方法
需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。同时将头像和昵称存到本地中。

代码示例

1、wxml

​ {imageUrl}}/MZWH/pm/bg-01.png')">           {image}}" style="width: 100%; height: 100%;">      
               昵称:                           
   ​

2、js

// pages/homePage3/homePage3.js const app = getApp(); const api = require('../../utils/api.js'); const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';  Page({    /**    * 页面的初始数据    */   data: {          image: defaultAvatarUrl,     imageUrl: app.data.imageUrl,     isIphoneX:app.data.isIphoneX,     area_id:app.data.area_id,     nickname: ''   }, //用户头像 assd: function (e) {   console.log("文件路径：" + e.detail.avatarUrl);   let headimg = e.detail.avatarUrl;      this.uploadFile(headimg);  },  onChooseAvatar(e) {   console.log(e.detail);   const { avatarUrl } = e.detail    this.setData({     avatarUrl,   }) },  uploadFile: function(filePath) {   console.log("文件路径：" + filePath);   wx.uploadFile({     url: '/upload', // 后端服务器 URL     filePath: filePath,     name: 'file', // 文件字段名     success: (res) => {       console.log('文件上传成功：', res.data);              // 解析 JSON 数据       let data;       try {         data = JSON.parse(res.data);       } catch (e) {         console.error('JSON 解析失败：', e);         return;       }              // 检查解析结果       if (data && data.fileurl) {         wx.setStorageSync('headimg', data.fileurl);         this.setData({           image: data.fileurl         });       } else {         console.error('后端返回数据格式不正确：', data);       }     },     fail: (err) => {       console.error('文件上传失败：', err);     }   }); }, // 用户名处理 formSubmit: function(e) {   let nickname = e.detail.value;     console.log(e.detail.value)   wx.setStorageSync('nickname', nickname);   this.setData({nickname}); },        homePage: function () {     wx.navigateBack({       delta: 2     })   },    /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     this.setData({       area_id: app.data.area_id     })   },    /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {    },    /**    * 生命周期函数--监听页面显示    */   onShow: function () {    },    /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {    },    /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {    },    /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {    },    /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {    },    /**    * 用户点击右上角分享    */   onShareAppMessage: function () {    } })

3、wxss

/* pages/map/map.wxss */  page {   height: 100%;   width: 100%; }  .button {   width: 100%;   height: 200px; }      .button button {   width: 25%;   height: 100px;   margin-top: 50px;   background-color: #ffffff; }   .button image {   width: 150%;   height: 100%; }   .name {   width: 100%;   height: 50px;   border: 1px solid #cecccc;   margin-top: 90px;   display: flex;   border-radius: 10px; /* 适度减小圆角半径，以保留一定的角度 */   overflow: hidden; /* 确保内容超出部分不显示在圆角区域之外 */ }  .name_text {   width: 40%;   height: 50px;   line-height: 50px;   font-weight: bold;   font-size: 15px;   padding-left: 5%; }  .input_wrapper {   width: 60%;   display: flex;   align-items: center; }  .input_field {   width: 100%;   height: 100%;   padding: 0 10px;   border: none;   outline: none;   background-color: transparent;   font-size: 15px; }     .enter {   width: 100%;   display: flex;   justify-content: center;   margin-top: 100px; } .map {   height: 100%;   width: 100%;   background-size: 100% 100%;   -moz-background-size: 100%;   background-repeat: repeat;   display: flex;   flex-direction: column;   justify-content: center;   align-items: center; }  .slideButton {   width: 40rpx;   height: 40rpx;   background-size: 100%;   background-color: gray;   background-position: center;   position: absolute;   top: 30rpx;   left: 30rpx;   border: none;   border-radius: 50%; }  .mapHome {   height: 100%;   width: 100%;   background-size: 100% 100%;   -moz-background-size: 100%;   background-repeat: repeat;   overflow: hidden;   position: relative;   display: flex;   flex-direction: column;   align-items: center;    } .buttonView{   display: flex;   flex-direction: column;   align-items: center;   margin-top: 105%; }  .buttonViewBig{   display: flex;   flex-direction: column;   align-items: center;   margin-top: 125%; }  .mapHome button{   width: 220rpx;   animation: dh 3s infinite linear;   background-repeat:no-repeat; background-color: transparent; border-style: none; background-size: 100% 100%; -moz-background-size: 100%; background-repeat: repeat; border-radius: 175rpx; } .startButton {   width: 260rpx; /* 调整按钮宽度为200rpx */   height: 240rpx;   background-image: url('{{imageUrl}}/MZWH/pm/start.png');   background-size: contain; /* 使用contain保持完整显示图片 */   background-repeat: no-repeat;   background-position: center;   border: none; } @keyframes dh {   0% {        opacity: 1   }     50% {     opacity: 0.5   }     100% {     opacity: 1   }  }  .mapPoint {   position: absolute;   top: 170rpx;   right: 0;   width: 660rpx;    }  .mapButton {   position: absolute;   left: 50%;   margin-left: -220rpx;   bottom: 44rpx;   width: 400rpx; }  .box {   width: 150rpx;   height: 150rpx;   background-color: #309fdf;   border-radius: 100rpx;   position: absolute;   top: 64%;   left: 52%; }  .box {   animation: dh 2s infinite linear;    animation-delay:0.5s; }  .box1 {   width: 150rpx;   height: 150rpx;   background-color: #309fdf;   border-radius: 100rpx;   position: absolute;   top: 64%;   left: 52%; }  .box1 {   animation: dh 2s infinite linear;   }   

手机示例