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

获取微信头像昵称的变化

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

微信小程序中,获取用户头像昵称通常需要用户的授权。以下是获取用户信息的基本步骤: 1. **获取用户权限**: 首先,在`app.json`文件中配置页面的“permission”属性,设置需要用户授权的scope,如:“scope.userInfo”。 ```json { "pages": [ "pages/index/index", ... ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Wechat Mini Program", "navigationBarTextStyle": "black" }, "permission": { "scope.userInfo": { "desc": "用于打开用户信息,获取头像昵称" } } } ``` 2. **在wxml和js文件中请求授权**: 在需要获取用户信息的页面组件里,通过wx.getUserInfo函数请求授权。 ```javascript Page({ onReady: function() { wx.getSetting({ success(res) { if (res.authSetting['scope.userInfo']) { // 如果已授权 this.getUserInfo(); } else { wx.authorize({ // 弹窗提示用户授权 scope: 'scope.userInfo', success() { this.getUserInfo(); } }); } } }); }, getUserInfo: function(e) { wx.getUserInfo({ success(res) { let userInfo = res.userInfo; let avatarUrl = userInfo.avatarUrl; // 用户头像URL let nickname = userInfo.nickName; // 用户昵称 console.log('User Info:', { avatarUrl, nickname }); // 进行后续处理,比如保存到本地或服务器 }, fail(err) { console.error('Failed to get user info', err); } }); } }) ``` 3. **处理权限拒绝的情况**: 如果用户拒绝授权,可以在`fail`回调中给出相应的提示或处理方式。 记得在实际项目中,要遵守微信小程序的相关隐私政策,并明确告知用户你为何需要他们的头像昵称信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值