微信小程序获取头像、填写昵称

原创已于 2023-05-13 17:07:31 修改 · 2.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2022-12-06 11:36:12 首次发布

获取微信头像昵称的变化

open-type=“getUserInfo” 在2021年4月13日停用
wx.getUserInfo 在2021年4月28日停用
wx.getUserProfile 在2022年11月8日停用

chooseavatar 获取微信头像

wxml代码

<view data-weui-theme="{{theme}}">
  <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
    <image class="avatar" src="{{avatarUrl}}"></image>
  </button> 
  <mp-form>
    <mp-cells>
      <mp-cell title="昵称">
        <input type="nickname" class="weui-input" placeholder="请输入昵称"/>
      </mp-cell>
    </mp-cells>
  </mp-form>
</view>

js代码

	const app = getApp()
	
	const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	
	
	Page({
	  data: {
	    avatarUrl: defaultAvatarUrl,
	    theme: wx.getSystemInfoSync().theme,
	  },
	  onLoad() {
	    wx.onThemeChange((result) => {
	      this.setData({
	        theme: result.theme
	      })
	    })
	  },
	  onChooseAvatar(e) {
	    const { avatarUrl } = e.detail 
	    this.setData({
	      avatarUrl,
	    })
	  }
	})

获取到头像路径是临时的，需要上传到服务器存成永久地址；

或者转成base64存起来。
调整的公告
https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01

官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html