微信小程序 用户手动获取微信头像和昵称

<!--pages/bigLogin/logins/logins.wxml-->
<view class="cont">
    <form catchsubmit="formSubmit" catchreset="formReset">
        <view class="wrps">
        <view class="items">
            <view class="names">头像</view>
            <view class="butt">
                <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
                    <image src="{{avatar}}" style="width: 100%;height: 100%;" wx:if="{{avatar}}" bindtap="getAvatar"></image>
                    <view style="width: 100%;height: 100%;" bindtap="goAvatar" wx:else></view>
                </button>
            </view>
        </view>
        <view class="items">
            <view class="names">昵称</view>
            <input type="nickname" name="input" class="weui-input" placeholder="请输入昵称" />
        </view>
    </view>
    <view class="tton">
        <button class="bule" form-type="submit">确认</button>
    </view>
    </form>
</view>

// pages/bigLogin/logins/logins.js
const app = getApp();
Page({
    data: { avatar:'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/',//头像
        nickname:'',//名称
    },
    onLoad(options) {
        //个人信息获取
        let info = app.globalData.userInfo;
        if(!info){
            if(this.data.nickname){
                this.setData({
                    nickname:'',
                    avatar:'',
                })
            }
        }else{
            this.getInfo();
        }
    },
    //用户头像
    onChooseAvatar(e) {
        let that = this
        const { avatarUrl } = e.detail 
        wx.uploadFile({
            url: app.baseUrl+'/api/common/upload', //后端接口上传图片至后端
            filePath: avatarUrl,
            name: 'file',
            formData:{
                'user': 'test',
                'token':wx.getStorageSync('token')
            },
            success(re){
                if(re.statusCode==200){
                    re.data = JSON.parse(re.data);
                      if(re.data.code==1){
                        that.setData({
                            avatar:re.data.data.fullurl
                        })
                    }
                }
            },
            fail(re){
                wx.showToast({
                title: '图片上传失败',
                icon:'error'
                })
            }
        })
      },
      //用户名
    async formSubmit(e) {
        let nickname=e.detail.value.input
        //判断昵称是否为空
        if(!nickname){
            wx.showToast({
                title: '请填写信息',
                icon:'none',
              })
              return
        }
        this.setData({
            nickname:nickname ,
        })
        let data = await app.rq.getProfile({ nickname:this.data.nickname,
        avatar:this.data.avatar,})//先修改信息
        if(data.code === 1){
            //获取用户信息
            this.getInfo()
        }
    },
    async getInfo(){ 
		let data = await app.rq.getInfo();//
		wx.hideLoading()
		if(data.code == 1){
			wx.showToast({
				title: '登录成功',
				icon:'success'
			})
			app.globalData.userInfo = data.data;
			let info = JSON.stringify(data.data);
            wx.setStorageSync('userInfo', info);//缓存用户信息
            wx.switchTab({
              url: '/pages/my/index/index',
            })
		}else{
			wx.showToast({
			  title: '登录失败',
			  icon:'error'
			})
		}
	},
})

/* pages/bigLogin/logins/logins.wxss */
page{
    background:#EEEEEE;
}
.cont{
    height:100vh;
    background:#fff;
}
.wrps{
    margin:30rpx 0rpx;
    /* background:#fff; */
}
.items{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c3c3c3;
    padding: 4rpx 0;
}
.names{
    margin:0 12rpx;
    font-size: 30rpx;
}
.butt{
    margin:0 12rpx;
    /* border:1px solid pink; */
}
.avatar-wrapper{
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: #fff 2rpx solid;
    padding: 0;
    /* overflow: hidden; */
    /* margin-left: 30rpx; */
   border: none;
}

.weui-input{
    width:240rpx;
    padding:40rpx 40rpx;
    /* border:1px solid pink; */
    margin:0 12rpx;
    text-align: right;
}
.tton{
   
    margin:60rpx 0;
}
.bule{
    width:80%;
    line-height: 80rpx;
    border-radius: 50rpx;
    color: #fff;
    font-size: 30rpx;
    margin: 0 auto;
    background: #247FF0;
}