小程序登录逻辑

整体思路

具体的实现要根据后端程序员提供的文档和业务逻辑而定，以下的思路仅仅是用来熟悉微信登录相关的接口

1. 首先引导用户进入登录页面；
2. 使用button组件的开发能力，发起获取用户信息getUserInfo的授权；
3. 获取到用户的基本信息后，使用wx.login()，获取登录code；
4. 将获取的code和第2步获取的用户基本信息，通过wx.request()提交至服务器端；
5. 服务器端拿到提交的数据后进行相关的验证处理，并且通过接受的code值，换取该用户的openid；
6. 服务端验证通过后，将相关的数据返回给小程序客户端，前端做好相关数据的存储，校验(在必要的时候)

下面是小程序官方提供的登录时序图：

注：openid是用户在当前小程序下的唯一标识

登录实现

引导用户进入登录授权

通过明确的进入点，让用户进入登录页面：

发起用户授权，获取相关信息

进入登录页面后，通过button标签开放能力，getUserInfo发起用户授权：

• button获取用户信息开放能力

请求后台登录接口

点击微信登录按钮后，触发getUserInfo事件，代码如下：

进过上面的步骤，我们已经可以获取到登录后服务器返回的数据，该接口返回的数据如下：

{
    code:0,
    msg:"success",
    info:{
        avatarUrl:"用户头像",
        nickName:"用户昵称",
        openid:"openid"
    },
    session_id:"后台的session_id"
}

登录后如下所示：

登录状态检查的实现

登录检查包括两种：

1. 用户从未登录
2. 登录过，但是不知道有无过期

对于第一种情况，直接跳转到登录授权页面即可；第二种情况则需要先检查是否过期，检查的方式又有两种情况：

1. 通过服务器自定义的逻辑判断登录有无过期(类似vue登录的token值，还有其他的一些方式)
2. 调用小程序提供的wx.checkSession()检查session_key是否有效

这里我们采用第2中检查方式，判断登录状态的有效性。

在app.js中新增checkLogin方法，方便全局调用

加入我们需要在订单页面检查用户是否登录，在订单页面的生命周期函数onshow中添加如下代码：

其中setIsLogin方法，是在app.js中定义的，主要用来设置登录的状态,app.js中实现如下：

该登录状态主要用于切换页面中登录和未登录前后显示的内容

在进入订单页面的时候，如果未登录，如下所示：

点击去登录则会重新跳转到登录授权页面，登录后再进入授权页，如下所示：

退出登录

退出登录即清除掉登录保存的相关信息即可，具体逻辑自行实现。

也不排除在退出登录的时候，需要请求服务器端，具体情况根据后台提供的文档而定