微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

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

先上图，有图才有真相：

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

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

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

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

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

比较懒，还是上一篇的图：

如上一篇所属，“我的”页面菜单列表主要是用到了wx: for和navigator

利用navigator可以很方便的实现菜单功能，它带有的url和class、hover-class可以很轻松的设置点击效果及点击跳转地址：

在js中甚至不需要做什么事情，我这里把菜单的数据放在了js中，通过修改data中的menuitems即可达到配置的作用，甚至如果有需求，还可以放在服务端做成可随意变化的：

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

---