一.在小程序改版为了安全起见 使用用户填写来获取头像以及用户名
二.代码实现
<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() {
}
})
