微信小程序 最新获取用户头像以及用户名

一.在小程序改版为了安全起见 使用用户填写来获取头像以及用户名

        

二.代码实现 

<view class="login_box"><!-- 头像 --><view class="avator_box"><button wx:if="{{ !userInfo.avatarUrl }}" class="avatorbtn" open-type="chooseAvatar" bindchooseavatar="chooseavatar"><image src="../../assets/login.png" mode="aspectFit"/></button><view class="useravator" wx:else><image class="avator" src="{{ userInfo.avatarUrl }}" mode="aspectFit"/></view></view><!-- 名称 --><view class="username_box"><input type="nickname" value="{{ userInfo.userName }}" placeholder="请输入昵称" bindchange="handleinputchange"/></view><!-- 退出登陆 --><view class="outlogin" wx:if="{{ userInfo.avatarUrl && userInfo.userName }}"><button bind:tap="handleoutlogin">退出登陆</button></view>
</view>

/* pages/home/home.wxss */
.avatorbtn {width: 100rpx !important;height: 100rpx;border-radius: 50%;padding: 0;
}
.avatorbtn image  {width: 100%;height: 100%;
}.useravator {height: 100rpx;display: flex;justify-content: center;
}
.avator {width: 100rpx;height: 100rpx;border-radius: 50%;
}
.username_box {margin-top: 40rpx;padding: 0 40rpx;box-sizing: border-box;
}
.username_box input {height: 80rpx;border: 1px solid #ececec;
}
.outlogin {width: 100%;position: fixed;bottom: 100rpx;
}
.outlogin button{width: 100% !important;
}

 

// pages/home/home.js
Page({/*** 页面的初始数据*/data: {userInfo: {avatarUrl: '',userName: ''}},/*** 生命周期函数--监听页面加载*/onLoad(options) {},// 方法chooseavatar(e) {this.setData({'userInfo.avatarUrl': e.detail.avatarUrl})},handleinputchange(e) {console.log('---e-----', e)this.setData({'userInfo.userName': e.detail.value})},handleoutlogin() {let userInfo = {avatarUrl: '',userName: ''};this.setData({userInfo: userInfo})},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})