Applet:

wxml:

 <form bind:submit="testSubmit" report-submit="true">
      <button formType="submit" class='modelButton'>Send template message</button>
 </form>

wxss:

.modelButton{
    margin-top:50%;
    width: 50%;
}

js front end sends template message:

Note: the openid of each applet is different. The openid of my applet is used here, and should be replaced by the openid of my own applet.

Refer to my other blog about decrypting openid: https://blog.csdn.net/LONG_Yi_1994/article/details/82977603

    testSubmit: function(e) {
        console.log(e);
        var self = this;
        let method = 'GET';
        let openid = 'obk-W5Fq76sHfAnnC_8L_6xEew0M';
        let _access_token = '14_Z_mmRqZ8F0LSoYphxhXLcY1qYQbiArASnTyRChBQtKnWDL3co46eXwQsL8Qr58yZ01XmE6shkLGNGkz1zhX0zqPNNsXJlGljdLejCR_qerPP76H-4ZodZT4XTPqEAywHtNB_m-djIzoN3AyHZZJjAFASSC';
        let url = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + _access_token;

        let _jsonData = {
            access_token: _access_token,
            touser: 'oK_7b4mGyt6L9DRXWINxjEeCb_no',
            template_id: 'PZ-QULr4atCAgBacoMjh09u0bAVA_St-lNCp5jV7Pcs',
            form_id: e.detail.formId,
            page: "pages/index/index",
            data: {
                "keyword1": {
                    "value": "Test data I",
                    "color": "#173177"
                },
                "keyword2": {
                    "value": "Test data II",
                    "color": "#173177"
                },
                "keyword3": {
                    "value": "Test data 3",
                    "color": "#173177"
                },
                "keyword4": {
                    "value": "Test data IV",
                    "color": "#173177"
                },
                "keyword5": {
                    "value": "Test data V",
                    "color": "#173177"
                },
                "keyword6": {
                    "value": "Test data VI",
                    "color": "#173177"
                }
            }
        };

        wx.request({
            url: "https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token="+_access_token,
            data: _jsonData,
            method: method,
            success: function(res) {
                console.log(res)
                wx.showToast({
                    title: 'Send successfully',
                })
            },
            fail: function(err) {
                console.log('request fail ', err);
            },
            complete: function(res) {
                console.log("request completed!");
            }

        })

    }

java code sends template messages in the background:

The backend needs to get the formid submitted by the front-end form to send template messages

controller:

    @GetMapping("/publishModelMessage")
    public String publishModelMessage(@RequestParam(required = false) String formId,@RequestParam(required = false) String openId,HttpServletResponse response){
        openId = "oK_7b4mGyt6L9DRXWINxjEeCb_no";
        Token token = CommonUtil.getToken("wxe07fe139e9473040","0881d4dc47cd36cac667264238ad0bf2");
        System.out.println(token.getAccessToken());
        WxMssVo wxMssVo = new WxMssVo();
        wxMssVo.setTemplate_id("PZ-QULr4atCAgBacoMjh09u0bAVA_St-lNCp5jV7Pcs");
        wxMssVo.setTouser(openId);
        wxMssVo.setPage("pages/index/index");
        wxMssVo.setRequest_url("https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=" + token.getAccessToken());
        wxMssVo.setForm_id(formId);
        List<TemplateData> list = new ArrayList<>();
        list.add(new TemplateData("notice","#ffffff"));
        list.add(new TemplateData("Li Yin long","#ffffff"));
        list.add(new TemplateData("Released successfully","#ffffff"));
        list.add(new TemplateData(new Date().toString(),"#ffffff"));
        list.add(new TemplateData("Daily overtime work","#ffffff"));
        list.add(new TemplateData("Shenzhen Fangcun Technology Service Co., Ltd","#ffffff"));
        wxMssVo.setParams(list);
        CommonUtil.sendTemplateMessage(wxMssVo);
        return null;
    }

Tool class CommonUtil:

public class CommonUtil {    
    public final static String token_url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET";
//Get applet token
    public static Token getToken(String appid, String appsecret) {
        Token token = null;
        String requestUrl = token_url.replace("APPID", appid).replace("APPSECRET", appsecret);
        // Initiate GET request to GET voucher
        JSONObject jsonObject = httpsRequest(requestUrl, "GET", null);

        if (null != jsonObject) {
            try {
                token = new Token();
                token.setAccessToken(jsonObject.getString("access_token"));
                token.setExpiresIn(jsonObject.getInteger("expires_in"));
            } catch (JSONException e) {
                token = null;
                // Failed to get token
                log.error("Obtain token fail errcode:{} errmsg:{}", jsonObject.getInteger("errcode"), jsonObject.getString("errmsg"));
            }
        }
        return token;
    }
//Send template message
    public static String sendTemplateMessage(WxMssVo wxMssVo) {
        String info = "";
        try {
            //Create connection
            URL url = new URL(wxMssVo.getRequest_url());
            HttpURLConnection connection = (HttpURLConnection) url.openConnection();
            connection.setDoOutput(true);
            connection.setDoInput(true);
            connection.setRequestMethod("POST");
            connection.setUseCaches(false);
            connection.setInstanceFollowRedirects(true);
            connection.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
            connection.setRequestProperty("Content-Type", "utf-8");
            connection.connect();
            //POST request
            DataOutputStream out = new DataOutputStream(connection.getOutputStream());
            JSONObject obj = new JSONObject();

            obj.put("access_token", wxMssVo.getAccess_token());
            obj.put("touser", wxMssVo.getTouser());
            obj.put("template_id", wxMssVo.getTemplate_id());
            obj.put("form_id", wxMssVo.getForm_id());
            obj.put("page", wxMssVo.getPage());

            JSONObject jsonObject = new JSONObject();

            for (int i = 0; i < wxMssVo.getParams().size(); i++) {
                JSONObject dataInfo = new JSONObject();
                dataInfo.put("value", wxMssVo.getParams().get(i).getValue());
                dataInfo.put("color", wxMssVo.getParams().get(i).getColor());
                jsonObject.put("keyword" + (i + 1), dataInfo);
            }

            obj.put("data", jsonObject);
            out.write(obj.toString().getBytes());
            out.flush();
            out.close();

            //Read response
            BufferedReader reader = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String lines;
            StringBuffer sb = new StringBuffer("");
            while ((lines = reader.readLine()) != null) {
                lines = new String(lines.getBytes(), "utf-8");
                sb.append(lines);
            }
            info = sb.toString();
            System.out.println(sb);
            reader.close();
            // Disconnect
            connection.disconnect();
        } catch (Exception e) {
            e.printStackTrace();
        }
        return info;
    }


}

Class Token:

public class Token {
    //Interface access credentials
    private String accessToken;
    //Interface validity, in seconds
    private int expiresIn;
    
    public String getAccessToken() {
        return accessToken;
    }
    public void setAccessToken(String accessToken) {
        this.accessToken = accessToken;
    }
    public int getExpiresIn() {
        return expiresIn;
    }
    public void setExpiresIn(int expiresIn) {
        this.expiresIn = expiresIn;
    }
}

Template message request parameter encapsulation class WxMssVo:

public class WxMssVo {
   private String touser;
   private String template_id;
   private String page;
   private String form_id;
   private String access_token;
   private String request_url;
   private List<TemplateData> params = new ArrayList<>();
}

Template message detail parameter encapsulates TemplateData:

public class TemplateData {
    private String key;
    private String value;
    private String color;

    public TemplateData(String value, String color) {
        this.value = value;
        this.color = color;
    }
}

Final effect: