模板消息

参考:官方文档

微信小程序网页上创建模板消息模板

创建完的模板消息如下:

image.png

小程序前台页面准备

官方文档原话

页面的<form/> 组件，属性report-submit为true时，可以声明为需发模板消息，此时点击按钮提交表单可以获取formId，用于发送模板消息。或者当用户完成支付行为，可以获取prepay_id用于发送模板消息。

调用接口下发模板消息（详见接口说明)

所以我们可以直接在页面上写一个form表单就行了哈

<form report-submit bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>
    <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

主要是加一个属性 report-submit为true
在js里则写一个请求到后台去处理模板消息的发送

var app = getApp()
var SERVER_NAME = app.server_name

Page({
  formSubmit: function (e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
    var formId = e.detail.formId;
    wx.request({
      url: SERVER_NAME+'/template/sendTemplate',
        data: {
          form_id: formId
        },
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          console.log(res)
        },
        fail: function (res) {
          console.log(res)
        }
      })
  },
  formReset: function () {
    console.log('form发生了reset事件')
  }
})

前台基本就是这样了，后台代码如下：


import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import com.udbac.util.HttpUtil;
import com.udbac.util.WxApiClient;

import net.sf.json.JSONObject;

/**
 * 测试模板消息发送 
 * Title:TemplateTest 
 * Description:
 * @author root
 * @date 2017年6月6日 上午11:40:49
 */

@RequestMapping("/template")
@Controller
public class TemplateController {

    //private static String form_id = "2017060601";// 表单提交场景下，为 submit 事件带上的

    
    /**
     * form_id只有在手机上调试的时候是数字串的，在web开发工具上formId显示的是: "the formId is a mock one。
     * @param form_id
     * @return
     */
    @ResponseBody
    @RequestMapping("/sendTemplate")
    public JSONObject sendTemplate(@RequestParam("form_id") String form_id){
        JSONObject obj = new JSONObject();
        obj.put("touser", WxApiClient.touser);
        obj.put("template_id", WxApiClient.template_id);
        obj.put("form_id", form_id);
        
        JSONObject data = new JSONObject();
        
        JSONObject keyWord1 = new JSONObject();
        keyWord1.put("value", "北京市朝阳区幸福二村40号兰博基尼展厅");
        keyWord1.put("color", "#173177");
        
        JSONObject keyWord2 = new JSONObject();
        keyWord2.put("value", "2017年06月06日 16:45:55");
        keyWord2.put("color", "#173177");
        
        JSONObject keyWord3 = new JSONObject();
        keyWord3.put("value", "兰博基尼LP750");
        keyWord3.put("color", "#173177");
        
        JSONObject keyWord4 = new JSONObject();
        keyWord4.put("value", "20170606151111010");
        keyWord4.put("color", "#173177");


        JSONObject keyWord5 = new JSONObject();
        keyWord5.put("value", "8500000元");
        keyWord5.put("color", "#173177");
        
        data.put("keyword1", keyWord1);
        data.put("keyword2", keyWord2);
        data.put("keyword3", keyWord3);
        data.put("keyword4", keyWord4);
        data.put("keyword5", keyWord5);
        
        obj.put("data", data);
        
        System.out.println(obj.toString());
        JSONObject jsonObject = HttpUtil.httpsRequest(WxApiClient.getTemplateUrl(), "POST", obj.toString());
        
        System.out.println(jsonObject);
        return jsonObject;
    }
    
}

keyword1到keyword5这块有先后顺序的,要是不按照官方给的顺序来，模板先后顺序就乱套了，名称和值不然就对不上了

模板消息_3

附上一个发送post请求用到的工具类:

    /*** 发送的POST请求
     * @param urlPath
     * @return
     * @throws IOException
     */
    public static JSONObject httpsRequest(String requestUrl, String requestMethod, String outputStr) {
        JSONObject jsonObject = null;
        try {
            
            URL url = new URL(requestUrl);
            HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();
            conn.setDoOutput(true);
            conn.setDoInput(true);
            conn.setUseCaches(false);
            conn.setRequestMethod(requestMethod);
            if (null != outputStr) {
                OutputStream outputStream = conn.getOutputStream();
                outputStream.write(outputStr.getBytes("UTF-8"));
                outputStream.close();
            }
            InputStream inputStream = conn.getInputStream();
            InputStreamReader inputStreamReader = new InputStreamReader(inputStream, "UTF-8");
            BufferedReader bufferedReader = new BufferedReader(inputStreamReader);
            String str = null;
            StringBuffer buffer = new StringBuffer();
            while ((str = bufferedReader.readLine()) != null) {
                buffer.append(str);
            }
            if(buffer.toString().contains("\n")) {
                return null;
            }
            bufferedReader.close();
            inputStreamReader.close();
            inputStream.close();
            inputStream = null;
            conn.disconnect();
            jsonObject = JSONObject.fromObject(buffer.toString());
        } catch (Exception e) {
            e.printStackTrace();
        }
        return jsonObject;
    }

最后测试一下:
在刚才注册的小程序表单页面随便勾选一个，点击submit,小程序会发请求到后台,然后拼接成json字符串，调用模板消息发送的接口，把json字符串post请求传过去就ok.