微信小程序模板消息详解
时间: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 数组属性和方法
- Go 视图模板篇(二):模板指令
- go语言学习(五):通道的用法
- PHP无锁内存nosql---Yac的实战
- 0803-什么是Apache Ranger - 5 - Hive Plugin
- 2017年的golang、python、php、c++、c、java、Nodejs性能对比[续]
- go语言学习(四):数组和切片
- 初识ABP vNext(4):vue用户登录&菜单权限
- 2017 从上到下打印树新解法
- 基于Go的websocket消息服务
- go语言学习(三):源码文件
- 一个比ack速度快n倍的代码搜索工具: ag
- 版本命名标准:语义化 2.0.0
- Git请求合并说明
- guava学习(一):观察者模式
- 「Workshop」第十三期:统计检验与多重矫正