微信小程序+Spring Boot车位预约系统完整源码解析

简介：这是一份面向微信小程序初学者与全栈开发者的实战项目源码，聚焦停车场数字化管理场景，提供从用户端预约到后台管理的完整闭环解决方案。资源包含981个文件，主体为76个JS逻辑文件、49个CSS样式文件、42个Java后端代码及335个PNG图标资源，辅以SVG矢量图、GIF动效和WXML/WXSS小程序特有文件，整体压缩包仅9.87MB，轻量易部署。已有530人学习下载，适合用于课程设计、毕业项目或快速搭建小程序MVP。读者可直接导入微信开发者工具运行前端，配合Java+MySQL环境启动后端服务；代码结构清晰，涵盖用户登录、车位查询、预约提交、停车记录、资讯发布及管理员多模块权限管理，还内置jQuery Mobile移动端UI组件库，便于理解兼容性适配与响应式布局实践。

1. 微信小程序车位预约系统：不是“套模板”，而是能跑通登录+停车场管理+记录查询的完整闭环

你是不是也下载过一堆标着“微信小程序源码”的压缩包，解压打开一看——只有app.js和几个空wxml文件，连project.config.json都没配好？或者更糟：用开发者工具一编译就报Cannot find module 'xxx'，翻遍node_modules都没那个依赖？这次不一样。这个名为“车位预约小程序”的.rar包，是某高校实验室在真实社区停车调度模拟项目X中落地过的完整工程，不是教学Demo，也不是半成品。它用原生微信小程序语法（非 Taro/uni-app）实现双角色：普通用户扫码即用，完成手机号登录、实时查看空闲车位、提交预约、查看历史记录；管理员通过独立入口进入后台模块，可增删停车场信息、审核预约状态、编辑资讯公告。技术栈干净利落：前端纯 WXML/WXSS/JS，后端 Java Spring Boot + MySQL，接口全部走 HTTPS，所有 API 路径、字段命名、状态码返回都按微信小程序最佳实践对齐。如果你正卡在“怎么把 Java 后端和小程序连起来”“登录态怎么持久化”“管理员权限怎么隔离”，而不是纠结“第一个按钮怎么变颜色”，这份源码就是你该拆开的第一份真实工程。

2. 源码结构与核心模块解析：从 project.config.json 到 parking-service 的真实路径

2.1 解压后第一眼必须确认的 4 个关键文件

拿到.rar包后，别急着导入开发者工具。先用 WinRAR 或 7-Zip 解压到一个无中文、无空格的路径（比如D:\wx-parking），然后打开根目录，重点检查以下四个文件是否存在且内容合理：

• project.config.json：这是微信开发者工具的“身份证”。本项目中它明确指定了appid: "wx1234567890abcdef"（实际为占位符，需替换）、description: "车位预约系统-生产环境"、setting.minified: true（已压缩 JS）。特别注意"compileType": "miniprogram"和"libVersion": "2.28.0"—— 这说明它适配微信基础库 2.28 及以上，低于此版本会白屏。
• app.js：全局逻辑中枢。它定义了App({ onLaunch() { wx.login() } })，但不直接处理 code 换 session_key，而是调用utils/api.js中封装的login()方法，将 code 发给 Java 后端/api/user/login接口。这是规避小程序端明文暴露 AppSecret 的关键设计。
• project.private.config.json：切勿删除！里面存着开发环境数据库连接配置（如jdbc:mysql://localhost:3306/parking_db?useSSL=false），虽不上传微信服务器，但本地调试 Java 后端时必须存在。
• server/目录：整个 Java 工程所在。包含pom.xml（Spring Boot 2.7.18 + MyBatis-Plus 3.5.3.1）、application.yml（含 JWT 密钥、MySQL 账号密码）、以及controller/下的ParkingController.java、AdminController.java等——这才是真正驱动预约逻辑的“大脑”。

提示：如果解压后看不到server/目录，说明你拿到的是阉割版。完整包应有client/（小程序前端）和server/（Java 后端）两个平行目录。本资源符合此结构。

2.2 小程序前端：WXML/WXSS/JS 如何协同渲染一个停车场列表

以用户首页的“附近停车场”模块为例，看三层如何咬合：

WXML 层：语义化结构 + 条件渲染

<!-- pages/index/index.wxml --> <view class="parking-list"> <block wx:for="{{parkings}}" wx:key="id"> <view class="parking-item" bindtap="onParkingTap">/* pages/index/index.wxss */ .parking-list { padding: 20rpx; } .parking-item { background: #fff; border-radius: 12rpx; margin-bottom: 20rpx; padding: 30rpx; box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05); } .parking-name { font-size: 32rpx; font-weight: bold; color: #333; } .parking-status { font-size: 24rpx; color: #666; margin: 10rpx 0; } .btn-reserve { width: 180rpx; height: 60rpx; font-size: 24rpx; background: #07c160; color: white; border-radius: 6rpx; }

注意单位统一用rpx（微信推荐），阴影用box-shadow而非图片，按钮圆角6rpx符合微信设计语言。所有颜色值均来自app.wxss中定义的变量（如@primary-color: #07c160;），便于全局主题切换。

JS 层：数据获取 + 状态管理 + 用户交互

// pages/index/index.js const api = require('../../utils/api.js'); Page({ data: { parkings: [], loading: true }, onLoad() { this.loadParkings(); }, loadParkings() { api.get('/api/parking/list').then(res => { // 后端返回 { code: 200, data: [...] } if (res.code === 200) { this.setData({ parkings: res.data, loading: false }); } }).catch(err => { wx.showToast({ title: '加载失败', icon: 'none' }); console.error('loadParkings error:', err); }); }, onParkingTap(e) { const id = e.currentTarget.dataset.id; wx.navigateTo({ url: `/pages/detail/detail?id=${id}` }); }, reserveNow(e) { const id = e.currentTarget.dataset.id; wx.showModal({ title: '确认预约', content: '确定要预约该车位？', success: (res) => { if (res.confirm) { api.post('/api/reserve/create', { parkingId: id }) .then(r => { if (r.code === 200) { wx.showToast({ title: '预约成功' }); this.loadParkings(); // 刷新列表 } }); } } }); } });

核心逻辑：

• api.get()封装了wx.request()，自动携带Authorization: Bearer ${token}（token 存于wx.setStorageSync('token')）
• onLoad触发loadParkings，而非onShow，避免下拉刷新时重复请求
• reserveNow中showModal阻断操作流，防止用户连点导致重复提交（后端虽有幂等校验，但前端拦截更友好）

2.3 Java 后端：Spring Boot 如何支撑高并发预约场景

server/目录下的 Java 工程不是玩具。它用标准分层架构应对真实压力：

• Controller 层：ParkingController.java处理/api/parking/list请求，仅做参数校验（如@Valid @RequestBody ParkingQuery query）和调用 Service，绝不写 SQL 或业务逻辑。

• Service 层：ParkingService.java实现核心逻辑。例如listAvailableParkings()方法：

  public List<ParkingVO> listAvailableParkings(ParkingQuery query) { // 1. 查询停车场基础信息（MyBatis-Plus LambdaQueryWrapper） QueryWrapper<Parking> wrapper = new QueryWrapper<>(); wrapper.eq("status", 1); // 只查启用中的停车场 if (StringUtils.isNotBlank(query.getArea())) { wrapper.like("area", query.getArea()); } List<Parking> parkings = parkingMapper.selectList(wrapper); // 2. 对每个停车场，查其当前空闲数（关联预约表统计未取消的预约） return parkings.stream().map(p -> { int available = parkingMapper.countAvailable(p.getId()); // 自定义 SQL return ParkingVO.builder() .id(p.getId()) .name(p.getName()) .available(available) .total(p.getTotal()) .build(); }).collect(Collectors.toList()); }

  关键点：countAvailable()是自定义 SQL（在ParkingMapper.xml中），用SELECT COUNT(*) FROM reservation WHERE parking_id = ? AND status != 'CANCELLED'，避免 N+1 查询。

• Mapper 层：ParkingMapper.java继承BaseMapper<Parking>，并声明int countAvailable(@Param("parkingId") Long parkingId);，对应 XML 中的<select>标签。

• 安全控制：所有管理员接口（如/api/admin/parking/add）被@PreAuthorize("hasRole('ADMIN')")拦截，JWT 解析后由 Spring Security 校验角色。用户无法通过修改 URL 访问 admin 接口。

3. 环境搭建与联调实操：从零启动小程序+Java 后端的完整链路

3.1 小程序端：微信开发者工具配置要点

1. 创建新项目：打开微信开发者工具 → “+ 新建项目” → 选择解压后的client/目录 → AppID 填写你自己的（测试可用wx0000000000000000）→ 选择“不使用云服务” → 创建。
2. 检查基础库版本：右上角“详情” → “项目设置” → 确认“基础库版本” ≥2.28.0。若低于此，点击“升级基础库”并重启工具。
3. 配置合法域名：在“详情” → “项目设置” → “服务器域名”中，将你的 Java 后端地址（如https://your-domain.com）填入request合法域名。注意：必须是 HTTPS，且域名已备案。本地调试可临时勾选“不校验合法域名”，但上线前必须关闭。
4. 启动调试：点击左上角“编译”按钮（或 Ctrl+B）。若控制台无红色报错，且模拟器显示首页，则前端准备就绪。

3.2 Java 后端：Maven 构建与 MySQL 初始化

1. 安装 JDK 11+ 和 MySQL 5.7+：本项目pom.xml中<java.version>11</java.version>，MySQL 需支持utf8mb4字符集。

2. 导入 Maven 项目：用 IntelliJ IDEA 打开server/目录 → 自动识别pom.xml→ 等待依赖下载完成。

3. 初始化数据库：

   • 创建数据库：CREATE DATABASE parking_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
   • 执行server/src/main/resources/sql/init.sql（该文件在完整包中提供），它包含parking、reservation、user等 6 张表的建表语句及初始数据（如 3 个测试停车场）。

4. 配置 application.yml：

   spring: datasource: url: jdbc:mysql://localhost:3306/parking_db?useSSL=false&serverTimezone=Asia/Shanghai username: root password: your_mysql_password jwt: secret: your_jwt_secret_key_here # 必须修改！32位随机字符串 expiration: 86400

   注意：jwt.secret是敏感信息，绝不能用默认值或明文提交到 Git。本地开发可暂用test1234567890123456789012345678，但上线前必须更换。

5. 启动后端：运行ServerApplication.java。看到控制台输出Started ServerApplication in X seconds即成功。访问http://localhost:8080/swagger-ui.html可查看所有 API 文档（Swagger UI 已集成）。

3.3 前后端联调：打通登录、预约、管理全流程

联调的核心是让小程序的wx.request()正确命中 Java 后端接口。步骤如下：

1. 确认后端 API 可访问：在浏览器打开http://localhost:8080/api/parking/list，应返回 JSON 数据（如{"code":200,"data":[...]}）。若报 404，检查 Controller 的@RequestMapping("/api")是否生效；若报 500，检查 MySQL 连接是否正常。
2. 修改小程序 API 基地址：打开client/utils/api.js，找到BASE_URL常量：

   const BASE_URL = 'https://your-domain.com'; // 上线时改为你的 HTTPS 域名 // 本地调试时改为： // const BASE_URL = 'http://localhost:8080';

   重要：本地调试必须用http://localhost:8080，不能用127.0.0.1（微信开发者工具会拒绝）。
3. 测试用户登录流程：
   • 在小程序首页点击“登录”，输入测试账号（如user1/123456）。
   • 查看开发者工具“Network”标签页，筛选login，确认请求 URL 为http://localhost:8080/api/user/login，Method 为POST，Payload 为{"username":"user1","password":"123456"}。
   • 后端应返回{"code":200,"data":{"token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."}}，小程序将 token 存入本地缓存。
4. 测试预约功能：
   • 登录后进入首页，点击任一停车场的“立即预约”。
   • Network 中查看reserve/create请求，确认携带了Authorization: Bearer xxx头。
   • 成功后，后端reservation表应新增一条记录，status为PENDING；小程序首页列表中该停车场的available数应减 1。

4. 避坑指南：那些让你调试到凌晨三点的真实问题

4.1 小程序端常见问题

现象：点击“登录”按钮无反应，控制台无任何日志。
原因：app.js中App({ onLaunch() { ... } })内的wx.login()成功后，未正确调用utils/api.js的login()方法，或login()方法中wx.request()的url拼写错误（如多了一个斜杠/api//user/login）。
解决：在app.js的onLaunch回调里加console.log('onLaunch triggered')；在utils/api.js的login()函数开头加console.log('login called with', params)；用 Network 抓包确认实际发出的请求 URL。

现象：首页停车场列表为空，Network 显示GET http://localhost:8080/api/parking/list返回 401 Unauthorized。
原因：用户未登录成功，或登录后 token 未正确存储到wx.setStorageSync('token')，导致后续请求无 Authorization 头。
解决：在app.js的onLaunch中，login()成功后检查res.data.token是否存在，并执行wx.setStorageSync('token', res.data.token)；在utils/api.js的request封装函数中，打印wx.getStorageSync('token')确认值不为空。

现象：管理员页面打不开，点击“我的”→“管理员入口”跳转后白屏。
原因：pages/admin/index/index.js中onLoad调用了api.get('/api/admin/dashboard')，但该接口需要 ADMIN 角色，而当前用户 token 对应的账号在数据库user表中role字段值为USER（非ADMIN）。
解决：用 MySQL 客户端执行UPDATE user SET role = 'ADMIN' WHERE username = 'admin1';，然后用admin1/123456登录。

4.2 Java 后端常见问题

现象：启动ServerApplication报错Caused by: java.sql.SQLException: Access denied for user 'root'@'localhost'。
原因：application.yml中的 MySQL 密码错误，或 MySQL 用户root未授权本地访问。
解决：登录 MySQL 执行SELECT User,Host FROM mysql.user;确认root用户的Host是%或localhost；若为127.0.0.1，则改用mysql -h 127.0.0.1 -u root -p测试连接。

现象：访问http://localhost:8080/api/parking/list返回 500，日志显示org.springframework.dao.DataIntegrityViolationException: Column 'area' cannot be null。
原因：数据库parking表中area字段设为NOT NULL，但init.sql插入的测试数据漏写了area值。
解决：检查init.sql，确保每条INSERT INTO parking语句都包含area字段，如INSERT INTO parking (name, total, area, status) VALUES ('科技园停车场', 100, '高新区', 1);。

现象：Swagger UI 页面空白，控制台报Failed to load resource: the server responded with a status of 404 ()。
原因：Spring Boot 版本与 Swagger 依赖不兼容。本项目用springfox-swagger2:2.9.2，需匹配 Spring Boot 2.1.x–2.3.x；若你升级了 Boot 版本，需同步升级 Swagger。
解决：保持pom.xml中的 Swagger 依赖版本不变，或改用springdoc-openapi-ui（本包未采用，故不推荐自行替换）。

4.3 跨域与 HTTPS 问题

现象：小程序真机调试时，Network 显示所有请求状态为failed，提示net::ERR_CONNECTION_REFUSED。
原因：真机无法访问http://localhost:8080（localhost 指手机自身，非开发机）。
解决：将 Java 后端部署到局域网内可访问的 IP（如http://192.168.1.100:8080），并在小程序api.js中修改BASE_URL；同时确保开发机防火墙放行 8080 端口。

现象：上线后小程序无法请求后端，Network 显示net::ERR_CERT_AUTHORITY_INVALID。
原因：HTTPS 证书非权威机构签发（如自签名证书），微信强制校验。
解决：购买并部署由 Let's Encrypt 或阿里云等签发的免费 HTTPS 证书；或使用腾讯云托管服务，自动配置 SSL。

5. 权限控制与数据安全加固：从角色分离到敏感字段脱敏

5.1 双角色路由守卫：前端如何拦截未授权访问

小程序没有传统 Web 的路由守卫机制，但可通过onLoad生命周期 + 全局状态实现轻量级防护。以管理员页面为例：

// pages/admin/index/index.js const app = getApp(); Page({ data: { isAdmin: false, loading: true }, onLoad() { this.checkAdminAuth(); }, checkAdminAuth() { const token = wx.getStorageSync('token'); if (!token) { wx.showToast({ title: '请先登录', icon: 'none' }); setTimeout(() => wx.reLaunch({ url: '/pages/login/login' }), 1500); return; } // 解析 JWT token payload（简单 Base64 解码，不验证签名） try { const payload = JSON.parse(atob(token.split('.')[1])); if (payload.role !== 'ADMIN') { wx.showToast({ title: '无权访问', icon: 'none' }); setTimeout(() => wx.navigateBack(), 1500); return; } this.setData({ isAdmin: true, loading: false }); } catch (e) { wx.showToast({ title: '身份验证失败', icon: 'none' }); wx.removeStorageSync('token'); wx.reLaunch({ url: '/pages/login/login' }); } } });

逻辑说明：

• token.split('.')[1]获取 JWT 的 payload 部分（Base64Url 编码）
• atob()解码后JSON.parse()得到对象，检查role字段
• 注意：这只是前端校验，起提示作用；真正的权限控制在 Java 后端@PreAuthorize。前端校验可防用户误点，但不能替代后端鉴权。

5.2 后端敏感数据脱敏：手机号、车牌号的显示规则

Java 后端在返回用户信息时，对敏感字段进行自动脱敏，避免前端忘记处理：

// utils/SensitiveInfoUtils.java public class SensitiveInfoUtils { // 手机号：138****1234 public static String desensitizeMobile(String mobile) { if (StringUtils.isBlank(mobile) || mobile.length() < 11) return mobile; return mobile.substring(0, 3) + "****" + mobile.substring(7); } // 车牌号：粤B·A1234 → 粤B·A**** public static String desensitizePlate(String plate) { if (StringUtils.isBlank(plate)) return plate; if (plate.length() >= 7) { return plate.substring(0, 5) + "****"; } return plate; } } // 在 Controller 中使用 @GetMapping("/info") public Result<UserVO> getUserInfo() { User user = userService.getById(getCurrentUserId()); UserVO vo = BeanUtil.copyProperties(user, UserVO.class); vo.setMobile(SensitiveInfoUtils.desensitizeMobile(vo.getMobile())); vo.setPlateNumber(SensitiveInfoUtils.desensitizePlate(vo.getPlateNumber())); return Result.success(vo); }

效果：前端收到的mobile字段已是138****1234，无需再写{{item.mobile | formatMobile}}过滤器，降低前端出错概率。

5.3 数据库字段加密：用户密码的 BCrypt 加盐存储

user表中password字段并非明文存储，而是 BCrypt 加密哈希值。注册/登录逻辑如下：

// UserService.java @Transactional public boolean register(UserRegisterDTO dto) { // 1. 检查用户名是否已存在 if (userMapper.selectCount(new QueryWrapper<User>().eq("username", dto.getUsername())) > 0) { throw new BusinessException("用户名已存在"); } // 2. BCrypt 加密密码 String encodedPassword = new BCryptPasswordEncoder().encode(dto.getPassword()); // 3. 保存用户（password 字段存 encodedPassword） User user = User.builder() .username(dto.getUsername()) .password(encodedPassword) // 存哈希值，非明文 .role("USER") .build(); return userMapper.insert(user) > 0; } public User login(String username, String rawPassword) { User user = userMapper.selectOne(new QueryWrapper<User>().eq("username", username)); if (user == null) return null; // 4. BCrypt 校验明文密码与数据库哈希值 if (new BCryptPasswordEncoder().matches(rawPassword, user.getPassword())) { return user; } return null; }

关键点：

• BCryptPasswordEncoder自动生成盐值并嵌入哈希结果，每次加密相同密码得到不同字符串
• 数据库password字段类型为VARCHAR(100)，足以容纳 BCrypt 哈希（通常 60 字符）
• 绝对禁止在代码中出现password = MD5(password)或password = password + "salt"等弱加密方式

5.4 预约状态机：从 PENDING 到 COMPLETED 的严谨流转

车位预约不是简单“插入一条记录”，而是有严格状态约束的业务流程。reservation表的status字段定义如下：

后端 Service 中的状态变更方法：

// ReservationService.java @Transactional public boolean cancelReservation(Long id, String operator) { Reservation reservation = reservationMapper.selectById(id); if (reservation == null) return false; // 仅允许 PENDING 或 CONFIRMED 状态取消 if (!Arrays.asList("PENDING", "CONFIRMED").contains(reservation.getStatus())) { throw new BusinessException("当前状态不可取消"); } // 更新状态 reservation.setStatus("CANCELLED"); reservation.setCancelTime(LocalDateTime.now()); reservation.setCancelBy(operator); // 'USER' or 'ADMIN' return reservationMapper.updateById(reservation) > 0; }

前端调用/api/reserve/cancel时，后端自动校验状态合法性，避免脏数据。

6. 性能优化与真机验证技巧：让预约响应快过用户眨眼

6.1 小程序首屏加载加速：分包加载与骨架屏

小程序体积超过 2MB 会触发“首次打开加载慢”警告。本项目通过分包优化：

• 主包 (app.json中subNVue之外)：仅含pages/index/index、pages/login/login、pages/detail/detail等高频页面，体积控制在 1.2MB 内。

• 管理员分包 (subPackages)：

  { "root": "pages/admin", "pages": [ { "path": "index/index", "name": "admin-index" }, { "path": "parking/list", "name": "admin-parking" } ] }

  管理员相关页面被打包到pages/admin目录，用户不进入管理员入口时，该分包不会下载。

• 骨架屏（Skeleton）：在pages/index/index.wxml中，<view wx:if="{{loading}}">下放置灰色块状占位图，模拟列表加载效果：

  <view wx:if="{{loading}}" class="skeleton"> <view class="skeleton-item"></view> <view class="skeleton-item"></view> <view class="skeleton-item"></view> </view>

  对应 WXSS：

  .skeleton-item { height: 120rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

  效果：用户看到流畅的灰色动画，而非白屏等待，心理感知更快。

6.2 Java 后端数据库查询优化：索引与分页实战

reservation表数据量增长后，/api/reserve/history（用户预约历史）接口可能变慢。优化措施：

1. 添加复合索引：

   -- 按用户ID + 状态 + 创建时间查询 ALTER TABLE reservation ADD INDEX idx_user_status_create (user_id, status, create_time);

2. 后端分页强制限制：

   // ReservationController.java @GetMapping("/history") public Result<IPage<ReservationVO>> getHistory( @RequestParam(defaultValue = "1") Integer current, @RequestParam(defaultValue = "10") Integer size) { // 防止恶意传入 size=10000 if (size > 50) size = 50; Page<Reservation> page = new Page<>(current, size); IPage<ReservationVO> result = reservationService.pageVO(page, getCurrentUserId()); return Result.success(result); }

3. MyBatis-Plus 分页插件配置（config/MybatisPlusConfig.java）：

   @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); // 开启 count 查询优化（避免全表扫描） interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor()); return interceptor; }

6.3 真机调试必做三件事

很多开发者只在模拟器跑通就以为万事大吉，结果真机一测全崩。以下是某导师带学生做社区停车项目X时总结的“真机三查”：

1. 查网络环境：
   真机必须和开发机在同一局域网（如都连 WiFiMyHome），且能ping通开发机 IP。在手机浏览器访问http://192.168.1.100:8080/api/parking/list，确认返回 JSON。若失败，检查开发机防火墙、路由器 AP 隔离设置。

2. 查证书信任：
   若用 HTTPS 域名，真机需手动安装证书（iOS：设置 → 通用 → 关于本机 → 证书信任设置；Android：设置 → 安全 → 加密与凭据 → 从存储设备安装）。微信小程序要求系统级证书信任，仅浏览器信任无效。

3. 查用户行为路径：
   真机上完整走一遍：微信扫码 → 点击“立即预约” → 输入手机号 → 收到短信验证码 → 提交 → 查看“我的预约”。重点观察：

   • 短信验证码是否 60 秒内收到（后端SmsService是否调通第三方短信平台）
   • 提交后是否跳转成功（wx.navigateTo的url参数是否含?id=123）
   • “我的预约”列表是否实时更新（WebSocket 或轮询？本项目用简单轮询，onShow中调loadHistory()）

从那以后我每次交付小程序，都强制自己用三台不同型号真机（iPhone 12、华为 Mate 40、小米 12）各走一遍完整预约流，再导出“Network”日志比对请求耗时。一次发现华为机上wx.login()耗时 3.2 秒（其他机 0.8 秒），追查是华为 HMS Core 未更新导致，及时在文档中标注兼容性说明。希望帮到你。

本文还有配套的精品资源，点击获取