1.新项目挖新坑，公司又需要做新的小程序，没有其他人支持，这次还得前后台一起做...不懂前端的我又来挖坑了...

2.先做小程序“我的”页面，需要注意的有两个点：

考虑到前几个版本getUserInfo不再弹出授权窗口，所以增加了不可见的button来唤起授权窗口；"我的"页面功能列表虽然现在不多，但是指不定什么时候就要增加或者修改，所以将该列表做成可配置的，使用了wx:for和navigator。

3.先上图，有图才有真相：

微信小程序--“我的“页面.jpg一、用户信息获取

4.这一块我增加了一个隐藏的button,未获取到用户信息时，显示为默认头像和“微信授权”的文字提示，登陆后，头像变为微信头像，文字变为微信昵称。

buttonclass="login-buttonhead-height"open-type="getUserInfo"bindgetuserinfo="getUserInfo"获取头像昵称/button

5.具体ui为判断没有授权则显示默认头像及提示，并在其上层覆盖一个透明的button，用户触发授权事件。

wxml：viewclass='headhead-height'blockwx:if="{{!hasUserInfo&&canIUse}}"viewclass="userinfo"imageclass="userinfo-avatar"src="../../images/icon-mine.png"mode="cover"/imagetextclass="userinfo-nickname"微信授权/text/viewbuttonclass="login-buttonhead-height"open-type="getUserInfo"bindgetuserinfo="getUserInfo"获取头像昵称/button/blockblockwx:elseviewclass="userinfo"imagebindtap="bindViewTap"class="userinfo-avatar"src="{{userInfo.avatarUrl}}"mode="cover"/imagetextclass="userinfo-nickname"{{userInfo.nickName}}/text/view/block/viewwxss：.head-height{height:240rpx;}.head{display:flex;width:100%;background-color:#15c261;align-items:center;}.login-button{opacity:0;width:100%;position:fixed;}.userinfo{display:flex;flex-direction:row;align-items:center;width:100%;position:fixed;}.userinfo-avatar{width:150rpx;height:150rpx;margin:30rpx;border-radius:50%;}.userinfo-nickname{color:#333333;font-size:42rpx;}js：

6.在js中需要注意的是，open-type="getUserInfo"需要做老版本兼容，老版本通过wx.getUserInfo即可唤起授权页面，不需要添加button去触发

//获取应用实例constapp=getApp();Page({/***页面的初始数据*/data:{userInfo:{},hasUserInfo:false,canIUse:wx.canIUse('button.open-type.getUserInfo')},/***生命周期函数--监听页面加载*/onLoad:function(options){varthat=this;if(app.globalData.userInfo){that.setUserInfo(app.globalData.userInfo);}elseif(that.data.canIUse){//由于getUserInfo是网络请求，可能会在Page.onLoad之后才返回//所以此处加入callback以防止这种情况app.userInfoReadyCallback=res={that.setUserInfo(res.userInfo);}}else{//在没有open-type=getUserInfo版本的兼容处理wx.getUserInfo({success:res={that.setUserInfo(res.userInfo);}})}},getUserInfo:function(e){this.setUserInfo(e.detail.userInfo);},setUserInfo:function(userInfo){if(userInfo!=null){app.globalData.userInfo=userInfothis.setData({userInfo:userInfo,hasUserInfo:true})}}})二、功能菜单列表

7.详情见下一篇：微信小程序：“我的”页面布局（二）：可配置功能菜单列表

8.简书：ThinkinLiu博客:IT老五

IT老五（it-lao5）：关注公众号，一起源创，一起学习！相关推荐：

9.微信小程序：“我的”页面布局（一）：微信用户信息获取及UI微信小程序：“我的”页面布局（二）：可配置功能菜单列表