个人中心页跟小程序登录流程—小程序入门与实战（十三）

在上一章节我们已经已经完成了首页，还剩 “点赞” 跟 “分享” 我们在讲解了小程序登录之后讲解。

设计稿

先来分析一下设计稿

由设计稿可以看出，个人中心分为3个状态。

• 第一个为已经登录并且已经有头像昵称
• 第二个为没有登录
• 第三个为已经登录但是没有完善头像昵称

由此我们可以思考出，需要先登录，然后完善头像昵称，才可以有第一张设计稿的样子。

页面静态布局

先把个3个状态先写出来，然后再来做处理

#personl.wxml

<view class="gj_personal_page">
    <view class="content">
        <view class="avatar">
            <image src="https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3726152609,3152446906&fm=26&gp=0.jpg"></image>
        </view>
        <view class="nick-name">
            @黔在在 || 点击登录 || 点击授权头像昵称
        </view>
<!--        手机号登录-->
        <button class=