模板消息
参考:官方文档
微信小程序网页上创建模板消息模板
创建完的模板消息如下:
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.
模板消息_2
最后测试发送，手机上成功得到了一个模板消息(＾－＾)V
