微信小程序模板消息详解
先放代码
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.成功
微信小程序模板消息详解的更多相关文章
- 微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
- 微信小程序模板消息后端代码
利用spring 事件发送模板消息 1.定义事件 import com.ruoyi.project.salerauth.domain.TemplateMessage; import org.sprin ...
- 微信小程序开发之详解生命周期方法
生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...
- 微信小程序的配置详解
1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小 ...
- 微信小程序 Mustache语法详解
最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序 Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究 ...
- PHP实现推送微信小程序模板消息
这边只会写如何实现,至于在公众号管理后台添加模板消息可以参考这篇文章: https://www.cnblogs.com/txw1958/p/wechat-template-message.html,当 ...
- 微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- 微信小程序开发者工具详解
一.微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址. 1.2 下载后安装一下就可以使用了: 二.创建项目 2.1 微信小程序web开发工具需要扫码登陆,所以 ...
- 微信小程序wxss样式详解
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
随机推荐
- Asp.net常用开发方法之DataTable/DataReader转Json格式代码
public static string JsonParse(OleDbDataReader dataReader) //DataRead转json { StringBuilder jsonStrin ...
- [置顶]
Xamarin android 调用Web Api(ListView使用远程数据)
xamarin android如何调用sqlserver 数据库呢(或者其他的),很多新手都会有这个疑问.xamarin android调用远程数据主要有两种方式: 在Android中保存数据或调用数 ...
- ES6 对象的扩展(上)
属性的简介表示法 允许直接写入变量和函数作为对象的属性和方法,这样的书写更简洁. function f( x, y ) { return { x, y }; } // 等同于 function f( ...
- c#程序连接mysql,报"Illegal mix of collations (utf8_general_ci,IMPLICIT) and (utf8_unicode_ci,IMPLICIT) for operation '='"的解决方案
=============================================== 20170607_第一次修改 ccb_warlock === ...
- 关于sleep函数的一些问题和资料
//================================================================================================ 2 ...
- thinkphp3.2.3使用ajax 的一些坑——使用AjaxReturn()后,直接返回null,模板文件不起作用
从接触thinkphp到今天,填完此坑,必有其他的坑有会冒出来.哎!这个填坑之路我想是没有尽头的了. 最近,需要使用ajax完成一些操作,一开始想Ajax简单啊,不过是一种提交数据的方式,不过是害苦了 ...
- Kafka的基本概念与安装指南(单机+集群同步)
最近在搞spark streaming,很自然的前端对接的就是kafka.不过在kafka的使用中还是遇到一些问题,比如mirrormaker莫名其妙的丢失数据[原因稍后再说],消费数据offset错 ...
- Elasticsearch5.4常见问题总结
最近项目中用到了Elasticsearch5.4(ES)是比较新的一个版本,使用的过程中出现了很多的问题,很是头疼,但是问题最终还是解决掉了. 问题一:ESClient获取慢,并且不能获取Client ...
- SpringMVC RequestMapping注解
1.@RequestMapping 除了修饰方法,还可以修饰类 2.类定义处:提供初步的请求映射信息.相对于WEB应用的根目录 方法处:提供进一步细分映射信息 相对于类定义处的URL.若类定义处未 ...
- MySQL优化一 简绍
优化方面: 存储层:数据表”存储引擎”选取.字段类型选取.逆范式(3范式) 设计层:索引.分区/分表 架构层:分布式部署(主从模式/共享) sql语句层:结果一样的情况下,要选择效率高.速度快.节省资 ...