微信小程序用户头像昵称获取新规适配教程，用户自定义头像昵称

关于login接口，大家可以看官方文档，相信大家程序也都已经写好了这个接口

// pages/login/index.js
Page({/*** 页面的初始数据*/data: {},showNameChange(){this.setData({"name_change":1})},nameChange(e){if (!e.detail.value.nickname) {wx.showToast({title: '请输入昵称',icon:"none"})return}//输入昵称值this.setData({"member.nickname":e.detail.value.nickname,"name_change":0})},onChooseAvatar(e) {const { avatarUrl } = e.detail this.setData({"member.avatar":avatarUrl,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.login({success: (res) => {code = res.code;},});},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

index.wxml

<view class="flex-row space-x-27 group"><view style="position: relative;"><image class="image_4" style="border-radius: 50%;" src="{{member.avatar||'/static/noface.png'}}" /><button style="width: 40rpx;height: 40rpx;padding: 0;line-height: 0;position: absolute;right: 0;bottom: 0;"open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" style="width: 100%;height: 100%;" src="/static/notification.png"></image></button></view><view class="flex-col items-start space-y-21 group_2"><form bindsubmit="nameChange"><view style="display: flex;align-items: flex-end;" wx:if="{{!name_change}}"><text class="text">{{member.nickname||'未更新用户信息'}}</text><image bindtap="showNameChange" style="width: 60rpx;height: 20rpx;margin-left: 20rpx;"src="/static/header-style2.png"></image></view><block wx:else><view style="display: flex;align-items: flex-end;"><input style="max-width: 200rpx;" type="nickname" name="nickname" placeholder="请输入昵称" /><button style="background: red;color: #fff;font-size: 20rpx;margin-left: 20rpx;"form-type="submit">确认</button></view></block></form></view>
</view>

index.wxss

page {width: 100vw;height: 100vh;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans','Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;}view,image,text {box-sizing: border-box;flex-shrink: 0;}.flex-row {display: flex;flex-direction: row;}.flex-col {display: flex;flex-direction: column;}.justify-start {justify-content: flex-start;}.justify-center {justify-content: center;}.justify-end {justify-content: flex-end;}.justify-evenly {justify-content: space-evenly;}.justify-around {justify-content: space-around;}.justify-between {justify-content: space-between;}.items-start {align-items: flex-start;}.items-center {align-items: center;}.items-end {align-items: flex-end;}.page {border-color: #ff5555;
}.fui-copyright-group {text-align: center;padding: 20rpx 24rpx;color: #cecece;
}.fui-copyright-group image {width: 60rpx;height: 60rpx;vertical-align: middle;margin-right: 10rpx;
}.fui-copyright2-group {text-align: center;padding: 10rpx 24rpx 0;color: #cecece;
}.fui-copyright2-group image {width: 60rpx;height: 60rpx;
}.notification {width: 15px;height: 15px;vertical-align: middle;margin: 0px 0px 6px 5px;border-left: 1px solid #efefef;padding-left: 10rpx;
}.member-head {height: 260rpx;background: transparent;padding-top: 40rpx;position: relative;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;
}.headinfo.style-2 {padding: 40rpx;background: #fe5455;border: none;
}.member .headinfo .setbtn {height: 60rpx;width: 60rpx;position: absolute;top: 8rpx;right: 10rpx;font-size: 48rpx;color: #fff;line-height: 48rpx;text-align: center;
}.member .headinfo.style-2 .face {height: 160rpx;width: 160rpx;border-radius: 160rpx;float: left;position: relative;display: -webkit-box;display: -webkit-flex;display: flex;flex-shrink: 0;-webkit-box-lines: single;-moz-box-lines: single;flex-wrap: nowrap;box-sizing: border-box;-webkit-box-align: center;align-items: center;
}.member .headinfo.style-2 .face image {height: 160rpx;width: 160rpx;border-radius: 160rpx;display: block;
}.member .headinfo.style-2 .face.radius,.member .headinfo.style-2 .face.radius image {border-radius: 20rpx;
}.member .headinfo.style-2 .inner {height: auto;position: relative;width: 100%;overflow: hidden;box-sizing: border-box;display: block;padding-left: 20rpx;color: #fff;
}.member .headinfo.style-2 .inner .name {font-size: 36rpx;line-height: 40rpx;
}.member .headinfo.style-2 .inner .level,.member .headinfo.style-2 .inner .credit {font-size: 28rpx;line-height: 36rpx;
}.member .headinfo.style-2 .inner text {color: #fef31f;
}.headinfo {position: relative;height: auto;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;
}.headinfo .icon-style2 {display: inline-block;width: 230rpx;height: 72rpx;position: absolute;right: 0;top: 0;bottom: 0;margin: auto;z-index: 999;
}.headinfo .icon-style2 image {width: 100%;height: 100%;
}.member-head .setting {height: 48rpx;width: 48rpx;overflow: hidden;position: absolute;top: 10rpx;right: 18rpx;background: none;border: 0;padding: 0;
}.member-head .setting:after {display: none;
}.member-head .setting image {height: 40rpx;width: 40rpx;vertical-align: top;
}.member-head .child {width: 30%;text-align: center;
}.member-head .child.userinfo {width: 40%;color: #fff;padding-top: 20rpx;
}.member-head .child.userinfo .avatar {height: 96rpx;width: 96rpx;background: #fff;margin: auto;border-radius: 96rpx;border: 4rpx solid #fff;
}.member-head .child.userinfo .avatar image {height: 96rpx;width: 96rpx;border-radius: 96rpx;display: block;
}.member-head .child.userinfo .avatar.radius image,.member-head .child.userinfo .avatar.radius {border-radius: 20rpx;
}.member-head .child.userinfo .avatar.radius image,.member-head .child.userinfo .avatar.radius {border-radius: 20rpx;
}.member-head .child.userinfo .nickname {height: 40rpx;padding-top: 8rpx;font-size: 24rpx;color: inherit;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}.member-head .child.userinfo .level {font-size: 24rpx;color: inherit;text-align: center;
}.member-head .child .title {padding-top: 48rpx;font-size: 28rpx;color: #fff;text-align: center;
}.member-head .child .number {font-size: 28rpx;color: #fef31f;text-align: center;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;
}.member-head .child .btn {width: 104rpx;height: 40rpx;padding: 0;margin: 8rpx auto 0;color: #fff;font-size: 24rpx;line-height: 38rpx;text-align: center;border-radius: 40rpx;border: 2rpx solid #fff;
}.facebtn {width: 104rpx;height: 40rpx;padding: 0;margin: 8rpx 0 0;color: #fff;font-size: 24rpx;line-height: 38rpx;text-align: center;border-radius: 40rpx;border: 2rpx solid #fff;
}.fui-cell-group .fui-cell .fui-cell-remark {color: #999;text-align: right;font-size: 26rpx;margin-right: 8rpx;
}.contact {background: red;
}.member_header {position: absolute;width: 280rpx;height: 120rpx;background: #ff5555;z-index: 80;border-radius: 50%;bottom: 0;left: 50%;margin-left: -160rpx;overflow: hidden;transform: scale(10,10);transform-origin: center bottom;border: 2px solid #ff5555;
}.cp-member1{height: 100%;width: 100%;position: absolute;top: 0;left: 0%;z-index: 80;border-radius: 0 200rpx 200rpx 0;
}.fui-cell-group:nth-of-type(1) {margin-top: 0;
}.fui-icon-group .fui-icon-col .icox {color: #aaa;font-size: 48rpx;margin-top: 14rpx;
}.fui-cell-group .fui-cell .fui-cell-text {line-height: 1;
}.fui-cell-tip {padding-top: 0;padding-bottom: 24rpx;
}.member .fui-icon-group .fui-icon-col .icox {font-size: 60rpx;line-height: 70rpx;
}.fui-cell-group .fui-cell .fui-cell-icon .icox {font-size: 38rpx;
}.fui-cell-group .fui-cell .fui-cell-icon {margin-right: 20rpx;
}.banner-ul {padding: 28rpx 20rpx;overflow: hidden;
}.banner-ul .banner-li:first-child {margin-left: 0;
}.banner-ul .banner-li {border: 4rpx solid #77cd44;position: relative;overflow: hidden;width: 320rpx;border-radius: 8rpx;text-align: center;margin-left: 10rpx;float: left;
}.banner-ul .banner-li view {width: 200rpx;height: 66rpx;position: absolute;top: 0;left: 0;background: #77cd44;transform: rotate(-25deg);transform-origin: left bottom;
}.banner-ul .banner-li span {position: absolute;top: 4rpx;left: 4rpx;font-size: 20rpx;color: #fff;
}.banner-ul .banner-li image {margin: 16rpx 0 16rpx;width: 42rpx;height: 42rpx;vertical-align: middle;border-radius: 50%;
}.banner-ul .banner-li p {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 28rpx;padding: 0 28rpx;line-height: 1;padding-bottom: 16rpx;display: block;
}.banner-ul .banner-li-blue {border: 4rpx solid #68bfe7;
}.banner-ul .banner-li-blue view {background: #68bfe7;
}.banner-ul.style2 view {background: #77cd44;border: 0;padding: 2px;
}.banner-ul.style2 .banner-li-blue view {background: #68bfe7;
}.banner-ul.style2 view span {width: 40px;height: 18px;transform: rotate(0deg);background: rgba(0,0,0,0.3);position: absolute;left: 0;top: 8px;
}.banner-ul.style2 view span {width: 40px;height: 18px;line-height: 18px;text-align: center;top: 8px;left: 0;
}.banner-ul.style2 .banner-li-blue {background: #68bfe7;
}.model {width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: fixed;top: 0;left: 0;z-index: 199;display: none;
}.model .inner {width: 624rpx;height: 600rpx;background: #fff;border-radius: 8rpx;margin: 260rpx auto;overflow: hidden;
}.model .inner .title {font-size: 36rpx;color: #000;line-height: 100rpx;text-align: center;font-weight: 600;margin-top: 20rpx;
}.model .inner .image {text-align: center;margin-top: 20rpx;
}.model .inner image {width: 342rpx;height: 202rpx;
}.model .inner .subtitle {margin-top: 50rpx;padding: 0 80rpx;color: #888;font-size: 26rpx;line-height: 40rpx;
}.model-btns {border-top: 1rpx solid #ebebeb;height: 100rpx;margin-top: 28rpx;display: flex;text-align: center;font-size: 30rpx;color: #000;line-height: 100rpx;
}.model-btns .cancel {width: 50%;position: relative;
}.model-btns .cancel:after {content: " ";position: absolute;top: -1rpx;right: 0;width: 1px;height: 210rpx;border-right: 1px solid #ebebeb;color: #ebebeb;transform-origin: 0 0;transform: scaleY(0.5);
}.model-btns .confirm {width: 50%;color: #50b33c;
}.fui-icon-group .fui-icon-col {width: 20%;
}.fui-icon-group .fui-icon-col.cycle:after {content: "";position: absolute;left: 0;top: 0;height: 100%;bottom: 0;width: 1rpx;color: #d9d9d9;border-left: 1rpx solid #d9d9d9;transform: scaleY(0.5);
}.member_card {position: absolute;z-index: 99;left: 26rpx;bottom: 0;display: flex;width: 698rpx;height: 96rpx;margin: 0 auto 0;line-height: 96rpx;border-radius: 15rpx;font-size: 30rpx;box-sizing: border-box;padding: 0 30rpx;color: #fff;align-items: center;background: linear-gradient(to right,#c1a167,#e9d5aa);
}.member_card .icon {width: 40rpx;height: 40rpx;margin-right: 20rpx;
}.member_card .title {flex: 1;line-height: 1;
}.member_card .card-num {min-width: 136rpx;opacity: 0.8;font-size: 26rpx;text-align: right;line-height: 1;
}.cover-img {position: absolute;bottom: 0;left: 0;right: 0;height: 22rpx;z-index: 999;width: 100%;
}.order-badge{background: red none repeat scroll 0 0;border-radius: 20rpx;color: white;font-size: 28rpx;height: 36rpx;right: 36rpx;line-height: 36rpx;min-width: 36rpx;position: absolute;top: 0rpx;text-align: center;vertical-align: top;z-index: 100;padding: 0;
}.page {/* padding-bottom: 1071.14rpx; *//* background-color: #ffffff; */width: 100%;overflow-y: auto;overflow-x: hidden;height: 100%;position: relative;}.image_3 {width: 100vw;height: 669.22rpx;}.image_5 {width: 100vw;height: 387.97rpx;position: absolute;right: 0;top: 383.98rpx;}.image {width: 100vw;height: 522.61rpx;position: absolute;left: 0;top: 0;}.section {background-color: #f5f5f5b3;top: 0;right: 0;bottom: 0;left: 0;position: absolute;}.image_2 {width: 750rpx;height: 161.57rpx;}.group {margin-top: 65.82rpx;padding: 0 37.9rpx;}.space-x-27 > view:not(:first-child),.space-x-27 > text:not(:first-child),.space-x-27 > image:not(:first-child) {margin-left: 26.93rpx;}.image_4 {width: 129.65rpx;height: 129.65rpx;}.group_2 {flex: 1 1 auto;align-self: center;}.space-y-21 > view:not(:first-child),.space-y-21 > text:not(:first-child),.space-y-21 > image:not(:first-child) {margin-top: 20.94rpx;}.text {color: #000000;font-size: 29.92rpx;font-family: PingFang;line-height: 28.92rpx;}.text-wrapper {padding: 6.98rpx 0;filter: drop-shadow(0px 3.99rpx #ffc5c426);border-radius: 17.45rpx;background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/6351ee71fe65f70012e497d0/16663139570422398045.png');background-size: 100% 100%;background-repeat: no-repeat;width: 128.66rpx;}.text_2 {color: #ed3e30;font-size: 21.94rpx;font-family: PingFang;line-height: 21.94rpx;}.group_3 {margin-top: 55.85rpx;}.equal-division {padding: 0 12.97rpx;}.space-x-14 > view:not(:first-child),.space-x-14 > text:not(:first-child),.space-x-14 > image:not(:first-child) {margin-left: 13.96rpx;}.equal-division-item {flex: 1 1 240.86rpx;padding: 11.97rpx 17.95rpx;}.space-y-28 > view:not(:first-child),.space-y-28 > text:not(:first-child),.space-y-28 > image:not(:first-child) {margin-top: 27.93rpx;}.font_1 {font-size: 23.94rpx;font-family: PingFang;line-height: 22.94rpx;color: #333333;}.font_2 {font-size: 39.89rpx;font-family: PingFang;letter-spacing: -1.99rpx;line-height: 29.92rpx;color: #282a2b;}.text_3 {align-self: flex-end;line-height: 30.92rpx;}.space-y-30 > view:not(:first-child),.space-y-30 > text:not(:first-child),.space-y-30 > image:not(:first-child) {margin-top: 29.92rpx;}.text_4 {margin-right: 59.84rpx;align-self: flex-end;}.space-y-25 > view:not(:first-child),.space-y-25 > text:not(:first-child),.space-y-25 > image:not(:first-child) {margin-top: 24.93rpx;}.image_6 {/* margin-right: 90.76rpx;align-self: flex-end;letter-spacing: -1.99rpx; */width: 38.9rpx;height: 38.9rpx;}.group_4 {padding: 0 33.91rpx;}.view {margin-top: 45.88rpx;}.space-x-10 > view:not(:first-child),.space-x-10 > text:not(:first-child),.space-x-10 > image:not(:first-child) {margin-left: 9.97rpx;}.section_2 {background-image: linear-gradient(10deg, #ec3121 0%, #ffc9c9 100%);border-radius: 5.49rpx 3.49rpx 4.49rpx 4.49rpx;width: 8.98rpx;height: 31.91rpx;}.font_3 {font-size: 35.9rpx;font-family: PingFang;line-height: 33.91rpx;color: #000000;}.section_3 {margin: 32.91rpx 30.92rpx 0;padding: 52.86rpx 0 49.87rpx;background-color: #ffffff;border-radius: 11.97rpx;}.space-x-24 > view:not(:first-child),.space-x-24 > text:not(:first-child),.space-x-24 > image:not(:first-child) {/* margin-left: 23.94rpx; */}.equal-division-item_2 {flex: 1 1 155.09rpx;padding: 9.97rpx 29.92rpx;}.space-y-26 > view:not(:first-child),.space-y-26 > text:not(:first-child),.space-y-26 > image:not(:first-child) {margin-top: 25.93rpx;}.image_7 {width: 47.87rpx;height: 47.87rpx;}.font_4 {font-size: 23.94rpx;font-family: PingFang;line-height: 22.94rpx;color: #595959;}.group_5 {margin-top: 59.84rpx;padding: 0 30.92rpx;}.space-y-31 > view:not(:first-child),.space-y-31 > text:not(:first-child),.space-y-31 > image:not(:first-child) {margin-top: 30.92rpx;}.group_6 {padding: 0 2.99rpx;}.space-x-11 > view:not(:first-child),.space-x-11 > text:not(:first-child),.space-x-11 > image:not(:first-child) {margin-left: 10.97rpx;}.space-x-30 > view:not(:first-child),.space-x-30 > text:not(:first-child),.space-x-30 > image:not(:first-child) {margin-left: 29.92rpx;}.equal-division-item_3 {flex: 1 1 329.12rpx;border-radius: 11.97rpx;width: 329.12rpx;height: 159.57rpx;}.group_7 {margin-top: 60.84rpx;}.space-y-34 > view:not(:first-child),.space-y-34 > text:not(:first-child),.space-y-34 > image:not(:first-child) {margin-top: 33.91rpx;}.space-y-32 > view:not(:first-child),.space-y-32 > text:not(:first-child),.space-y-32 > image:not(:first-child) {margin-top: 31.91rpx;}.grid {margin: 0 30.92rpx;padding: 32.91rpx 0 30.92rpx;background-color: #ffffff;border-radius: 11.97rpx;height: 343.09rpx;display: grid;grid-template-columns: repeat(4, 1fr);}.grid-item {padding: 25.93rpx 0;}.space-y-18 > view:not(:first-child),.space-y-18 > text:not(:first-child),.space-y-18 > image:not(:first-child) {margin-top: 17.95rpx;}.equal-division_2 {padding: 0 7.98rpx;background-color: #ffffff;}.space-x-6 > view:not(:first-child),.space-x-6 > text:not(:first-child),.space-x-6 > image:not(:first-child) {margin-left: 5.98rpx;}.equal-division-item_4 {flex: 1 1 183.01rpx;padding: 8.98rpx 21.94rpx;}.space-y-10 > view:not(:first-child),.space-y-10 > text:not(:first-child),.space-y-10 > image:not(:first-child) {margin-top: 9.97rpx;}.font_5 {font-size: 19.95rpx;font-family: PingFang;line-height: 18.95rpx;color: #595959;}.text_5 {color: #ec3121;}
/*  -- flex弹性布局 -- */.flex {display: flex;
}.basis-xs {flex-basis: 20%;
}.basis-sm {flex-basis: 40%;
}.basis-df {flex-basis: 50%;
}.basis-lg {flex-basis: 60%;
}.basis-xl {flex-basis: 80%;
}.flex-sub {flex: 1;
}.flex-twice {flex: 2;
}.flex-treble {flex: 3;
}.flex-direction {flex-direction: column;
}.flex-wrap {flex-wrap: wrap;
}.align-start {align-items: flex-start;
}.align-end {align-items: flex-end;
}.align-center {align-items: center;
}.align-stretch {align-items: stretch;
}.self-start {align-self: flex-start;
}.self-center {align-self: flex-center;
}.self-end {align-self: flex-end;
}.self-stretch {align-self: stretch;
}.align-stretch {align-items: stretch;
}.justify-start {justify-content: flex-start;
}.justify-end {justify-content: flex-end;
}.justify-center {justify-content: center;
}.justify-between {justify-content: space-between;
}.justify-around {justify-content: space-around;
}

微信小程序用户头像昵称获取新规适配教程，用户自定义头像昵称相关推荐

获取小程序用户信息+java_java获取微信小程序用户信息
第一步:获取openid.session_key等信息. /** * 获取微信小程序的用户openid和session_key/unionid * 返回格式:{"session_key&qu ...
微信小程序学习9：获取用户信息进行登录操作 wx.getUserProfile
微信小程序学习9:获取用户信息进行登录操作wx.getUserProfile 2021年4月份左右微信对获取用户的API进行了更改.使用wx.getUserInfo只能获取用户的匿名信息. 要获取用户 ...
微信小程序用户头像编辑上传
微信小程序用户头像编辑上传近期接触了一个小程序项目,需要可以修改用户头像,默认获取用户当前微信头像,点击头像,可调用手机照相机或者本地相册,更换图片. html代码如下: js代码:
asp获取微信小程序用户手机号,asp微信小程序手机号获取,微信小程序手机号asp获取方法
今天搞的这个项目里需要用到asp获取小程序用户的手机号,在网上找了下资源,一个也没有找到,难道用asp获取不到微信小程序用户的手机号码吗?非也,经过一系列操作,成功了,asp照样可以获取小程序用户的手 ...
微信中html5获取手机号,微信小程序用户授权获取手机号（getPhoneNumber）
前言小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码.有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触发才能调用的,比如 ...
PHP 获取微信小程序用户手机号
截止到目前为止,小程序通过获取session_key与encryptedData与iv进行解密获取手机号的方法已经不行了,只能通过点击按钮来实现获取微信用户的手机号,本文仅以PHP为例大概流程: 1 ...
【微信小程序/实现】实现获取微信个人信息
[微信小程序/实现]实现获取微信个人信息一.目的:实现获取微信个人的昵称和头像二.页面过程三.实现过程 (1)核心代码: (2)完整代码 1. wxml代码 2. wxss代码 3. js代码 ...
微信小程序用户登录流程思路及主要代码
微信小程序用户登录流程思路由于微信官方不允许在刚进入小程序的时候,弹出用户登陆页面,需要在进入小程序后,用户主动点击才能进入登陆页面.此时,将会给小程序开发者在设计用户登陆页面时,带来一定的麻烦.现 ...
webform窗体怎么实现session唯一标识_微信小程序用户登录和登录态维护的实现_javascript技巧...
这篇文章主要介绍了微信小程序用户登录和登录态维护的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧让用户登录,标识用户和获取 ...

微信小程序用户头像昵称获取新规适配教程，用户自定义头像昵称

微信小程序用户头像昵称获取新规适配教程，用户自定义头像昵称相关推荐

最新文章

热门文章