苍穹外卖-day06（小程序开发）

真的想不出名儿

已于 2024-11-15 11:06:02 修改

阅读量602

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Java项目文章标签：微信小程序

于 2024-11-12 14:01:52 首次发布

本文链接：https://blog.csdn.net/ioncannontic/article/details/143707709

HttpClient
微信小程序开发
微信登录
导入商品浏览功能代码

功能实现：微信登录、商品浏览

微信登录效果图：

在这里插入图片描述
商品浏览效果图：

1. HttpClient

1.1 介绍

HttpClient 是Apache Jakarta Common 下的子项目，可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。

在这里插入图片描述
HttpClient作用：

发送HTTP请求
接收响应数据

在这里插入图片描述为什么要在Java程序中发送Http请求？有哪些应用场景呢？

HttpClient应用场景：

当我们在使用扫描支付、查看地图、获取验证码、查看天气等功能时
在这里插入图片描述
其实，应用程序本身并未实现这些功能，都是在应用程序里访问提供这些功能的服务，访问这些服务需要发送HTTP请求，并且接收响应数据，可通过HttpClient来实现。

HttpClient的maven坐标：

<dependency>
	<groupId>org.apache.httpcomponents</groupId>
	<artifactId>httpclient</artifactId>
	<version>4.5.13</version>
</dependency>

HttpClient的核心API：

HttpClient：Http客户端对象类型，使用该类型对象可发起Http请求。
HttpClients：可认为是构建器，可创建HttpClient对象。
CloseableHttpClient：实现类，实现了HttpClient接口。
HttpGet：Get方式请求类型。
HttpPost：Post方式请求类型。

HttpClient发送请求步骤：

创建HttpClient对象
创建Http请求对象
调用HttpClient的execute方法发送请求

1.2 入门案例

对HttpClient编程工具包有了一定了解后，那么，我们使用HttpClient在Java程序当中来构造Http的请求，并且把请求发送出去，接下来，就通过入门案例分别发送GET请求和POST请求，具体来学习一下它的使用方法。

1.2.1 GET方式请求

正常来说，首先，应该导入HttpClient相关的坐标，但在项目中，就算不导入，也可以使用相关的API。

因为在项目中已经引入了aliyun-sdk-oss坐标：

<dependency>
    <groupId>com.aliyun.oss</groupId>
    <artifactId>aliyun-sdk-oss</artifactId>
</dependency>

上述依赖的底层已经包含了HttpClient相关依赖。
在这里插入图片描述
故选择导入或者不导入均可。

进入到sky-server模块，编写测试代码，发送GET请求。

实现步骤：

创建HttpClient对象
创建请求对象
发送请求，接受响应结果
解析结果
关闭资源

package com.sky.test;

import org.apache.http.HttpEntity;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.junit.jupiter.api.Test;
import org.springframework.boot.test.context.SpringBootTest;

@SpringBootTest
public class HttpClientTest {
   
   

    /**
     * 测试通过httpclient发送GET方式的请求
     */
    @Test
    public void testGET() throws Exception{
   
   
        //创建httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();

        //创建请求对象
        HttpGet httpGet = new HttpGet("http://localhost:8080/user/shop/status");

        //发送请求，接受响应结果
        CloseableHttpResponse response = httpClient.execute(httpGet);

        //获取服务端返回的状态码
        int statusCode = response.getStatusLine().getStatusCode();
        System.out.println("服务端返回的状态码为：" + statusCode);

        HttpEntity entity = response.getEntity();
        String body = EntityUtils.toString(entity);
        System.out.println("服务端返回的数据为：" + body);

        //关闭资源
        response.close();
        httpClient.close();
    }
}

在访问 http://localhost:8080/user/shop/status 请求时，需要提前启动项目。

测试结果：
在这里插入图片描述

1.2.2 POST方式请求

在HttpClientTest中添加POST方式请求方法，相比GET请求来说，POST请求若携带参数需要封装请求体对象，并将该对象设置在请求对象中。

实现步骤：

创建HttpClient对象
创建请求对象
发送请求，接收响应结果
解析响应结果
关闭资源

	/**
     * 测试通过httpclient发送POST方式的请求
     */
    @Test
    public void testPOST() throws Exception{
   
   
        // 创建httpclient对象
        CloseableHttpClient httpClient = HttpClients.createDefault();

        //创建请求对象
        HttpPost httpPost = new HttpPost("http://localhost:8080/admin/employee/login");

        JSONObject jsonObject = new JSONObject();
        jsonObject.put("username","admin");
        jsonObject.put("password","123456");

        StringEntity entity = new StringEntity(jsonObject.toString());
        //指定请求编码方式
        entity.setContentEncoding("utf-8");
        //数据格式
        entity.setContentType("application/json");
        httpPost.setEntity(entity);

        //发送请求
        CloseableHttpResponse response = httpClient.execute(httpPost);

        //解析返回结果
        int statusCode = response.getStatusLine().getStatusCode();
        System.out.println("响应码为：" + statusCode);

        HttpEntity entity1 = response.getEntity();
        String body = EntityUtils.toString(entity1);
        System.out.println("响应数据为：" + body);

        //关闭资源
        response.close();
        httpClient.close();
    }

测试结果：
在这里插入图片描述

2. 微信小程序开发

2.1 介绍

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
在这里插入图片描述
官方网址： https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

在这里插入图片描述
小程序主要运行微信内部，可通过上述网站来整体了解微信小程序的开发。

首先， 在进行小程序开发时，需要先去注册一个小程序，在注册的时候，它实际上又分成了不同的注册的主体。我们可以以个人的身份来注册一个小程序，当然，也可以以企业政府、媒体或者其他组织的方式来注册小程序。那么，不同的主体注册小程序，最终开放的权限也是不一样的。比如以个人身份来注册小程序，是无法开通支付权限的。若要提供支付功能，必须是企业、政府或者其它组织等。所以，不同的主体注册小程序后，可开发的功能是不一样的。

在这里插入图片描述
然后， 微信小程序我们提供的一些开发的支持，实际上微信的官方是提供了一系列的工具来帮助开发者快速的接入并且完成小程序的开发，提供了完善的开发文档，并且专门提供了一个开发者工具，还提供了相应的设计指南，同时也提供了一些小程序体验DEMO，可以快速的体验小程序实现的功能。

在这里插入图片描述
最后， 开发完一个小程序要上线，也给我们提供了详细地接入流程。

在这里插入图片描述

2.2 准备工作

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

注册小程序
完善小程序信息
下载开发者工具

1). 注册小程序

注册地址：https://mp.weixin.qq.com/cgi-bin/wx

在这里插入图片描述
2). 完善小程序信息

登录小程序后台：https://mp.weixin.qq.com/

完善小程序信息、小程序类目
在这里插入图片描述
查看小程序的 AppID

3). 下载开发者工具

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

下载地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html
在这里插入图片描述

扫描登录开发者工具

======

创建小程序项目
在这里插入图片描述
熟悉开发者工具布局

设置不校验合法域名

注：开发阶段，小程序发出请求到后端的Tomcat服务器，若不勾选，请求发送失败。

2.3 入门案例

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

2.3.1 小程序目录结构

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

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

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

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

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

每个小程序页面主要由四个文件组成：
在这里插入图片描述
文件说明：

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

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

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

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

2.3.2 编写和编译小程序

1). 编写

进入到index.wxml，编写页面布局

<view class="container">
  <view>{
  
  {msg}}</view>
   <view>
    <button type="default" bindtap="getUserInfo">获取用户信息</button>
    <image style="width: 100px;height: 100px;" src="{
    
    {avatarUrl}}"></image>
    {
  
  {nickName}}
  </view>
   <view>
    <button type="primary" bindtap="wxlogin">微信登录</button>
    授权码：{
  
  {code}}
  </view>
   <view>
    <button type="warn" bindtap="sendRequest<