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

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

        

二.代码实现 

<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() {

    }
})

原文地址：https://blog.csdn.net/qq_42164957/article/details/143863293

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！