微信小程序 - 商城项目 - 个人中心

页面布局

 

<view class="userInfo">




  <image src="{{}}" bindtap="handleTap"></image>




  <view>{{}}</view>





</view>




 




<mp-cells>




  <mp-cell value="完善信息">




    <mp-icon slot="icon" type="field" icon="me" color="#14c145" size="{{25}}"></mp-icon>




    <mp-icon slot="icon" type="field" icon="arrow" size="{{25}}" slot="footer"></mp-icon>




  </mp-cell>




  <mp-cell value="个性设置">




    <mp-icon slot="icon" type="field" icon="like" color="#14c145" size="{{25}}"></mp-icon>




    <mp-icon slot="icon" type="field" icon="arrow" size="{{25}}" slot="footer"></mp-icon>




  </mp-cell>





</mp-cells>

{



  "usingComponents": {



    "mp-cells": "weui-miniprogram/cells/cells",



    "mp-cell": "weui-miniprogram/cell/cell",



    "mp-icon": "weui-miniprogram/icon/icon"




  },



  "navigationBarTitleText": "个人中心"




}

 页面显示进行授权判断，若存储过 token ，取出数据，渲染页面的头像及名字等个人信息

  /*** 生命周期函数--监听页面显示 */




  onShow() {



    CheckAuth(()=>{



      ({



        userInfo:('token')



      })



    })



  },

点击头像更换图片

（）

  // 点击头像切换照片




   handleTap(){



    wx.chooseMedia({



      count: 9,



      mediaType: ['image','video'],



      sourceType: ['album', 'camera'],



      maxDuration: 30,



      camera: 'back',



      success:(res)=> {



        const temFilePaths =  [0].tempFilePath



        this.setData({



          userInfo:{



            ...,



            avatarUrl:temFilePaths



          }



        })



     }



    })



    },