Java如何开发微信小程序？-杰瑞科技汇

技术栈概览
环境准备
第一部分：Java后端开发
- 1 创建Spring Boot项目
- 2 添加依赖
- 3 编写Controller（接口）
- 4 编写Service（业务逻辑）
- 5 配置CORS（跨域）
- 6 启动并测试后端
第二部分：微信小程序开发
- 1 注册与配置小程序
- 2 使用微信开发者工具
- 3 获取小程序AppID
- 4 配置服务器域名
- 5 创建小程序项目
- 6 前端页面布局
- 7 编写前端逻辑（调用Java后端接口）
完整代码示例
常见问题与解决方案
进阶学习路径

技术栈概览

后端:
- Java: 编程语言。
- Spring Boot: 简化Spring应用初始搭建以及开发过程，我们用它来快速创建Web API。
- Maven/Gradle: 项目管理和构建工具。
- Lombok: 简化JavaBean的编写（可选，但强烈推荐）。
前端:
- 微信开发者工具: 官方IDE，用于小程序的开发、调试和预览。
- WXML: 类似HTML的标记语言,用于描述页面结构。
- WXSS: 类似CSS的样式语言,用于描述页面样式。
- JavaScript: 用于处理逻辑、数据交互和页面渲染。
核心交互:
- HTTP/HTTPS: 小程序与后端通信的协议。
- JSON: 数据交换格式。
- 微信登录流程: 使用微信提供的登录能力获取用户唯一标识。

环境准备

在开始之前,请确保你已经安装并配置好以下环境：

（图片来源网络，侵删）

JDK 8 或更高版本: 下载地址
Maven: 下载地址 (或使用IDE内置的Maven)
IntelliJ IDEA 或 Eclipse: 强烈推荐使用IntelliJ IDEA Community Edition (免费版)。
微信开发者工具: 下载地址
微信账号: 用于注册小程序。

第一部分：Java后端开发

我们将创建一个简单的后端服务,提供两个接口：

/api/login: 用于接收小程序发送的code,并返回一个模拟的用户信息。
/api/user/info: 用于根据用户ID获取用户信息。

1 创建Spring Boot项目

最简单的方式是使用 Spring Initializr (start.spring.io)。

访问 start.spring.io。
填写项目信息：
- Project: Maven
- Language: Java
- Spring Boot: 选择一个稳定版本（如 2.7.x 或 3.x.x）
- Project Metadata:
  - Group: com.example
  - Artifact: wechat-miniprogram-backend
  - Name: wechat-miniprogram-backend
  - Packaging: Jar
  - Java: 8 或更高
添加依赖：
- Spring Web: 用于创建Web应用和RESTful API。
- Lombok: 简化代码。
点击 "GENERATE" 下载项目压缩包,并用IDE打开。

2 添加依赖

确保你的 pom.xml 文件中包含了 Spring Web 和 Lombok 依赖。

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
    </dependency>
</dependencies>

3 编写Controller

创建一个包 com.example.wechatminiprogrambackend.controller，并在其中创建 UserController.java。

（图片来源网络，侵删）

package com.example.wechatminiprogrambackend.controller;
import com.example.wechatminiprogrambackend.entity.UserInfo;
import com.example.wechatminiprogrambackend.service.UserService;
import lombok.RequiredArgsConstructor;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/api")
@RequiredArgsConstructor // Lombok: 自动生成全参构造函数
public class UserController {
    private final UserService userService;
    // 模拟登录接口，接收小程序的code，返回用户信息
    @PostMapping("/login")
    public ResponseEntity<UserInfo> login(@RequestBody LoginRequest request) {
        // 在实际应用中，这里需要用code去微信服务器换取openid和session_key
        // 然后进行用户信息校验、创建或更新用户记录
        // 此处我们简化流程，直接返回一个模拟的用户
        UserInfo userInfo = userService.handleLogin(request.getCode());
        return ResponseEntity.ok(userInfo);
    }
    // 获取用户信息接口
    @GetMapping("/user/info/{userId}")
    public ResponseEntity<UserInfo> getUserInfo(@PathVariable String userId) {
        UserInfo userInfo = userService.getUserInfo(userId);
        if (userInfo != null) {
            return ResponseEntity.ok(userInfo);
        }
        return ResponseEntity.notFound().build();
    }
}
// 用于接收前端JSON数据的请求体
class LoginRequest {
    private String code;
    // Getter and Setter (可以用Lombok的@Data自动生成)
    public String getCode() {
        return code;
    }
    public void setCode(String code) {
        this.code = code;
    }
}

4 编写Service

创建一个包 com.example.wechatminiprogrambackend.service，并在其中创建 UserService.java。

package com.example.wechatminiprogrambackend.service;
import com.example.wechatminiprogrambackend.entity.UserInfo;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.Map;
@Service
public class UserService {
    // 模拟一个数据库存储
    private final Map<String, UserInfo> userDatabase = new HashMap<>();
    public UserInfo handleLogin(String code) {
        // 模拟根据code处理登录逻辑
        // 真实场景：code -> 微信服务器 -> openid, session_key
        // openid是用户的唯一标识，可以用作userId
        String userId = "user_from_code_" + code.hashCode();
        // 如果用户不存在，则创建一个
        if (!userDatabase.containsKey(userId)) {
            UserInfo newUser = new UserInfo(userId, "新用户", "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0");
            userDatabase.put(userId, newUser);
        }
        return userDatabase.get(userId);
    }
    public UserInfo getUserInfo(String userId) {
        return userDatabase.get(userId);
    }
}

5 配置CORS（跨域）

微信小程序的请求会携带域名，必须确保后端允许来自你的小程序域名的请求，在Spring Boot中,我们可以通过一个简单的配置类来实现。

创建 com.example.wechatminiprogrambackend.config 包，并创建 WebConfig.java。

package com.example.wechatminiprogrambackend.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 允许所有来源的请求，但生产环境应该指定具体的小程序域名
        registry.addMapping("/**")
                .allowedOrigins("http://127.0.0.1:5500") // 小程序本地调试的常见端口
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}

注意: allowedOrigins 的值需要配置为你小程序上线后的域名，在开发阶段，可以先用本地地址，或者配置为（不推荐用于生产环境）。

（图片来源网络，侵删）

6 启动并测试后端

运行 WechatMiniprogramBackendApplication.java 中的 main 方法。
后端服务默认会在 8080 端口启动。
使用工具（如 Postman 或浏览器插件 Advanced REST Client）测试接口：
- 测试 /api/login:
  - URL: http://localhost:8080/api/login
  - Method: POST
  - Body (raw, JSON): {"code": "test_code_123"}
  - 预期响应: {"id":"user_from_code_...","nickname":"新用户","avatarUrl":"..."}

第二部分：微信小程序开发

1 注册与配置小程序

访问微信公众平台，注册一个小程序账号（选择“个人”即可）。
登录后，在“开发” -> “开发管理” -> “开发设置”中找到 AppID(小程序ID),将其复制下来。

2 使用微信开发者工具

下载并安装微信开发者工具。
使用微信扫码登录。

3 获取小程序AppID

在微信开发者工具中，点击右上角“详情” -> “本地设置”，确保“不校验合法域名...”选项是勾选状态，这只是为了本地开发方便,上线前必须在微信公众平台配置合法域名。

4 配置服务器域名

在微信公众平台，进入“开发” -> “开发管理” -> “开发设置”，找到“服务器域名”。将你的 Java后端服务器地址（http://your-server-ip:8080）添加到 request合法域名 列表中。注意: 域名必须支持 HTTPS，在本地开发时，可以暂时使用勾选“不校验合法域名”来绕过。

5 创建小程序项目

在微信开发者工具中，点击“+”号创建新项目。
选择“小程序”,填写项目名称。
选择一个目录作为项目存放路径。
AppID 填写你在上一步获取的AppID。
点击“创建”。

6 前端页面布局

修改 pages/index/index.wxml 文件,设计一个简单的登录和展示页面。

<!-- pages/index/index.wxml -->
<view class="container">
  <block wx:if="{{!isLoggedIn}}">
    <button bindtap="handleLogin" type="primary">微信登录</button>
  </block>
  <block wx:else>
    <image class="avatar" src="{{userInfo.avatarUrl}}" mode="aspectFill"></image>
    <text class="nickname">{{userInfo.nickname}}</text>
    <button bindtap="getUserInfo" type="default">刷新用户信息</button>
    <button bindtap="handleLogout" type="warn">退出登录</button>
  </block>
</view>

修改 pages/index/index.wxss 文件,添加一些样式。

/* pages/index/index.wxss */
.container {
  padding: 20px;
  text-align: center;
}
.avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  margin: 20px auto;
  display: block;
}
.nickname {
  display: block;
  font-size: 18px;
  margin: 10px auto;
}

7 编写前端逻辑（调用Java后端接口）

这是最关键的一步，修改 pages/index/index.js 文件。

// pages/index/index.js
Page({
  data: {
    isLoggedIn: false,
    userInfo: null,
    // 后端服务地址，根据你的实际情况修改
    apiBaseUrl: 'http://localhost:8080/api'
  },
  onLoad: function (options) {
    // 检查本地是否有登录态
    const userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({ isLoggedIn: true, userInfo: userInfo });
    }
  },
  // 1. 微信登录
  handleLogin: function() {
    wx.showLoading({ title: '登录中...' });
    // 调用微信登录API
    wx.login({
      success: (res) => {
        if (res.code) {
          // 2. 将code发送到我们的Java后端
          this.sendCodeToBackend(res.code);
        } else {
          wx.hideLoading();
          wx.showToast({ title: '登录失败', icon: 'error' });
          console.error('wx.login failed: ' + res.errMsg);
        }
      },
      fail: (err) => {
        wx.hideLoading();
        wx.showToast({ title: '登录失败', icon: 'error' });
        console.error(err);
      }
    });
  },
  // 3. 发送code到后端
  sendCodeToBackend: function(code) {
    wx.request({
      url: this.data.apiBaseUrl + '/login',
      method: 'POST',
      data: {
        code: code
      },
      success: (res) => {
        if (res.statusCode === 200 && res.data) {
          // 4. 登录成功，保存用户信息
          this.setData({ 
            isLoggedIn: true, 
            userInfo: res.data 
          });
          // 将用户信息存入本地存储，作为登录态
          wx.setStorageSync('userInfo', res.data);
          wx.showToast({ title: '登录成功', icon: 'success' });
        } else {
          wx.showToast({ title: '后端登录失败', icon: 'error' });
        }
      },
      fail: (err) => {
        wx.showToast({ title: '网络请求失败', icon: 'error' });
        console.error(err);
      },
      complete: () => {
        wx.hideLoading();
      }
    });
  },
  // 获取用户信息（示例）
  getUserInfo: function() {
    if (!this.data.userInfo || !this.data.userInfo.id) {
      wx.showToast({ title: '请先登录', icon: 'none' });
      return;
    }
    wx.showLoading({ title: '加载中...' });
    wx.request({
      url: `${this.data.apiBaseUrl}/user/info/${this.data.userInfo.id}`,
      method: 'GET',
      success: (res) => {
        if (res.statusCode === 200) {
          this.setData({ userInfo: res.data });
          wx.showToast({ title: '信息已更新', icon: 'success' });
        } else {
          wx.showToast({ title: '获取信息失败', icon: 'error' });
        }
      },
      fail: (err) => {
        wx.showToast({ title: '网络请求失败', icon: 'error' });
        console.error(err);
      },
      complete: () => {
        wx.hideLoading();
      }
    });
  },
  // 退出登录
  handleLogout: function() {
    this.setData({ isLoggedIn: false, userInfo: null });
    wx.removeStorageSync('userInfo');
    wx.showToast({ title: '已退出登录', icon: 'success' });
  }
});

完整代码示例

Java后端: GitHub Gist 链接 (你可以将上述Java代码整理成一个可运行的Spring Boot项目)
小程序前端: 上述 pages/index 目录下的 .wxml, .wxss, .js 文件就是核心代码。

常见问题与解决方案

问题: request:fail url not in domain list
- 原因: 小程序请求的域名没有在微信公众平台配置为合法域名。
- 解决:
  - 本地开发: 在微信开发者工具中勾选“详情” -> “本地设置” -> “不校验合法域名...”。
  - 线上部署: 登录微信公众平台，在“开发设置”中添加你的后端域名（必须为HTTPS）。
问题: CORS 跨域错误
- 原因: 后端服务器没有配置允许来自小程序域名的请求。
- 解决: 检查后端的 WebConfig 配置，确保 allowedOrigins 包含了小程序的请求域名。
问题: wx.login 返回的 code 为空
- 原因: 网络问题或用户未授权。
- 解决: 检查网络，并确保在 app.json 中已声明 permission (如果需要特定权限)。
问题: 后端收不到请求或返回500错误
- 原因: 后端服务未启动、端口错误、代码有bug。
- 解决: 检查后端控制台日志，确认服务正常运行，使用Postman等工具直接测试后端接口,排查问题。

进阶学习路径

当你掌握了基础的开发流程后,可以继续深入学习：

后端进阶:
- 数据库集成: 使用MySQL、PostgreSQL等数据库存储用户数据。
- MyBatis/JPA: 学习使用持久层框架,告别手动操作Map。
- JWT (JSON Web Tokens): 实现更安全、无状态的认证授权机制。
- Spring Security: 为你的应用提供全面的安全保护。
- 部署: 将后端服务部署到云服务器（如阿里云、腾讯云）上,并配置Nginx反向代理和HTTPS。
小程序进阶:
- 组件化开发: 将可复用的UI封装成自定义组件。
- API深入: 使用更多微信原生API，如支付、订阅消息、模板消息等。
- 云开发: 利用微信提供的云数据库、云函数等后端服务,实现全栈小程序。
- 性能优化: 学习分包加载、图片优化等技巧,提升小程序性能和加载速度。

希望这份详细的教程能帮助你顺利开启 Java + 微信小程序的开发之旅！祝你编码愉快！

Java如何开发微信小程序？

目录

技术栈概览

环境准备

第一部分：Java后端开发

1 创建Spring Boot项目

2 添加依赖

3 编写Controller

4 编写Service

5 配置CORS（跨域）

6 启动并测试后端

第二部分：微信小程序开发

1 注册与配置小程序

2 使用微信开发者工具

3 获取小程序AppID

4 配置服务器域名

5 创建小程序项目

6 前端页面布局

7 编写前端逻辑（调用Java后端接口）

完整代码示例

常见问题与解决方案

进阶学习路径

99ANYc3cd6

SciFinder怎么用？新手入门教程？

java button大小设置

PS新手怎么快速上手？简单教程有哪些？

Winform界面设计如何快速入门？

Excel 2003教程哪里能下载？

Java Socket编程实例具体怎么实现？

Python 模式设计有哪些常见类型？

如何在Python中使用ECharts？

Java字符串replace方法如何正确替换字符？

佳能100D怎么用？新手必看教程指南。

java核心技术卷2 高级特性

Java中字符串equals方法怎么用？

Java如何实现PDF转Word代码？

Apache WSGI与Python如何高效部署？

bytearray python

海康威视硬盘录像机怎么安装？

Java如何开发微信小程序？

目录

技术栈概览

环境准备

第一部分：Java后端开发

1 创建Spring Boot项目

2 添加依赖

3 编写Controller

4 编写Service

5 配置CORS（跨域）

6 启动并测试后端

第二部分：微信小程序开发

1 注册与配置小程序

2 使用微信开发者工具

3 获取小程序AppID

4 配置服务器域名

5 创建小程序项目

6 前端页面布局

7 编写前端逻辑（调用Java后端接口）

完整代码示例

常见问题与解决方案

进阶学习路径

相关推荐

Java Socket编程实例具体怎么实现？