小程序如何用data的数据控制页面展示_小程序实战之登录的原理和实现（内含福利）
本文经授权转载自码匠笔记(ID：)
登录原理
登录便是小程序的开始，小程序可以方便的使用微信登录，获取用户的个人信息，这样我们就能保留用户的信息和记录用户的操作。
如图是小程序官方给出的登录过程：
1.调用 wx.login() 获取临时登录凭证code ，并回传到开发者服务器。调用 接口，换取用户唯一标识 和会话密钥()，为了安全所以需要使用小程序先获取 code 然后再传递到服务器端获取登录信息进行登录。
2.。微信为登录用户设置的登录，用户校验登录态和下文中我们用于校验用户信息的正确性。
文档地址：
因为我们不仅仅需要有登录状态，还需要获取用户信息保存到服务器端所以我们需要获取用户信息，目前我们获取用户信息需要在小程序端使用 组件，并将 open-type 指定为 类型，点击 的时候通过 属性 绑定的 接收用户信息。通过上述方式我们可以获取到 和 ， 是用户信息：
{"":"小匠","":1,"":"zh_CN","city":"北京","":"北京","":"CN","":""
因为
=sha1(+)，
所以我们把这两个属性直接传递到服务器端，不仅获取到了用户信息，用于存储到服务器端，还能校验请求数据的真实性。
文档地址
我对流程图进行了优化，这样可以减少一次服务端的请求，提高响应速度。
1.首先在小程序端通过调用 wx.login 和 获取code 和 用户信息，一起通过 wx. 发送给开发者服务器端，这样便减少一些请求。
2.调用 接口到微信接口服务获取 和 ，直接对用户信息进行 SHA1 校验，校验成功以后创建自定义登录态，返回自定义登录态到小程序。
3.自定义登录态是什么呢？做过web的朋友都知道 和 可以组合做登录态，我们这里也是模拟这种设计，只是我们会把存到数据库中，自定义生成 (token) 传递给小程序端，存储到 里面。
4. 类似于浏览器的 ，用户小程序端方便的存储一些基础数据。
小程序端逻辑实现
现在我们已经理解了怎么做登录验证，那接下来我们开始编写客户端代码。
首先我们需要在 方法里面调用 wx.login() 方法， 方法在页面加载的是就会调用，当页面加载的时候我们就把 code 存入 data 里面，以便后面调用服务端接口的时候使用。因为每次调用 wx.login 对应的 就会变，所以必须保证 wx.login 的调用 在获取用户信息之前。这时候我们每次刷新页面都会在控制台看到如下输出(我这里使用的是 + S 每次会重新编译小程序)
然后我们需要在 /index.wxml 文件中的按钮上面添加 open-type 和 ，如下：
class="e62d-d616-16c4-b36a btn"open-type=""
=""hover-class="56fa-786c-3035-6c40 btn-click">
登录
接下来在 /index.js 里面添加 方法用于接收点击按钮获取用户信息的回调，回调方法里面的 就是我们想要的用户信息。我们再模拟器里面点击按钮，在控制台里面查看具体的信息，具体模拟器和控制台怎么用，我们在《客户端代码准备和基础功能讲解》中已经有讲解。
//绑定wxml的，用户获取用户信息
:(){.log()
大家应该都知道 JSON 这种数据传输格式，我们下面就使用 wx. 发送用户信息和 code 到服务器端，wx. 对于初学者你们可以理解为 ajax。按照我的接口定义，我只要发送 , 和 code 到服务器端，然后接收数据。所以我的实现如下：
wx.({
url:.+'/api/login',
:"post",data:JSON.({
code:this.data.code,
:..,
:..
}),
:"json",
:=>{
wx.();
.log();if(.data.==200){//展示登录成功提示框
wx.({
title:'登录成功',
icon:"none",
:1000
});//把自定义登录状态token缓存到小程序端
wx.({
key:"token",data:.data.data.token
});
}else{//展示错误信息
wx.({
title:.data.,
icon:"none",
:1000
});
},
fail:=>{
.log()
wx.({
title:'登录失败，请重试'
});
})
切记这段代码块要放在 wx.login 成功以后。
我们会根据返回的 做相应的处理。wx. 会把我返回的内容再包裹一个 data，所以如上内容登录成功和失败我实际返回的 JSON 如下：
{"":200,"":"登录成功","data":{"token":"-38d9-4908-a024-"
{"":400,"":"无效登录"
wx. 是提示框，所以当成功以后提示成功，失败以后把获取到提示给用户。
最后代码中你会看到
wx.({title:"登录中",
mask:true
});
和
wx.();
是为了优化一下体验，当点击登录的时候提示登录中，等待服务端返回数据的时候消失，到此本节小程序部分已经结束。
服务端逻辑实现
上面客户端已经完成，开始开发服务端。首先我们需要定义一个 API 入口 ，用于定义 api/login 接口接收小程序发过来的请求。如下：
@@{//自动注入，因类上面有@注解@er;//定义/api/login访问接口，用于实现登录//使用自动解析传递过来的JSON数据@("/api/login")(@){try{
(":{}",);//使用code调用微信API获取和
=.(.());
(":{}",);//检验传递过来的使用户信息是否合法
.(.(),.(),.());//TODO:储存token//生成token，用于自定义登录态，这里的存储逻辑比较复杂，放到下一讲
=();data.(UUID.().());.ok(data);
}catch(){
log.error(",info:{}",,e.());.fail(e);
}catch(){
log.error(",info:{}",,e);.fail(.);
根据如上代码，我们找一些关键点讲解一下
1.，定义当前 为 ，最简单的理解就是 @ = @ ＋ @
2.@Slf4j，注解，需要在 Idea 插件中安装 ，这样在需要使用日志的时候，直接使用 log.*()就可以了。
3.@ ，会把传递过来的 JSON 对象自动序列化成对象。
自定义 ，根据业务的异常友好的提示到小程序端，具体使用和enum实现，源码可以参考 com..error 包下面的类。
对于返回对象的统一封装，便于小程序端接收和处理。
@tDTO{;;;
是状态码，如果不是200，都是异常。
data 是数据，可以是多种类型。
返回的错误信息。
@Data 是 的注解，可以自动生成 set get 方法，省去了自己编写 set get 的麻烦。
下面是对调用微信的 API 进行封装
@{gger=.(.class);
@Value("${.appid}");
@Value("${.}");(){="";
ient=();=.()
.("-type","/json")
.url(.(url,appid,,code))
.build();
try{=.().();if(.()){
=JSON.(.body().(),.class);
("->{},info->{}",.(url,appid,,code),JSON.());
;
}else{
.error("->{}",code);
(.);
}catch(){
.error("->{}",code,e);
(.);
讲解一下 里面的关键点：
1.@Value("${.appid}") 是 的自动注解，直接读取 -*.yml 里面的配置赋值给appid变量。这时候我们的 -.yml 里面的配置如下：
:appid:${
}:${
appid和是在小程序控制台->开发设置->开发者ID里面获取，为了安全，我们不能把这些信息直接提交到代码里面，所以我选择了把它们配置到 的环境变量里面，在部署的时候会自动的替换掉 -.yml 里面的 ${} 占位符，然后通过 @Value 赋值到 @里面的变量 appid。具体配置方式如下，还需要先进入 的控制台，然后点击 进行配置，记住左边是 -.yml 里面的占位符，右边是你小程序的 id 和 。
2.，是使用的 ，小编觉得这个用起来比 的 要简单，代码就不需要讲解了，继续要因为一个 pom.xml 文件。
--调用HTTP请求-->com..>>3.8.>>
3.JSON. 直接解析到对象。
4.throw new (.);
直接返回业务的，
对了，忘记说最重要的一个问题，这次改动需要添加4个pom.xml
--自动生成方法-->org.>>1.12.>>com..>>3.8.>>com.>>1.2.>>->->1.>>
服务端源码地址：
(本讲 Tag V5)
小程序源码地址：
(本讲 Tag V5)
作者简介：码匠笔记，先后就职于 、阿里巴巴等互联网公司。专注于JAVA、并发编程、性能优化、架构设计、小程序、开源软件。
