微信小程序获取用户openId并通过服务端向用户发送模板消息

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