小程序获取用户头像昵称,微信又叒做妖,废除之前的接口,改成了头像昵称填写
通知:微信小程序端基础库2.27.1及以上版本,,详见
1.回收uni.getUserInfo接口可获取用户授权(返回的全部是匿名数据)
4月28日24时后发布的新版本小程序,开发者调用wx.getUserInfo或<button open-type=”getUserInfo”/>将不再弹出弹窗,直接返回匿名的用户个人信息,获取加密后的openID、unionID数据的能力不做调整。
2.回收getUserProfile 来授权返回微信用户信息 (返回的全部是匿名数据)
3.使用:
截取评论展示功能介绍:描述非常生动形象
4.Demo展示
css样式有采用:
案例地址:https://gitee.com/jielov/uni-app-tabbar/blob/master/pages/wx_login/wx-mandate-write.vue
<!-- * @author: Jay * @description: 微信小程序 头像昵称填写 * @createTime: 2022-11-23 10:51:34 --> <template> <view> <!-- 获取头像 --> <view class="bg-gray padding-top-sm"> <button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> <image :class="avatarUrl ==''?'avatar-img':'' " :src="avatarUrl"></image> </button> </view> <!-- 输入用户名 --> <view class="nickname-code"> <view class="nickname-title"> 用户名: </view> <input type="nickname" class="weui-input" placeholder="请输入用户名" v-model="nickname" /> </view> <!-- 手机号登录 --> <view class="padding-lr padding-top flex flex-direction"> <button class="cu-btn bg-green round lg text-white" open-type="getPhoneNumber" @getphonenumber="getUserPhone" :disabled="explainName == '' ? false : true">微信手机号登录</button> </view> <view class="text-red text-df padding-lr-xl padding-tb-xs text-center"> {{explainName}} </view> </view> </template> <script> export default { data() { return { // 头像 avatarUrl: "", // 用户名 nickname: "", // 登录 code logCode: "", // 微信手机号登录 disabled: true, } }, computed: { explainName() { let name = "" if (this.avatarUrl == '') { name = "请授权用户头像" return name; } if (this.nickname == '') { name = "请输入用户名" return name; } return name; } }, onLoad() { this.userCode() }, methods: { // 获取code userCode() { let that = this uni.login({ provider: 'weixin', success(res) { console.log("登录code", res); that.logCode = res.code } }) }, //获取用户头像 onChooseAvatar(e) { // console.log(e.detail); this.avatarUrl = e.detail.avatarUrl }, //获取用户手机号 getUserPhone(e) { if (e.detail.errMsg == 'getPhoneNumber:ok') { //出来手机号数据 console.log("手机号数据", e) /* 在这一步把 手机号 头像 昵称 code 一次性全部丢给后端 */ } else { this.$operate.toast({ title: '授权失败无法登录!' }) } }, } } </script> <style> page { background-color: #fff; } </style> <style lang="scss" scoped> // 用户头像 .avatar-button { width: 120rpx; padding: 0; border-radius: 50%; margin: 30rpx auto 0 auto; image { width: 120rpx; height: 120rpx; border-radius: 50%; display: block; border: 4rpx solid #d8bf9f; } } .avatar-img { z-index: 3; position: relative; &:before { content: '头像授权'; position: absolute; top: 0; left: 0; width: 120rpx; height: 120rpx; // line-height: 40rpx; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 25rpx; background-color: rgba(130, 128, 127, 0.5); z-index: 4; } } //用户昵称 .nickname-code { display: flex; align-items: center; padding: 60rpx 20rpx 20rpx 20rpx; margin-top: -40rpx; background-color: #ffffff; border-radius: 50rpx 50rpx 0 0; .nickname-title { font-size: 30rpx; color: #333; margin-right: 15rpx; } .weui-input { flex: 1; color: #333; font-size: 30rpx; } } </style>
小程序 头像昵称填写
原文地址:http://www.cnblogs.com/lovejielive/p/16918134.html
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请务用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性