wx.getUserProfile禁用,使用官方填写方式解决

头像昵称填写登录登录

先上效果图

在这里插入图片描述

登录后:
在这里插入图片描述

wxml代码

<view class="body">
    <view class="unlogin-body" wx:if="{{ !login }}">
        <!-- <view class="unlogin">
            <image class="unlogin-image" src="../../images/me.png"></image>
            <button class="unlogin-btn" open-type="getUserInfo" bindtap="toLogin">微信一键登录</button>
        </view> -->
        <button class="avatar" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
         <image src="{{avatarUrl}}"></image>
        </button> 
        <!-- <input type="nickname" class="weui-input" placeholder="请输入昵称"/> -->
        <input type="nickname" class="weui-input" value="{{ nickName }}" placeholder="请输入昵称" bindinput="getSearch"  />
        <button class="unlogin-btn" open-type="getUserInfo" bindtap="toLogin">保存并登录</button>
    </view>
    <view class="login" wx:else>
        <view class="info">
            <image class="avatarUrl" src="{{ avatarUrl }}"></image>
            <text class="nickName">{{ nickName }}</text>
        </view>
        <view class="cell-body">
            <view class="cell-list">
                <view 
                    class="cell" 
                    wx:for="{{ cellList }}" 
                    wx:key="index"
                    data-page="{{ item.page }}"
                    bindtap="toDetail"
                >
                    <view class="cell-left">
                        <image class="cell-left-image" src="{{ item.url }}"></image>
                        <text class="cell-left-text">{{ item.text }}</text>
                    </view>
                    <view class="cell-right">
                        <image class="cell-right-image" src="../../images/dayu.png"></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</view>

wxss代码

.body {

}

.unlogin-body {
    background-color: #fff;
    height: 100vh;
    width: 100vw;
}
.unlogin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 40%;
}

.unlogin .unlogin-image {
    width: 150rpx;
    height: 150rpx;
}

.unlogin .unlogin-btn {
    margin-top: 50rpx;
    width: 80%;
    background-color: #ff70b4;
    color: #fff;
    height: 100rpx;
    line-height: 2.1;
}

.info {
    background-color: #93b8e2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 100rpx 0;
}

.info .avatarUrl {
    width: 200rpx;
    height: 200rpx;
    border-radius: 50%;
}

.info .nickName {
    color: #fff;
    margin-top: 30rpx;
}

.cell-body {
    position: relative;
}

.cell-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    width: 100%;
    top: -20rpx;
}

.cell {
    display: flex;
    justify-content: space-between;
    width: 85%;
    background-color: #fff;
    padding: 30rpx 20rpx;
    border-radius: 20rpx;
    align-items: center;
    margin-bottom: 20rpx;
}

.cell-left {
    display: flex;
    align-items: center;
}

.cell-left .cell-left-image {
    width: 50rpx;
    height: 50rpx;
}

.cell-left .cell-left-text {
    margin-left: 20rpx;
}

.cell-right .cell-right-image {
    width: 30rpx;
    height: 30rpx;
}


/* 新添头像昵称编辑获取 */
.avatar{
    width: 80px;
    height: 80px;
    padding:0;
    background: none;
}
.avatar image{
    width: 80px;
    height: 80px;
    border-radius: 100px;
}
.weui-input{
    width: 90%;
    height: 60px;
    margin:20px auto;
    background: #eee;
    border-radius: 5px;
    padding-left: 15px;
}
.unlogin-btn{
    background-color: #d1e4f8;
}

js代码

// pages/me/me.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({

    /**
     * 页面的初始数据
     */
    data: {
        login: false,
        avatarUrl: defaultAvatarUrl,
        nickName: '',
        cellList: [
            {
                url: '../../images/publish.png',
                text: '我的发布',
                page: '../myPublish/myPublish'
            },
            {
                url: '../../images/collection1.png',
                text: '我的收藏',
                page: '../myCollection/myCollection'
            },
            {
                url: '../../images/info.png',
                text: '我的信息',
                page: '../myInfo/myInfo'
            },
            {
                url: '../../images/quit.png',
                text: '退出登录'
            }
        ]
    },

     getSearch(e) {
         // 实现简单版本的防抖
         this.setData({
             nickName: e.detail.value
         })},

    onChooseAvatar(e) {
        var that =this
        const {
            avatarUrl
        } = e.detail
        this.setData({
            avatarUrl,
        })
        console.log(avatarUrl)
        //  将头像上传到服务器
        wx.uploadFile({
            filePath: avatarUrl,
            header: {'content-type': 'multipart/form-data'},
            name: 'file',
            url: 'https://www.yuegeyu.top/uploadImg', //服务器端接收图片的路径
            success: function (res) {
                console.log(res); //发送成功回调
                //  console.log(res)
                const { data } = res;
                let { path } = JSON.parse(data)[0];
                //解决路径中反斜杠造成小程序ipv6协议无法解析的问题(浏览器可以解析)
                let __path= path.split('\\')  //以反斜杠为基点将字符串拆分为数组
              //  console.log(__path)
             // let _path = `http:/${__path[0]}/${__path[1]}`;
              let _path = `https://www.yuegeyu.top/${__path[0]}`;
              //输出一下编辑得到的路径
              console.log(_path)
              that.setData({
                avatarUrl:_path
            })
            },
            fail: function (res) {
                console.log(res); //发送失败回调,可以在这里了解失败原因
            }
        })
    },


    toDetail(e) {
        const { page } = e.currentTarget.dataset;
        if (page){
            wx.navigateTo({
                url: page,
            })
        } else {
            wx.showModal({
              title: '提示',
              content: '确定退出吗?',
              success: (res) => {
                  const { confirm} = res;
                  if (confirm) {
                      wx.removeStorageSync('login');
                      wx.removeStorageSync('userInfo');
                      wx.removeStorageSync('account');
                      wx.removeStorageSync('login_account');

                      this.setData({
                          login: false
                      })

                      wx.redirectTo({
                        url: '../login/login',
                      })
                  }
              }
            })
        }
    },

    

    toLogin() {
       
               const  { avatarUrl, nickName  } = this.data;
               const userInfo = {
                   avatarUrl,
                   nickName
               }
               wx.setStorageSync('userInfo', userInfo);
               wx.setStorageSync('login', true);
               this.setData({
                   login: true,
                   avatarUrl,
                   nickName
               })

    //      wx.getUserProfile({
    //    desc: '获取用户信息,展示头像昵称',
    //        success: (res) => {
    //            console.log(res);
    //            const { userInfo: { avatarUrl, nickName } } = res;
    //            const userInfo = {
    //                avatarUrl,
    //                nickName
    //            }
    //            wx.setStorageSync('userInfo', userInfo);
    //            wx.setStorageSync('login', true);
    //            this.setData({
    //                login: true,
    //                avatarUrl,
    //                nickName
    //            })
    //        }
    //      })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        const login = wx.getStorageSync('login');
        const userInfo = wx.getStorageSync('userInfo');
        if (userInfo) {
            const { avatarUrl, nickName } = userInfo;
            this.setData({
                avatarUrl,
                nickName
            })
        }
        this.setData({
            login: !!login
        })
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                select: 4
            })
        }
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值