微信获取昵称头像存储服务器（最新方法）

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

代码示例

1、wxml

​
<view class="map"  style="background-image: url('{{imageUrl}}/MZWH/pm/bg-01.png')">
  <button open-type="chooseAvatar" bindchooseavatar="assd" style="border-radius: 50%;">
  <view style="width: 100px; height: 100px; overflow: hidden;">
    <image src="{{image}}" style="width: 100%; height: 100%;"></image>
  </view>
</button>

<form catchsubmit="formSubmit" catchreset="formReset" report-submit="true" >
  <view class="name" style="background-color: white;">
    <view class="name_text">
      昵称:
    </view>
    <view class="input_wrapper">
      <input class="input_field" placeholder="请输入昵称" type="nickname" bindinput="formSubmit" />
    </view>
  </view>

</form>
</view>

​

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;
 
}

手机示例