苍穹外卖(五) 微信小程序

项目应用: 

• 使用微信小程序完成客户端开发
• 并基于微信登录实现小程序的登录功能
• 如果是新用户需要自动完成注册

 微信小程序开发

介绍

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

官方网址：**微信小程序 

准备工作

开发微信小程序之前需要做如下准备工作：

• 注册小程序       
  • 走个人通道正常注册就可以
• 完善小程序信息
  • 进去之后填写一下项目名称  
• 下载开发者工具

  • 资料中已提供，无需下载，熟悉下载步骤即可。

    下载地址： 微信开发者工具（稳定版 Stable Build）下载地址与更新日志 | 微信开放文档

  • 下载好后, 创建小程序  AppID 见上方
  • 调试器 : 跟浏览器的调试工具是一样的  也能看到服务端发过来的消息
  • 

  • 设置不校验合法域名

  • 

 

基本结构

实际上，小程序的开发本质上属于前端开发，主要使用JavaScript开发，咱们现在的定位主要还是在后端，所以，对于小程序开发简单了解即可。

 小程序目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

app.js：必须存在，主要存放小程序的逻辑代码

app.json：必须存在，小程序配置文件，主要存放小程序的公共配置

app.wxss: 非必须存在，主要存放小程序公共样式表，类似于前端的CSS样式

对小程序主体三个文件了解后，其实一个小程序又有多个页面。比如说，有商品浏览页面、购物车的页面、订单支付的页面、商品的详情页面等等。这些页面会放在哪呢？ 会存放在pages目录。

js文件：必须存在，存放页面业务逻辑代码，编写的js代码。

wxml文件：必须存在，存放页面结构，主要是做页面布局，页面效果展示的，类似于HTML页面。

json文件：非必须，存放页面相关的配置。

wxss文件：非必须，存放页面样式表，相当于CSS文件。

 微信登录

导入小程序代码

开发微信小程序，本质上是属于前端的开发，我们的重点其实还是后端代码开发。所以，小程序的代码已经提供好了，直接导入到微信开发者工具当中，直接来使用就可以了。

微信登录流程 

在我们完成小程序的代码导入后, 我们看一下微信登录流程

步骤分析：

1. 小程序端，调用wx.login()获取code，就是授权码。
2. 小程序端，调用wx.request()发送请求并携带code，请求开发者服务器(自己编写的后端服务)。
3. 开发者服务端，通过HttpClient向微信接口服务发送请求，并携带appId+appsecret+code三个参数。
4. 开发者服务端，接收微信接口服务返回的数据，session_key+opendId等。opendId是微信用户的唯一标识。
5. 开发者服务端，自定义登录态，生成令牌(token)和openid等数据返回给小程序端，方便后绪请求身份校验。
6. 小程序端，收到自定义登录态，存入storage。
7. 小程序端，后绪通过wx.request()发起业务请求时，携带token。
8. 开发者服务端，收到请求后，通过携带的token，解析当前登录用户的id。
9. 开发者服务端，身份校验通过后，继续相关的业务逻辑处理，最终返回业务数据。

接下来，我们使用Postman进行测试。

 

说明

1. 调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2. 调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 、 用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号） 和 会话密钥 session_key。

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

注意事项

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

 

测试OpenID 获取：

1). 获取授权码

点击确定按钮，获取授权码，每个授权码只能使用一次，每次测试，需重新获取。

 

2). 明确请求接口

请求方式、请求路径、请求参数

 

3). 发送请求

在项目代码中,这部分使用HttpClient 方法实现

获取session_key和openid

 

若出现code been used错误提示，说明授权码已被使用过，请重新获取

 

需求分析和设计

业务规则：

• 基于微信登录实现小程序的登录功能
• 如果是新用户需要自动完成注册

 代码实现:

太多了,只放图片

苍穹外卖-day06.md

代码在连接中的3.4

3.4.4 Controller层

根据接口定义创建UserController的login方法：

 

3.4.6 Service层实现类

创建UserServiceImpl实现类：实现获取微信用户的openid和微信登录功能

 

3.4.8 编写拦截器

**编写拦截器JwtTokenUserInterceptor：**统一拦截用户端发送的请求并进行jwt校验在WebMvcConfiguration配置类中注册拦截器：

项目启动自动加载配置类, 这时就会把定义好的JwtTokenUserInterceptor 对象(也就是拦截器对象) 注入