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

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

设计稿

先来分析一下设计稿

由设计稿可以看出，个人中心分为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="phone_number_button" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
<!--        获取用户信息-->
<button class="user_info_button" open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>

</view>

</view>

#personal.less

.gj_personal_page{
.content{
display: flex;
align-items: center;
padding: 25px 15px;
background-color: #002FA7;
position: relative;
.avatar{
width:70px;
height: 70px;
margin-right:12px;
image{
width: 100%;
height: 100%;
vertical-align: middle;
}
}
.nick-name{
flex: 1;
color: #FFFFFF;
font-size: 20px;
}
.phone_number_button{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 50;
}
.user_info_button{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 50;
}

}

}

我们的静态页面生成了，接下来需要页面

js

我们先来了解一下整个小程序登录的流程。

小程序登录

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

登录流程时序

我们先来了解一下简单的流程

说明：

1. 调用

   wx.login()

   获取 临时登录凭证 code，并回传到开发者服务器。
2. 调用

   auth.code2Session

   接口，换取 用户唯一标识 OpenID和 会话密钥 session_key。

之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。

注意：

1. 会话密钥

   session_key

   是对用户数据进行 加密签名 的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个密钥。
2. 临时登录凭证 code 只能使用一次

UnionID 和 OpenId

了解小程序登录之前，我们先了解下小程序/公众号登录涉及到两个最关键的用户标识：

• OpenId

  是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。

• UnionId

  是一个用户对于同主体微信小程序／公众号／APP 的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过

  UnionId

  ，实现多个小程序、公众号、甚至APP 之间的数据互通了。

关键 API

• wx.login

  调用接口获取登录凭证（code）

• wx.checkSession

  检查登录态是否过期。

• wx.authorize

  提前向用户发起授权请求

• wx.getUserInfo

  获取用户基本信息

登录流程设计

果酱先生的登录流程是利用

获取微信用户绑定的手机号

1. 利用

   wx.login

   获取 code。
2. 将 code 传给服务端，获取

   openid

   。
3. 然后小程序客户端将获取到的微信用户绑定的手机号传给后端，返回给小程序客户端自定义登录状态

   token

   。
4. 小程序客户端将

   token

   存在本地。

总结

• 个人中心静态页面编写
• 了解小程序登录
• 果酱先生登录流程

下一章节教你们小程序登录的代码编写跟

button