1.引言

注意：

1.标题中的服务端是自己研发的服务端，不是腾讯公司的服务端。

2.小程序的模板消息分为一次性订阅消息与长期订阅，一次性订阅就是每次在给用户发送消息之前都需要获得用户的同意（即用户订阅），长期性订阅是只需要用户同意一次，长期性订阅需要的小程序的分类为腾讯规定的服务种类（金融，公共服务，政务服务等），要求比较严格。本文所描述的为长期性订阅服务，默认用户已经订阅了此模板消息的通知。

3.此服务通知是代替短信的功能，是一个消息通知的形式，发短信是需要钱的，而服务通知不需要。

说说本篇文章诞生的业务环境，会议室预定系统，包含服务端，技术栈主要为Spring Boot+Spring Security+Spring AlibabaCloud+Nacos+MyBatis Plus+MySql；Web端，技术栈使用Vue3+Element UI；移动端，技术栈为uni-app+ts，用户通过用户名密码在Web端或者移动端登录进入系统后，进入会议室预定界面，填写会议室预定所需信息，保存后提交到服务端，服务端验证信息通过后，通过微信小程序的模板消息，调用腾讯开放的服务接口，通知对应的人员。

给对应人员发送服务通知，必须知道此人员在小程序中的唯一身份标识，如果是在小程序中，可以通过微信的wx.pluginLogin接口获取，如果在Web端中，如何通知了？

因为用户的openId在小程序中是唯一不变的，所以我们可以在用户使用小程序端输入用户名密码调用服务端登录接口时，获取其openId，并存储到用户信息表中，那么理论上就可以给系统中的任何用户发送模板消息的通知。所以，要给用户发送此订阅消息，用户必须登录过小程序，否则不能实现。

2.获取用户的openId并存储

在小程序中，通过wx.login获取code，此code连同用户名密码一起传递到服务端，服务端验证用户名密码后，调用小程序登录接口，拿到返回的openId并存储。

2.1 小程序端登录

小程序端登录先获取code，然后调用后端的登录接口。代码中区分了H5与小程序，H5是不需要调用腾讯的wx.login的。

1.小程序端关键代码
// 登录系统的form
const loginForm = reactive<WXProgramLoginReqVO>({
  username: '',
  password: '',
  clientId: import.meta.env.VITE_CLIENT_ID,
  code: '',
})

const formRef = ref() // 表单
// 登录系统 一进系统就需要登录
const handleLogin = async () => {
  // #ifdef MP-WEIXIN
  const res = await wx.login()
  console.log(res.code)
  loginForm.code = res.code
  // #endif
  // 校验表单
  formRef.value
    .validate()
    .then(async () => {
      let loginRes = {
        accessToken: '',
        refreshToken: '',
      }
      // #ifdef H5
      loginRes = await loginApi.login(loginForm)
      // #endif
      // #ifdef MP-WEIXIN
      loginRes = await loginApi.wxProgramLogin(loginForm)
      // #endif
      setAccessToken(loginRes.accessToken)
      setRefreshToken(loginRes.refreshToken)
      // 设置用户信息
      const userInfoRes = await permissionApi.getUserPermissionInfo()
      userStore.setUserInfo(userInfoRes)

      // 设置字典信息
      dictStore.setDictMap()
      // 直接跳转到首页
      uni.switchTab({ url: '/pages/index/index' })
    })
    .catch((err) => {
      console.log('登录表单错误信息：', err)
    })
}
/** 用户登录 h5 */
export const login = (data: LoginReqVO) => {
  return http.post({ url: '/auth/login', data })
}

/** 用户登录 微信小程序 携带一个微信登录时返回的code */
export const wxProgramLogin = (data: WXProgramLoginReqVO) => {
  return http.post({ url: '/auth/wx-program/login', data })
}

代码中，H5与小程序端调用的登录接口为两个，其实可以简化为一个接口，后端通过有没有code的值来判断是不是需要调用腾讯的登录接口。

2.服务端关键代码

服务端接受到请求后，首先验证用户名密码是否正确，验证通过后，调用腾讯的小程序登录接口，获取对应的openId,并存储。

public LoginRespVO wxLogin(WXProgramLoginReqVO reqVO) {
        // 验证用户名密码
        UserResponseDTO user = authenticate(reqVO.getUsername(), reqVO.getPassword());
        if (user.getOpenId() == null){
            // 说明是第一次登录 需要更新其openId
            // 登录微信 获取 openid
            WxProgramLoginResDTO res = wxApi.wxProgramLogin(reqVO.getCode()).getCheckedData();
            String openId = res.getOpenid();
            // 更新用户的openId
            userApi.updateUserOpenId(reqVO.getUsername(), openId);
        }
        //创建token
        return createTokenAfterLoginSuccess(user.getId(), user.getNickname(),
                reqVO.getUsername(),  reqVO.getClientId(), LoginLogTypeEnum.LOGIN_USERNAME);
    }



    private UserResponseDTO authenticate(String adminName, String password) {
        // 校验账号是否存在
        UserResponseDTO user = userApi.getUserByLoginInfo(adminName, password).getCheckedData();
        if (user == null) {
            throw exception(AUTH_LOGIN_BAD_CREDENTIALS);
        }
        return user;
    }
public WxProgramLoginResDTO wxProgramLogin(String code) {
        WxProgramLoginResVO wxProgramLoginRes = wxProgramWebClient.loginByCode(code).getCheckedData();
        WxProgramLoginResDTO dto = new WxProgramLoginResDTO();
        dto.setOpenid(wxProgramLoginRes.getOpenid());
        return dto;
    }
public BaseResponse<WxProgramLoginResVO> loginByCode(String code){
        String res = webClient.buildWebClient()
                .get()
                .uri(wxProgramIdentityProperties.getUrl() + "/sns/jscode2session"
                        + "?grant_type=authorization_code"
                        + "&appid=" + wxProgramIdentityProperties.getAppId()
                        + "&secret=" + wxProgramIdentityProperties.getSecret()
                        + "&js_code=" + code)
                .header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE)
                .exchangeToMono(response -> response.bodyToMono(String.class))
                .block();
        BaseResponse<WxProgramLoginResVO> stringBaseResponse = parseResponse(res, WxProgramLoginResVO.class);
        if (stringBaseResponse.isError()){
            log.error("登录失败：{}", stringBaseResponse.getMessage());
        }
        return stringBaseResponse;
    }

3.获取接口调用凭据

获取小程序全局唯一后台接口调用凭据，token有效期为7200s。在调用一切小程序端接口时，都需要使用此凭据，此凭据两小时之内都有效，两小时后需要重新申请。

暂时想法为，接口调用时，获取access_token，获取后判断是否过期，如果过期，重新申请access_token，并更新存储，返回最新的获取access_token。

public AccessTokenDO getAccessToken() {
        AccessTokenDO accessTokenDO = accessTokenService.getAccessTokenByCode(TOKEN_CODE);
        if (accessTokenDO == null){
            // 第一次 需要创建
            accessTokenDO = createToken();
        }
        // 判断accessToken是否过期 如果过期 需要更新
        if (DateUtils.isExpired(accessTokenDO.getExpireTime())) {
            WxProgramGetAccessTokenResVO accessTokenRes = wxProgramWebClient.getAccessToken().getCheckedData();
            accessTokenDO.setValue(accessTokenRes.getAccess_token());
            // 提前5分钟过期 然后刷新token
            accessTokenDO.setExpireTime(LocalDateTime.now().plusSeconds(Integer.parseInt(accessTokenRes.getExpires_in()) - 300));
        }
        // 更新
        updateToken(accessTokenDO);
        return accessTokenDO;
    }
public BaseResponse<WxProgramGetAccessTokenResVO> getAccessToken(){
        String res = webClient.buildWebClient()
                .get()
                .uri(wxProgramIdentityProperties.getUrl() + "/cgi-bin/token"
                        + "?grant_type=client_credential"
                        + "&appid=" + wxProgramIdentityProperties.getAppId()
                        + "&secret=" + wxProgramIdentityProperties.getSecret())
                .header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE)
                .exchangeToMono(response -> response.bodyToMono(String.class))
                .block();
        BaseResponse<WxProgramGetAccessTokenResVO> stringBaseResponse = parseResponse(res, WxProgramGetAccessTokenResVO.class);
        if (stringBaseResponse.isError()){
            log.error("获取token失败：{}", stringBaseResponse.getMessage());
        }
        return stringBaseResponse;
    }

4.发送订阅模板消息

首先在小程序基础功能中的订阅消息中申请一个模板，获取此模板的ID以及模板的详细内容。

根据模板内容，调用发送订阅消息接口，把对应的参数以及内容的body传递过去。

public void sendBookingMeetingMsg(WxSendBookingMeetingMsgReqDTO meetingMsgReqDTO) {
        WxProgramSendTemplateMsgReqVO reqVO = new WxProgramSendTemplateMsgReqVO();
        MessageTemplateDO messageTemplate = messageTemplateService.getMessageTemplateByCode(OFFICE_TEMPLATE_CODE);
        reqVO.setTemplate_id(messageTemplate.getTemplateId());
        reqVO.setPage(messageTemplate.getPage());
        reqVO.setTouser(meetingMsgReqDTO.getOpenid());
        reqVO.setMiniprogram_state("developer");
        reqVO.setLang("zh_CN");
        // 构造data
        // 会议内容
        JSONObject meetingName = new JSONObject();
        meetingName.putOpt("value", meetingMsgReqDTO.getMeetingName());
        // 会议室
        JSONObject meetingRoom = new JSONObject();
        meetingRoom.putOpt("value", meetingMsgReqDTO.getMeetingRoomName());
        // 会议时间
        JSONObject meetingTime = new JSONObject();
        meetingTime.putOpt("value", meetingMsgReqDTO.getMeetingTime());
        // 会议开始时间
        JSONObject meetingStartTime = new JSONObject();
        meetingStartTime.putOpt("value", meetingMsgReqDTO.getMeetingStartTime());
        // 会议申请人
        JSONObject meetingApplyUserName = new JSONObject();
        meetingApplyUserName.putOpt("value", meetingMsgReqDTO.getMeetingApplyUserName());

        JSONObject data = new JSONObject();
        data.putOpt("thing4", meetingName);
        data.putOpt("thing1", meetingRoom);
        data.putOpt("character_string2", meetingTime);
        data.putOpt("time6", meetingStartTime);
        data.putOpt("thing3", meetingApplyUserName);

        reqVO.setData(data);

        BaseResponse<WxProgramSendTemplateMsgResVO> templateMsgRes
                = wxProgramWebClient.sendTemplateMsg(getAccessToken().getValue(), reqVO);
        log.info(templateMsgRes.getCheckedData().toString());
    }
/**
     * 发送消息模板
     * @param accessToken 凭据
     * @param wxProgramSendTemplateMsgReqVO 消息内容
     * @return 是否成功
     */
    public BaseResponse<WxProgramSendTemplateMsgResVO> sendTemplateMsg(String accessToken,
                                                                       WxProgramSendTemplateMsgReqVO wxProgramSendTemplateMsgReqVO){
        String res = webClient.buildWebClient()
                .post()
                .uri(wxProgramIdentityProperties.getUrl() + "/cgi-bin/message/subscribe/send"
                        + "?access_token=" + accessToken)
                .bodyValue(wxProgramSendTemplateMsgReqVO)
                .header(HttpHeaders.CONTENT_TYPE, MediaType.APPLICATION_JSON_VALUE)
                .exchangeToMono(response -> response.bodyToMono(String.class))
                .block();
        BaseResponse<WxProgramSendTemplateMsgResVO> stringBaseResponse = parseResponse(res, WxProgramSendTemplateMsgResVO.class);
        if (stringBaseResponse.isError()){
            log.error("登录失败：{}", stringBaseResponse.getMessage());
        }
        return stringBaseResponse;
    }

5.错误调试

在调用发送订阅消息接口时，总不是一帆风顺的，期间遇到了很多错误，错误通过返回的错误码可以看出一个大概，错误具体如何造成的，可以调用对应的接口来获取具体的信息。

6.写在最后

本篇文章写了使用小程序的订阅模板消息，给对应用户发送服务通知。本人设想是利用此服务通知作为一个消息的承接载体，替代短信通知，节省成本。

本篇文章的代码只给了一些片段，可能有些地方看起来有些吃力，如果有需要解释或者有指教的地方，欢迎留言或者私信，感谢大家的支持。

# 微信小程序 # 后端 # uni-app
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

第二届开放原子大赛首批创新成果集结武汉，诚邀广大开发者共鉴开源技术盛宴

avatar 开放原子开发者工作坊

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

诚邀报名 | 开源基础设施能力建设分论坛：打造开源生态的“心脏”

avatar 开放原子开发者工作坊

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

诚邀报名 | 编程语言分论坛：AI时代的技术革新与开源实践

avatar 开放原子开发者工作坊