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

项目应用: 

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

 微信小程序开发

介绍

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

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

准备工作

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

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

 

基本结构

实际上,小程序的开发本质上属于前端开发,主要使用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 对象(也就是拦截器对象) 注入

 

### 导入苍穹外卖项目至微信小程序开发环境 #### 配置开发环境 为了将苍穹外卖项目成功导入到微信小程序开发环境中,需先确保本地已安装必要的开发工具和依赖项。具体来说: - 安装 JDK 版本应不低于 1.8[^3]。 - 使用 IDE 如 IDEA 或 Eclipse 进行 Java 项目的开发和支持。 对于微信小程序部分,则需要准备如下工具: - **微信开发者工具**:用于调试和预览微信小程序效果。 - HBuilderX (可选):如果计划利用 UniApp 框架的优势来实现多端兼容的应用开发。 #### 准备源码结构 假设已经获取到了完整的苍穹外卖项目源代码包,在将其迁移到微信小程序之前,应当按照官方文档指导调整文件夹布局以适应小程序的要求。通常情况下,这涉及到创建 `pages` 和 `components` 文件夹,并放置相应的页面组件文件。 #### 修改配置文件 由于苍穹外卖项目原本可能是作为一个独立的 Web 应用构建而成,因此迁移过程中还需要特别注意修改以下几个方面: - 更新 `app.json` 中定义的小程序全局设置以及各个页面路径; - 调整网络请求接口地址指向后端服务的实际部署位置; - 如果存在跨域问题,则应在服务器端做好 CORS 设置以便允许来自不同域名下的资源访问。 #### 实现前后端交互逻辑 考虑到该项目采用了 Spring Boot 构建 RESTful API 来处理业务流程,所以在前端调用这些API时可以借助 wx.request 方法完成数据交换操作。例如编辑员工信息这样的场景下,可以通过 POST 请求发送 JSON 格式的参数给指定 URL 地址 `/employee/{id}`[^4]。 ```javascript wx.request({ url: 'https://example.com/api/v1/status/' + status, method: 'POST', data: { id: employeeId }, header: { 'content-type': 'application/json' // 默认值 }, success(res){ console.log('success', res.data); } }) ``` 通过上述步骤的操作,即可顺利地把基于Java-SpringBoot架构搭建起来的服务端同微信小程序客户端结合起来工作了。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值