微信小程序使用头像昵称填写完成头像上传

燕哥学前端

于 2023-04-07 19:24:43 发布

阅读量3.5k

点赞数

文章标签：微信小程序 javascript 小程序

本文链接：https://blog.youkuaiyun.com/weixin_56733569/article/details/130018796

版权

本文介绍了在微信小程序中如何在用户触发组件后获取并使用其头像和昵称信息，详细讲解了相关的WXML和JS代码实现过程，适合小程序开发新手学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

去年微信调整了用户信息获取的api后，现在获取用户头像和昵称只能通过用户自己触发组件拿到用户信息，那到底怎么做呢，下面跟大家分享一下我是怎么做的（新手，请多多包涵，有问题欢迎指出）

在这里插入图片描述

wxml：

<view class="top">
    <button class="avatar-wrapper" 
	    open-type="chooseAvatar" 
	    bind:chooseavatar="onChooseAvatar"
    >
      <image class="avatar" src="{
   {avatarUrl}}"></image>
    </button> 
    <van-icon name="edit"  class="edit" />
    <input type="nickname" 
	    class="weui-input"  
	    placeholder="微信用户"  
	    bind:change="getNickname" 
	    maxlength="10" 
	    value="{
   {username}}"/>
  </view>

js：

// 后端接口
import {
   getUserInfo,updateUserInfo,uploadPhoto} from '../api/profile/profile.js'

// 默认头像
const

最低0.47元/天解锁文章