基于 Spring Boot 和 UniApp 实现微信小程序消息通知基于 Spring Boot 和 UniApp 实

基于 Spring Boot 和 UniApp 实现微信小程序消息通知

一、前言

在现代移动应用开发中，消息通知功能是提升用户体验和应用交互性的重要手段。微信小程序提供了丰富的消息推送能力，而 UniApp 作为一款跨平台的前端开发框架，能够方便地与微信小程序集成。本文将详细介绍如何基于 Spring Boot 实现 UniApp 微信小程序的消息通知功能，包括后端服务的搭建、微信小程序的配置以及前端页面的实现。我们将通过一个实际案例，展示如何推送订单状态变更通知。

二、技术栈

后端：Spring Boot
前端：UniApp
消息推送服务：微信小程序订阅消息
开发工具：IntelliJ IDEA、HBuilderX

三、实现步骤

（一）后端服务搭建

创建 Spring Boot 项目
- 使用 Spring Initializr（start.spring.io/）快速生成项目，选择以…
  - Spring Web
  - Lombok（可选，用于简化代码）
- 下载并解压项目，导入到 IntelliJ IDEA 中。

引入微信小程序相关依赖

在 pom.xml 文件中添加微信小程序的 Java SDK 依赖：

<dependency>
    <groupId>com.github.binarywang</groupId>
    <artifactId>weixin-java-miniapp</artifactId>
    <version>4.6.0</version>
</dependency>

配置微信小程序参数

在 application.yml 文件中添加微信小程序的配置信息：

wechat:
  miniapp:
    appid: wxxxxxxxxxxxxxx
    secret: xxxxxxxxxxxxxxxx
    token: xxxxxxxxxxxxxxxx
    aes-key: xxxxxxxxxxxxxxxx

实现微信消息推送服务

创建一个服务类 WxMaService，用于封装微信消息推送的逻辑：

import com.github.binarywang.wxpay.config.WxPayConfig;
import com.github.binarywang.wxpay.service.WxPayService;
import com.github.binarywang.wxpay.service.impl.WxPayServiceImpl;
import com.github.binarywang.weixin.mp.config.WxMpConfigStorage;
import com.github.binarywang.weixin.mp.config.impl.WxMpDefaultConfigImpl;
import com.github.binarywang.weixin.mp.service.WxMpService;
import com.github.binarywang.weixin.mp.service.impl.WxMpServiceImpl;
import com.github.binarywang.weixin.sdk.mp.bean.template.WxMpTemplateMessage;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;

@Service
public class WxMaService {
    @Value("${wechat.miniapp.appid}")
    private String appId;
    @Value("${wechat.miniapp.secret}")
    private String secret;

    public void sendTemplateMessage(String openId, String templateId, String page, String formId, String data) {
        WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
        config.setAppId(appId);
        config.setSecret(secret);

        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(config);

        WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder()
                .toUser(openId)
                .templateId(templateId)
                .page(page)
                .formId(formId)
                .data(data)
                .build();

        try {
            wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

创建消息推送接口

创建一个控制器类 MessageController，提供一个接口用于触发消息推送：

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MessageController {
    @Autowired
    private WxMaService wxMaService;

    @GetMapping("/sendOrderNotification")
    public String sendOrderNotification(@RequestParam String openId, @RequestParam String orderId) {
        String templateId = "YOUR_TEMPLATE_ID"; // 替换为实际的模板ID
        String page = "/pages/orderDetail/orderDetail?orderId=" + orderId;
        String formId = "YOUR_FORM_ID"; // 替换为实际的FormID
        String data = "{\"keyword1\": {\"value\": \"订单号：" + orderId + "\"}, \"keyword2\": {\"value\": \"订单状态：已发货\"}}";

        wxMaService.sendTemplateMessage(openId, templateId, page, formId, data);
        return "消息已发送";
    }
}

（二）前端页面开发

创建 UniApp 项目
- 使用 HBuilderX 创建一个新的 UniApp 项目，选择微信小程序模板。

实现订阅消息功能

在页面中添加一个按钮，用于触发订阅消息：

<template>
    <view class="container">
        <button @click="subscribeMessage">订阅消息</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            openId: null,
        };
    },
    methods: {
        async subscribeMessage() {
            const templateIds = [
                "YOUR_TEMPLATE_ID", // 替换为实际的模板ID
            ];

            const res = await uni.requestSubscribeMessage({
                tmplIds: templateIds,
                success: (res) => {
                    console.log("订阅成功", res);
                    if (res[templateIds[0]] === "accept") {
                        uni.showToast({
                            title: "订阅成功",
                            icon: "success",
                            duration: 2000,
                        });
                    } else {
                        uni.showToast({
                            title: "您已拒绝订阅",
                            icon: "none",
                            duration: 2000,
                        });
                    }
                },
                fail: (err) => {
                    console.error("订阅失败", err);
                    uni.showToast({
                        title: "订阅失败",
                        icon: "none",
                        duration: 2000,
                    });
                },
            });
        },
    },
};
</script>

<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
button {
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #1aad19;
    color: white;
    font-size: 16px;
    border-radius: 5px;
}
</style>

获取用户 openId

在页面中添加一个方法用于获取 openId：

<script>
export default {
    data() {
        return {
            openId: null,
        };
    },
    methods: {
        async getOpenId() {
            const res = await uni.login();
            const code = res.code;

            // 调用后端接口，通过code换取openId
            uni.request({
                url: "http://your-backend-server/getOpenId", // 替换为实际的后端接口
                method: "POST",
                data: {
                    code: code,
                },
                success: (res) => {
                    if (res.data.success) {
                        this.openId = res.data.openId;
                        uni.showToast({
                            title: "获取openId成功",
                            icon: "success",
                            duration: 2000,
                        });
                    } else {
                        uni.showToast({
                            title: "获取openId失败",
                            icon: "none",
                            duration: 2000,
                        });
                    }
                },
                fail: (err) => {
                    console.error("获取openId失败", err);
                    uni.showToast({
                        title: "获取openId失败",
                        icon: "none",
                        duration: 2000,
                    });
                },
            });
        },
    },
};
</script>

后端接口用于通过 code 换取 openId

在后端创建一个接口用于通过 code 换取 openId：

import com.github.binarywang.weixin.mp.api.WxMpService;
import com.github.binarywang.weixin.mp.api.impl.WxMpServiceImpl;
import com.github.binarywang.weixin.mp.config.WxMpDefaultConfigImpl;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
public class OpenIdController {
    @PostMapping("/getOpenId")
    public Map<String, Object> getOpenId(@RequestBody Map<String, String> requestBody) {
        String code = requestBody.get("code");

        WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
        config.setAppId("YOUR_APP_ID");
        config.setSecret("YOUR_APP_SECRET");

        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(config);

        try {
            String openId = wxMpService.getUserService().getOpenId(code);
            return Map.of("success", true, "openId", openId);
        } catch (Exception e) {
            e.printStackTrace();
            return Map.of("success", false, "message", "获取openId失败");
        }
    }
}

四、完整代码示例

后端代码

// WxMaService.java
import com.github.binarywang.weixin.mp.api.WxMpService;
import com.github.binarywang.weixin.mp.api.impl.WxMpServiceImpl;
import com.github.binarywang.weixin.mp.config.WxMpDefaultConfigImpl;
import com.github.binarywang.weixin.mp.bean.template.WxMpTemplateMessage;
import org.springframework.stereotype.Service;

@Service
public class WxMaService {
    private final String appId = "YOUR_APP_ID";
    private final String secret = "YOUR_APP_SECRET";

    public void sendTemplateMessage(String openId, String templateId, String page, String formId, String data) {
        WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
        config.setAppId(appId);
        config.setSecret(secret);

        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(config);

        WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder()
                .toUser(openId)
                .templateId(templateId)
                .page(page)
                .formId(formId)
                .data(data)
                .build();

        try {
            wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

// MessageController.java
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class MessageController {
    @Autowired
    private WxMaService wxMaService;

    @GetMapping("/sendOrderNotification")
    public String sendOrderNotification(@RequestParam String openId, @RequestParam String orderId) {
        String templateId = "YOUR_TEMPLATE_ID";
        String page = "/pages/orderDetail/orderDetail?orderId=" + orderId;
        String formId = "YOUR_FORM_ID";
        String data = "{\"keyword1\": {\"value\": \"订单号：" + orderId + "\"}, \"keyword2\": {\"value\": \"订单状态：已发货\"}}";

        wxMaService.sendTemplateMessage(openId, templateId, page, formId, data);
        return "消息已发送";
    }
}

// OpenIdController.java
import com.github.binarywang.weixin.mp.api.WxMpService;
import com.github.binarywang.weixin.mp.api.impl.WxMpServiceImpl;
import com.github.binarywang.weixin.mp.config.WxMpDefaultConfigImpl;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind
```java
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
public class OpenIdController {
    @PostMapping("/getOpenId")
    public Map<String, Object> getOpenId(@RequestBody Map<String, String> requestBody) {
        String code = requestBody.get("code");

        WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
        config.setAppId("YOUR_APP_ID");
        config.setSecret("YOUR_APP_SECRET");

        WxMpService wxMpService = new WxMpServiceImpl();
        wxMpService.setWxMpConfigStorage(config);

        try {
            String openId = wxMpService.getUserService().getOpenId(code);
            return Map.of("success", true, "openId", openId);
        } catch (Exception e) {
            e.printStackTrace();
            return Map.of("success", false, "message", "获取openId失败");
        }
    }
}

前端代码

<template>
  <view class="container">
    <button @click="subscribeMessage">订阅消息</button>
    <button @click="getOpenId">获取openId</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      openId: null,
    };
  },
  methods: {
    async subscribeMessage() {
      const templateIds = [
        "YOUR_TEMPLATE_ID", // 替换为实际的模板ID
      ];

      const res = await uni.requestSubscribeMessage({
        tmplIds: templateIds,
        success: (res) => {
          console.log("订阅成功", res);
          if (res[templateIds[0]] === "accept") {
            uni.showToast({
              title: "订阅成功",
              icon: "success",
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: "您已拒绝订阅",
              icon: "none",
              duration: 2000,
            });
          }
        },
        fail: (err) => {
          console.error("订阅失败", err);
          uni.showToast({
            title: "订阅失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    async getOpenId() {
      const res = await uni.login();
      const code = res.code;

      // 调用后端接口，通过code换取openId
      uni.request({
        url: "http://your-backend-server/getOpenId", // 替换为实际的后端接口
        method: "POST",
        data: {
          code: code,
        },
        success: (res) => {
          if (res.data.success) {
            this.openId = res.data.openId;
            uni.showToast({
              title: "获取openId成功",
              icon: "success",
              duration: 2000,
            });
          } else {
            uni.showToast({
              title: "获取openId失败",
              icon: "none",
              duration: 2000,
            });
          }
        },
        fail: (err) => {
          console.error("获取openId失败", err);
          uni.showToast({
            title: "获取openId失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
button {
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: #1aad19;
  color: white;
  font-size: 16px;
  border-radius: 5px;
  margin: 10px 0;
}
</style>

五、完整流程整合

1. 用户订阅消息

用户进入小程序页面，点击“订阅消息”按钮。
调用 uni.requestSubscribeMessage 方法，请求用户订阅消息。
如果用户同意订阅，将模板ID存储到本地或后端。

2. 获取用户 `openId`

用户进入小程序页面时，自动调用 uni.login 获取 code。
将 code 发送到后端，后端通过微信API换取 openId。
将 openId 存储到本地或后端。

3. 后端触发消息推送

当需要推送消息时，后端调用 WxMaService.sendTemplateMessage 方法。
指定 openId、模板ID、页面路径、表单ID和消息内容。
微信小程序收到消息后，用户点击消息即可跳转到指定页面。

六、注意事项

1. 模板消息限制

微信模板消息有严格的使用限制，例如每天只能发送一定数量的消息。
模板消息的内容需要符合微信的要求，不能包含广告或营销信息。

2. 表单ID获取

表单ID是通过用户在小程序中提交表单时获取的。
每个表单ID只能使用一次，使用后需要重新获取。

3. 安全性

在后端处理微信消息推送时，需要验证用户的身份，确保消息推送给正确的用户。
对于敏感信息，如 openId 和 formId，需要进行加密存储和传输。

七、总结

本文详细介绍了如何基于 Spring Boot 和 UniApp 实现微信小程序的消息通知功能。通过后端服务的搭建、微信小程序的配置以及前端页面的实现，我们成功实现了一个完整的消息推送流程。在实际开发中，可以根据业务需求进一步扩展和优化代码，例如增加消息推送的重试机制、优化用户体验等。希望本文对大家有所帮助！

八、扩展功能

1. 消息推送重试机制

在实际业务中，可能会遇到消息推送失败的情况。可以通过以下方式实现消息推送的重试机制：

在 WxMaService 中增加重试逻辑：

public void sendTemplateMessage(String openId, String templateId, String page, String formId, String data) {
    WxMpDefaultConfigImpl config = new WxMpDefaultConfigImpl();
    config.setAppId(appId);
    config.setSecret(secret);

    WxMpService wxMpService = new WxMpServiceImpl();
    wxMpService.setWxMpConfigStorage(config);

    WxMpTemplateMessage templateMessage = WxMpTemplateMessage.builder()
            .toUser(openId)
            .templateId(templateId)
            .page(page)
            .formId(formId)
            .data(data)
            .build();

    int retryCount = 3; // 重试次数
    for (int i = 0; i < retryCount; i++) {
        try {
            wxMpService.getTemplateMsgService().sendTemplateMsg(templateMessage);
            break; // 发送成功，退出循环
        } catch (Exception e) {
            e.printStackTrace();
            if (i == retryCount - 1) {
                throw new RuntimeException("消息推送失败，重试次数已达上限");
            }
        }
    }
}

2. 用户订阅状态管理

可以将用户的订阅状态存储到数据库中，以便在需要时查询用户是否已订阅相关消息：

创建一个用户订阅状态表：

CREATE TABLE user_subscription (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    open_id VARCHAR(255) NOT NULL,
    template_id VARCHAR(255) NOT NULL,
    subscribed BOOLEAN DEFAULT FALSE,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

在后端更新用户订阅状态：

@PostMapping("/updateSubscription")
public Map<String, Object> updateSubscription(@RequestBody Map<String, String> requestBody) {
    String openId = requestBody.get("openId");
    String templateId = requestBody.get("templateId");
    boolean subscribed = requestBody.get("subscribed").equals("true");

    // 更新数据库中的订阅状态
    // 示例代码，具体实现根据实际数据库操作框架
    userSubscriptionService.updateSubscription(openId, templateId, subscribed);

    return Map.of("success", true);
}

3. 消息内容动态生成

在实际业务中，消息内容可能需要根据业务逻辑动态生成。可以通过模板引擎（如 Thymeleaf 或 Velocity）来实现消息内容的动态生成：

创建一个模板文件 messageTemplate.html：

<div>
    <p>尊敬的用户，您的订单 {{orderId}} 已发货。</p>
    <p>发货时间：{{shipTime}}</p>
</div>

在后端生成消息内容：

import org.thymeleaf.TemplateEngine;
import org.thymeleaf.context.Context;
import org.thymeleaf.spring5.SpringTemplateEngine;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class MessageContentService {
    @Autowired
    private SpringTemplateEngine templateEngine;

    public String generateMessageContent(String orderId, String shipTime) {
        Context context = new Context();
        context.setVariable("orderId", orderId);
        context.setVariable("shipTime", shipTime);

        return templateEngine.process("messageTemplate", context);
    }
}

九、常见问题及解决方案

1. 消息推送失败

原因：可能是 openId 或 formId 错误，或者模板消息内容不符合微信要求。
解决方案：
- 确保 openId 和 formId 是正确的。
- 检查模板消息内容是否符合微信的要求，避免包含敏感词汇或广告内容。
- 检查微信小程序的后台配置是否正确。

2. 用户拒绝订阅消息

原因：用户可能不希望接收消息，或者对消息内容不感兴趣。
解决方案：
- 提供清晰的订阅提示，让用户了解订阅消息的用途和好处。
- 确保消息内容有价值，避免发送无关紧要的信息。
- 提供用户取消订阅的选项，提升用户体验。

3. 表单ID不足

原因：表单ID是通过用户提交表单时获取的，如果用户长时间不提交表单，可能会导致表单ID不足。
解决方案：
- 在用户提交表单时，及时获取并存储表单ID。
- 如果表单ID不足，可以提示用户重新提交表单以获取新的表单ID。
- 合理规划表单ID的使用，避免频繁发送消息。

十、总结与展望

通过本文的介绍，我们已经完整地实现了基于 Spring Boot 和 UniApp 的微信小程序消息通知功能。从后端服务的搭建到前端页面的实现，再到消息推送的完整流程，我们详细展示了每一步的操作步骤和代码示例。在实际开发中，可以根据业务需求进一步扩展和优化代码，例如增加消息推送的重试机制、优化用户体验等。

未来，随着微信小程序功能的不断更新和优化，消息通知功能也将有更多的扩展可能性。例如，结合微信支付、微信客服消息等功能，可以进一步提升小程序的用户体验和业务价值。希望本文能够为开发者提供有价值的参考，帮助大家更好地实现微信小程序的消息通知功能。

如果你有任何问题或建议，欢迎在评论区留言，我会及时回复！

基于 Spring Boot 和 UniApp 实现微信小程序消息通知