小程序获取头像昵称最新版本

由于之前用到的微信小程序授权登录的接口已经被更新升级，
官方文档
我的实现方式是先在页面上留出头像的位置，点击头像会弹出微信官方文档给出的获取头像和昵称的弹窗，选择当前微信头像或者手机相册的照片后获取到选择的照片，提交之后页面上的默认头像变为所选择的图片。
以下是具体代码：
wxml：

<view class="details"><view class="userinfo-avatar"><!-- <open-data type="userAvatarUrl"></open-data> --><image class="avatar" src="{{avatarUrl}}" mode="cover" bindtap="getInfo" /></view><view class="nikeName"><!-- <open-data type="userNickName"></open-data> --><input type="nickname" class="weui-input" name="nickname" /></view></view>

<!--遮罩层  --><view class="shade" wx:if="{{shows}}" bindtap='close'></view><!--弹出面板区域  --><view class="cont" data-weui-theme="{{theme}}" wx:if="{{shows}}"><button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image></button><form catchsubmit="formSubmit"><view class="row"><view class="text1">昵称：</view><input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称" /></view><button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit" bindtap='close'>提交</button></form></view>

wxss：

.userinfo-avatar {overflow: hidden;width: 56px;height: 56px;border-radius: 50%;
}
.details {width: 380px;height: 100px;display: flex;align-content: center;margin-left: 10px;
}.nikeName {margin: 30px 0px 0px 20px;
}
.
avatar-wrapper {padding: 0;width: 56px !important;border-radius: 8px;margin-top: 40px;margin-bottom: 40px;background-color: #fff;
}.avatar {display: block;width: 56px;height: 56px;
}.container {display: flex;
}
.row{border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;display: flex;align-items: center;height: 80rpx;padding-left: 20rpx;
}
.text1{flex: 2;
}
.weui-input{flex: 6;
}.shade{width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;background-color: rgba(0,0,0,0.8);opacity: 0.9;overflow: hidden;
}   .cont {width: 70%;height: 260px;z-index: 2;overflow: hidden;position: fixed;bottom: 30%; font-size: 32rpx; border-radius: 10rpx; background-color: #fff;
}

js:

const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({data: {avatarUrl: defaultAvatarUrl,theme: wx.getSystemInfoSync().theme,userInfo: {},},onLoad() {console.log("进入小程序")let user = wx.getStorageSync('userInfo')console.log("获取到的缓存", user)wx.onThemeChange((result) => {this.setData({theme: result.theme})})this.setData({userInfo: user})if (wx.getUserProfile) {this.setData({canIUseGetUserProfile: true})}},onShow: function () {//获取用户的本地缓存数据，userinfo信息是在用户授权登录时保存的var n = wx.getStorageSync("userinfo");//当本地缓存的用户名称不为""或者null时，设置userinfo信息if (n.nickName != '' && n.nickName != null) {this.setData({userinfo: n,hasUserInfo: true,canIUseGetUserProfile: true})// 通过wx.login获取登录凭证（code），然后通过code去获取我们用户的openidwx.login({success: (res) => {console.log(res);},})}//清空缓存信息，测试使用// wx.removeStorage({//     key: 'userinfo',// });},onChooseAvatar(e) {const { avatarUrl } = e.detail this.setData({avatarUrl,})},formSubmit(e){console.log('昵称：',e.detail.value.nickname)},getInfo: function () {this.setData({shows: true,})},close: function () {this.setData({shows: false,})},
})

小程序获取头像昵称最新版本相关推荐

微信小程序获取头像昵称能力API
先贴出官方文档头像昵称填写 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-abil ...
微信小程序获取头像昵称保存头像到服务器
微信官方推荐的替代做法: 头像昵称填写 | 微信开放文档 (qq.com) wxml <button class="avatar" open-type="choos ...
微信小程序获取头像昵称，限制头像大小
把用户的头像上传,限制在2M以内代码 that.onChooseAvatar = (e) => {console.log('onChooseAvatar2', e);const avatarU ...
小程序用户头像昵称获取规则调整公告及微信小程序基础库的问题
更新时间:2022年11月9日由于 PC/macOS 平台「头像昵称填写能力」存在兼容性问题,对于来自低于2.27.1版本的访问,小程序通过 wx.getUserProfile 接口将正常返回用户头 ...
最新uniapp 微信小程序获取头像操作指南
小程序用户头像昵称获取规则调整公告调整说明自 2022 年 10 月 25 日 24 时后(以下统称 "生效期" ),用户头像昵称获取规则将进行如下调整: 自生效期起,小程序 ...
关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式
一.背景小程序用户头像昵称获取规则调整公告:小程序用户头像昵称获取规则调整公告 | 微信开放社区二.案例 1.点击登录按钮点击登录按钮,先去检查用户授权信息,会弹出用户授权弹窗(首次),用户点击 ...
taro小程序用户头像昵称获取
微信发布<小程序用户头像昵称获取规则调整公告>之后,无法再使用getUserProfile获取用户头像和昵称,因此小程序官方提供了头像昵称填写功能来完善个人资料. 对button添加ope ...
小程序获取头像试试水 02《程序员变现指南之微信QQ 小程序真的零基础开发宝典》
本系列教程是针对粉丝的变现教程,还不是粉丝的可以关注我并且到社区:https://bbs.csdn.net/topics/603436232 进行打卡,不是老粉的也可以获取最终的技术变现学习,最终还有 ...
关于微信小程序新版头像昵称API 接口处理
根据微信官方文档的说法,2022年10月之后,原本的获取昵称和头像的api,也就是wx.getUserProfile和wx.getUserInfo将停止支持,在那之后发布和更新的小程序必须停止使用这两 ...

小程序获取头像昵称最新版本

小程序获取头像昵称最新版本相关推荐

最新文章

热门文章