微信小程序 获取头像和昵称

第一步在页面中写

<view class="container"> <view class="my"> <view class="myitem"> <view> <image class="avatar" src="{{user.avatar}}"></image> </view> <view> <block> <view class="nickname">{{user.nickname}}</view> <view class="login-text">用户ID:000000000</view> </block> </view> </view> </view> <!-- 修改个人信息 --> <view class="show-btn" bindtap="showDialogBtn"> <view class="show-btn">修改个人信息</view> <view>></view> </view> <!--弹窗--> <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view> <view class="modal-dialog" wx:if="{{showModal}}"> <view class="list-item"> <view class="label">昵称</view> <view class="nickname"> <input type="nickname" value="{{newNickname}}" bindinput="onNicknameInput" value="修改个人昵称" /> </view> </view> <view class="list-item"> <view class="avatar"> <button open-type="chooseAvatar" bindchooseavatar="fChooseAvatar"> <image src="{{avatarUrl}}" /> </button> </view> <view class="label">修改个人头像</view> </view> <view class="modal-footer"> <view class="btn-cancel" bindtap="onSave" data-status="cancel">保存</view> </view> </view> <!-- 保存成功提示 --> <view class="success-tip {{showModalTip ? 'show' : ''}}">保存成功</view> </view>

第二步在样式中写

.show-btn { display: flex; background-color: white; justify-content: space-between; padding: 20rpx; align-items: center; } .modal-mask { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; opacity: 0.5; overflow: hidden; z-index: 9000; color: #fff; } .modal-dialog { width: 600rpx; overflow: hidden; position: fixed; top: 45%; height: 500rpx; left: 0; z-index: 9999; background: #f9f9f9; margin: -180rpx 80rpx; border-radius: 36rpx; } .modal-title { display: flex; justify-content: space-between; border-bottom: 1px solid gray; padding-top: 30rpx; } .modal-phone { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid gray; padding-top: 60rpx; } .modal-phone .image image { width: 140rpx; height: 140rpx; border-radius: 50%; margin-bottom: 10rpx; } .modal-footer { width: 70%; margin: 0 auto; padding-top: 40rpx; } .btn-cancel { background: red; color: white; padding: 30rpx 0rpx; text-align: center; border-radius: 20rpx; } .banben { position: relative; } .ban { position: fixed; bottom: 10rpx; left: 25rpx; right: 25rpx; text-align: center; color: gray; font-size: 35rpx; } .my { background: linear-gradient(to left, #FFC0CB, #E6B7EA, #87CEEB); /* background: linear-gradient(to right, #FFC0CB, #FFEBEE); */ /* background: linear-gradient(to right, #87CEEB, #B0C4DE); */ /* background: linear-gradient(to right, #FFB6C1, #FFD1DC); */ /* background: linear-gradient(to right, #d6c4fc, #f3e7ff); */ } .myitem { display: flex; gap: 15rpx; padding-top: 40rpx; align-items: center; padding-left: 30rpx; position: relative; bottom: -95rpx; margin-bottom: 130rpx; } .login-text { color: gray; font-size: 27rpx; } .nickname { font-size: 35rpx; /* font-weight: 600; */ color: black; } .avatar { width: 200rpx; height: 200rpx; box-sizing: border-box; border: 1px solid #fff5; border-radius: 50%; } .container { margin: 0 auto; } .list-item { padding: 20rpx 30rpx; display: flex; border-bottom: 1px solid #ddd; height: 100rpx; justify-content: space-between; align-items: center; gap: 16rpx; } .list-item .avatar { width: 100rpx; height: 100rpx; } .list-item .avatar button { width: 100%; height: 100%; background: transparent; padding: 0; } .list-item .avatar button image { width: 100%; height: 100%; } .list-item .nickname { flex: 2; } .list-item .nickname input { text-align: end; font-size: 32rpx; } /* 保存成功提示 */ .success-tip { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: black; color: white; padding: 10px; border-radius: 4px; display: none; } .show { display: block; }

第三步在js中写

Page({ data: { avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132", tupian: [{ id: 1, image: '' }], user: { avatar: 'https://img.zcool.cn/community/011aad554be56f000001bf72c38864.jpg@1280w_1l_2o_100sh.jpg', nickname: 'ni', }, newNickname: '',// 新的昵称 showModalTip: false, // 控制保存成功提示显示与隐藏的变量 //弹窗 showModal: false, }, fChooseAvatar(e) { const { avatarUrl } = e.detail; this.setData({ avatarUrl, }); }, //加载事件 onLoad() { this.handlerLogin() }, showDialogBtn: function () { this.setData({ showModal: true }) }, hideModal: function () { this.setData({ showModal: false }); }, onNicknameInput: function (event) { this.setData({ newNickname: event.detail.value }); }, onSave: function () { // 获取新的昵称和头像 var newNickname = this.data.newNickname; var newAvatar = this.data.avatarUrl; // 更新头像和昵称 this.setData({ 'user.avatar': newAvatar, 'user.nickname': newNickname, }); // 关闭弹窗 this.setData({ showModal: false, showModalTip: true }) setTimeout(() => { this.setData({ showModalTip: false }) }, 1000) }, onLogin() { }, // 我的跳转路径 userEdits() { wx.redirectTo({ url: '/pages/userEdit/userEdit', }) }, //授权登录 handlerLogin() { wx.login({ success: function (res) { if (res.code) { let code = res.code; console.log('code', code); wx.request({ url: 'http://139.155.135.103:8080/wxLogin', method: 'POST', data: { code: code }, success: (res) => { if (res.data.token) { wx.setStorageSync('token', res.data.token); } else { console.log('登录失败！' + res.data.errMsg); } }, fail: (err) => { console.log('登录失败！' + err.errMsg); } }); } else { console.log('登录失败！' + res.errMsg); } }, fail: function (err) { console.log('登录失败！' + err.errMsg); } }); }, /** * 生命周期函数--监听页面加载 */ /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { const app = getApp(); this.setData({ user: app.userInfo }) }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } })