小程序获取用户头像昵称,微信又叒做妖,废除之前的接口,改成了头像昵称填写
通知:微信小程序端基础库2.27.1及以上版本,wx.getUserProfile 接口 被收回,详见《小程序用户头像昵称获取规则调整公告》
4月28日24时后发布的新版本小程序,开发者调用wx.getUserInfo或将不再弹出弹窗,直接返回匿名的用户个人信息,获取加密后的openID、unionID数据的能力不做调整。
截取评论展示功能介绍:描述非常生动形象
css样式有采用:ColorUI-UniApp 请自行导入
案例地址: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 = "请授权用户头像"
returnname;
}
if (this.nickname == '') {
name = "请输入用户名"
returnname;
}
returnname;
}
},
onLoad() {
this.userCode()
},
methods: {
//获取code
userCode() {
let that = thisuni.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 0auto;
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>
小程序 头像昵称填写
本文来自博客园,作者:虚乄,转载请注明原文链接:https://www.cnblogs.com/lovejielive/p/16918134.html
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/lovejielive/p/16918134.html
内容来源于网络,如有侵权,请联系作者删除!