微信小程序模板消息详解
时间:2022-05-04
本文章向大家介绍微信小程序模板消息详解,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
先放代码
wxml:
<form name='pushMsgFm' report-submit bindsubmit='orderSign'>
<view> 单号: 0</view>
<view> 商家名称: 腾讯早餐店</view>
<view>实付金额:66元</view>
<view>物品名称:包子</view>
<view>付款金额:68元</view>
<view>付款时间: 2018年1月1日 </view>
<button form-type="submit">发送模板消息</button>
</form>
js:
Page({
/**
* 页面的初始数据
*/
data: {
openid:""
},
orderSign: function (e) {
wx.showLoading({ //期间为了显示效果可以添加一个过度的弹出框提示“加载中”
title: '加载中',
icon: 'loading',
});
var fId = e.detail.formId;
var l = 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + getApp().globalData.token;
var d = {
"keyword1": {
"value": "00273",
"color": "#4a4a4a"
},
"keyword2": {
"value": "腾讯早餐店",
"color": "#9b9b9b"
},
"keyword3": {
"value": "66元",
"color": "#9b9b9b"
},
"keyword4": {
"value": "包子",
"color": "#9b9b9b"
},
"keyword5": {
"value": "68元",
"color": "#9b9b9b"
},
"keyword6": {
"value": "2015年01月05日 12:30",
"color": "#9b9b9b"
}
};
console.log(d)
wx.request({
url: l,
//注意不要用value代替data
data: {
touser: this.data.openid,
template_id: 'id',//申请的模板消息id,
page: '/pages/mes/mes',
form_id: fId,
data:d,
color: '#ccc',
emphasis_keyword: 'keyword1.DATA'
},
method: 'POST',
success: function (res) {
wx.hideLoading();
console.log("发送成功");
console.log(res);
},
fail: function (err) {
// fail
console.log("push err")
console.log(err);
}
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
wx.login({
success:(res)=>{
if(res.code){
wx.request({
url: "https://api.weixin.qq.com/sns/jscode2session",
data:{
appid: getApp().globalData.appId,//你的appid
secret: getApp().globalData.secret,//你的secret
js_code:res.code,
grant_type:"authorization_code"
},
success:(res)=>{
console.log(res);
that.setData({
openid: res.data.openid //存储openid
})
}
})
}
}
})
}
})
再放图
最后放教程
0.页面的 <form/>
组件,属性report-submit
为true
时,可以声明为需发模板消息,此时点击按钮提交表单可以获取formId
,用于发送模板消息。或者当用户完成支付行为,可以获取prepay_id
用于发送模板消息。
1.在公众平台申请一个模板,获得模板id
2.获取openid,正常应该是在app.js里将openid和token获取下来存为公共变量调用
onLoad: function (options) {
var that = this;
wx.login({
success:(res)=>{
if(res.code){
wx.request({
url: "https://api.weixin.qq.com/sns/jscode2session",//换openid的接口地址
data:{
appid: getApp().globalData.appId,
secret: getApp().globalData.secret,
js_code:res.code,
grant_type:"authorization_code"
},
success:(res)=>{
console.log(res);
that.setData({
openid: res.data.openid//将openid存起来
})
}
})
}
}
})
}
3.获取token,这里我直接使用微信公众平台接口调试工具【http://mp.weixin.qq.com/debug/】上得到token串,输入你的appid和secret就可以得到token了,注意token是有过期时间的,应当在有效期内测试,access_token 的有效期目前为2个小时,需定时刷新,重复获取将导致上次获取的 access_token 失效。假如多处请求需要token的话,最好设置一个公共变量存储,这里我提前把token存储在app.js的globalData里头了。
4.发起模板消息请求
接口地址:(ACCESS_TOKEN 需换成上文获取到的 access_token)
https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=ACCESS_TOKEN
5.成功
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于 CheckList 的 NLP 模型行为测试
- PyTorch 60-Minute Blitz
- 一起来学演化计算-matlab@(x)构造匿名函数
- 论文研读-多目标优化中的多源选择迁移框架
- 常见编程模式之滑动窗口
- URL 从输入到页面渲染全流程
- Manytasking MATP MOOMFO 中G函数
- 为什么要用TypeScript
- np.clip截取函数
- 常见编程模式之双指针
- python操作txt文件中数据教程[2]-python提取txt文件中的行列元素
- JSON 是什么?它能带来什么?它和 XML 比较?
- 一起来学演化计算-实数空间变异算子
- 卡特兰数入门
- 常见编程模式之动态规划:0-1背包问题