用户绑定了微信帐户以后，可以在我的页面上显示用户的头像 .. 回到项目 .. 打开 db.json .. 这个头像的位置是在 weixin .. userinfo 下面的 avatarUrl ..

先删除掉这个用户 .. 一会儿再重新绑定一下 ..

打开后端服务的 user 模块 .. 可以先处理一下 wx-login 这个接口 .. 给用户签发 token 的时候，再添加一个 avatar ..

然后做一下判断 .. 用一下 lodash 里的 has .. 检查 user 对象， 看看它里面有没有 weixin.userInfo.avatarUrl ，如果有这个属性 .. 重新设置一下 avatar 的值，让它等于 user.weixin.userInfo.avatarUrl ..

复制一下 .. 等会儿还会用到它. .

在响应里再添加一个 avatar ..

找到绑定微信帐户的接口 .. 再添加一个 avatar .. 在响应里添加一个 avatar ..

然后找到正常登录的接口 .. 这里也可以添加一个 avatar .. 把这个 avatar 放在响应的数据里 ..

profile

打开 UserProfile 页面 ..

在页面的 state 里面 .. 添加一个 avatar ..

退出登录的事件处理里面，把 avatar 的值设置成空白 ..

找到 fetchUserData .. 添加一个 avatar .. 它的值是 user 里的 avatar ..

然后是 componentWillMount

设置一下 avatar 这个状态..

处理一下页面的视图 .. 把 avatar 解构出来 .

添加一个 usernameItem .. 剪切一下 .. 粘贴到这里 .. 只留下 username .. 周围用一组 Text .. 包装一下这个文字 .. 组件上添加一个 text-bold 类 ..

在页面顶部 .. 导入需要的 Text 组件 ..

复制一份 usernameItem .. 改一下名字 .. 换成 avatarItem ..

里面用一个 Image 组件 .. src 是图像的地址 .. 这里就是 avatar . 添加一个自定义的类叫 avatar

在顶部，导入需要的 Image 组件 ..

回来继续编辑视图 .. 再复制一份 .. 添加一个 loginTextItem .. 给点击事件处理绑定的值是 login

包装的是一个 Text ... 文字是 登录 / 注册 ..

在视图里面添加一个包装 .. 里面添加几个项目 .. 显示 avatarItem 的时候判断 avatar 的值 .. 显示 usernameItem 的值判断 username 的值 .. 显示 loginTextItem 的时候，看一下 username 是不是有值，没的值就显示这个 loginTextItem ..

提示 componentWillMount 有个错误 .. 这里需要把 avatar 解构出来 ..

再添加点自定义的样式 .. 先把它放在 app.scss 文件里 .. 添加一个 .avatar .. 里面用 width 设置一下头像的宽度 .. 再用 height 设置一下头像的高度 ..

回到模拟器 ..

先退出登录 ..

按一下 登录 / 注册 应该打开 UserAccount 页面 .. 这里还得再处理一下 .. 找到点击事件处理方法 .. 添加一种情况 .. 如果是 login .. 用一下 Taro.navigateTo .. 打开 /pages/user/account 页面 ..

回到模拟器 .. 按一下 登录 / 注册 ..

再按一下 微信登录 .. 提示绑定 .. 输入用户名 .. 密码 .. 确定一下绑定 ..

成功以后，会在我的页面上显示用户的头像 .. 这个头像可以添加点圆角效果 .. 在 avatar 的样式里，用 border-radius 设置圆角 .. 大小设置成 $border-radius-md 这个变量的值 ..

在模拟器上预览一下 .. 按一下头像或者用户名 .. 打开用户设置页面 .. 选择 退出 .. 回到我的页面 .. 会显示 登录 / 注册 .. 按一下它 .. 打开了 UserAccount 页面 .. 直接选择用微信登录 .. 因为之前已经绑定过了 .. 所以这次会直接让用户登录 ..