微信小程序：“我的”页面布局（一）：微信用户信息获取及UI
新项目挖新坑，公司又需要做新的小程序，没有其他人支持，这次还得前后台一起做...不懂前端的我又来挖坑了...
先做小程序“我的”页面，需要注意的有两个点：
- 考虑到前几个版本getUserInfo不再弹出授权窗口，所以增加了不可见的button来唤起授权窗口；
- "我的"页面功能列表虽然现在不多，但是指不定什么时候就要增加或者修改，所以将该列表做成可配置的，使用了wx:for和navigator。
先上图，有图才有真相：
微信小程序--“我的“页面.jpg
一、 用户信息获取
这一块我增加了一个隐藏的button, 未获取到用户信息时，显示为默认头像和“微信授权”的文字提示，登陆后，头像变为微信头像，文字变为微信昵称。
|
1 2 |
<span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"login-button head-height"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"getUserInfo"</span> <span class="hljs-attr">bindgetuserinfo</span>=<span class="hljs-string">"getUserInfo"</span>></span> 获取头像昵称 <span class="hljs-tag"></<span class="hljs-name">button</span>></span> |
具体ui为判断没有授权则显示默认头像及提示，并在其上层覆盖一个透明的button，用户触发授权事件。
wxml：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">'head head-height'</span>></span> <span class="hljs-tag"><<span class="hljs-name">block</span> <span class="hljs-attr">wx:if</span>=<span class="hljs-string">"{{!hasUserInfo && canIUse}}"</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userinfo"</span>></span> <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userinfo-avatar"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"../../images/icon-mine.png"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"cover"</span>></span><span class="hljs-tag"></<span class="hljs-name">image</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userinfo-nickname"</span>></span>微信授权<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"><<span class="hljs-name">button</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"login-button head-height"</span> <span class="hljs-attr">open-type</span>=<span class="hljs-string">"getUserInfo"</span> <span class="hljs-attr">bindgetuserinfo</span>=<span class="hljs-string">"getUserInfo"</span>></span> 获取头像昵称 <span class="hljs-tag"></<span class="hljs-name">button</span>></span> <span class="hljs-tag"></<span class="hljs-name">block</span>></span> <span class="hljs-tag"><<span class="hljs-name">block</span> <span class="hljs-attr">wx:else</span>></span> <span class="hljs-tag"><<span class="hljs-name">view</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userinfo"</span>></span> <span class="hljs-tag"><<span class="hljs-name">image</span> <span class="hljs-attr">bindtap</span>=<span class="hljs-string">"bindViewTap"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userinfo-avatar"</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"{{userInfo.avatarUrl}}"</span> <span class="hljs-attr">mode</span>=<span class="hljs-string">"cover"</span>></span><span class="hljs-tag"></<span class="hljs-name">image</span>></span> <span class="hljs-tag"><<span class="hljs-name">text</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"userinfo-nickname"</span>></span>{{userInfo.nickName}}<span class="hljs-tag"></<span class="hljs-name">text</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> <span class="hljs-tag"></<span class="hljs-name">block</span>></span> <span class="hljs-tag"></<span class="hljs-name">view</span>></span> |
wxss：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<span class="hljs-selector-class">.head-height</span> { <span class="hljs-attribute">height</span>: <span class="hljs-number">240</span>rpx; } <span class="hljs-selector-class">.head</span> { <span class="hljs-attribute">display</span>:flex; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">background-color</span>: <span class="hljs-number">#15c261</span>; <span class="hljs-attribute">align-items</span>: center; } <span class="hljs-selector-class">.login-button</span> { <span class="hljs-attribute">opacity</span>: <span class="hljs-number">0</span>; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">position</span>: fixed; } <span class="hljs-selector-class">.userinfo</span> { <span class="hljs-attribute">display</span>: flex; <span class="hljs-attribute">flex-direction</span>: row; <span class="hljs-attribute">align-items</span>: center; <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>; <span class="hljs-attribute">position</span>: fixed; } <span class="hljs-selector-class">.userinfo-avatar</span> { <span class="hljs-attribute">width</span>: <span class="hljs-number">150</span>rpx; <span class="hljs-attribute">height</span>: <span class="hljs-number">150</span>rpx; <span class="hljs-attribute">margin</span>: <span class="hljs-number">30</span>rpx; <span class="hljs-attribute">border-radius</span>: <span class="hljs-number">50%</span>; } <span class="hljs-selector-class">.userinfo-nickname</span> { <span class="hljs-attribute">color</span>: <span class="hljs-number">#333333</span>; <span class="hljs-attribute">font-size</span>: <span class="hljs-number">42</span>rpx; } |
js：
在js中需要注意的是，open-type="getUserInfo"需要做老版本兼容，老版本通过wx.getUserInfo即可唤起授权页面，不需要添加button去触发
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<span class="hljs-comment">//获取应用实例</span> <span class="hljs-keyword">const</span> app = getApp(); Page({ <span class="hljs-comment">/** * 页面的初始数据 */</span> data: { <span class="hljs-attr">userInfo</span>: {}, <span class="hljs-attr">hasUserInfo</span>: <span class="hljs-literal">false</span>, <span class="hljs-attr">canIUse</span>: wx.canIUse(<span class="hljs-string">'button.open-type.getUserInfo'</span>) }, <span class="hljs-comment">/** * 生命周期函数--监听页面加载 */</span> onLoad: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">options</span>) </span>{ <span class="hljs-keyword">var</span> that = <span class="hljs-keyword">this</span>; <span class="hljs-keyword">if</span> (app.globalData.userInfo) { that.setUserInfo(app.globalData.userInfo); } <span class="hljs-keyword">else</span> <span class="hljs-keyword">if</span> (that.data.canIUse) { <span class="hljs-comment">// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回</span> <span class="hljs-comment">// 所以此处加入 callback 以防止这种情况</span> app.userInfoReadyCallback = <span class="hljs-function"><span class="hljs-params">res</span> =></span> { that.setUserInfo(res.userInfo); } } <span class="hljs-keyword">else</span> { <span class="hljs-comment">// 在没有 open-type=getUserInfo 版本的兼容处理</span> wx.getUserInfo({ <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-params">res</span> =></span> { that.setUserInfo(res.userInfo); } }) } }, <span class="hljs-attr">getUserInfo</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">this</span>.setUserInfo(e.detail.userInfo); }, <span class="hljs-attr">setUserInfo</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">userInfo</span>) </span>{ <span class="hljs-keyword">if</span> (userInfo != <span class="hljs-literal">null</span>) { app.globalData.userInfo = userInfo <span class="hljs-keyword">this</span>.setData({ <span class="hljs-attr">userInfo</span>: userInfo, <span class="hljs-attr">hasUserInfo</span>: <span class="hljs-literal">true</span> }) } } }) |
二、 功能菜单列表
详情见下一篇：微信小程序：“我的”页面布局（二）：可配置功能菜单列表
简书：ThinkinLiu 博客: IT老五
IT老五（it-lao5）：关注公众号，一起源创，一起学习！
