微信小程序开发心得第二章:千里传音(模板消息)

今天分享一篇关于消息模板的简易教程。

老规矩先把官方的定义再讲一下,消息模板是基于微信的通知渠道,为我们开发者提供了触发模板消息的能力,以便实现服务的闭环和更好的用户体验。

发起消息模板是有限制条件的,必须用户本人在微信体系与小程序页面有交互行为后才能触发,只有两种情况允许。

第一种是用户在小程序完成支付的行为,可允许开发者向用户在7天内推送有限的模板消息,一次支付可发一条。

第二种是通过提交表单行为且表单需要声明为要发模板消息的,可以允许开发者向用户在7天内推送有限条数的模板消息,一次提交表单可发一条。

好了,废话就不多说了,还是看代码吧。更多官方的定义打开这个地址即可。https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html

表单触发模板消息

基于微信的消息提示

由于没有正式上线,目前只能收到这样的信息,就表示模板消息发送成功了。

我用的是表单触发的模板消息,index.wxml部分很简单:代码如下

<form bindsubmit="formSubmit" report-submit="true"> <button formType="submit">提交表单发起通知</button> </form>

需要注意的是要在form加上 report-submit="true" 的属性和值。官方要求的,要遵循。

然后再看index.js部分

var app = getApp() Page({ data: { token: "", openid: "", appid: "你的appid", secret: "你的secret", template_id: "消息模板id,在小程序管理员账号中模板消息中设置获取" }, onLoad: function () { console.log('onLoad') }, onLoad: function () { //登录获取openid并保存 var that = this wx.login({ success: function (res) { if (res.code) { wx.request({ url: 'https://www.zgdnbxg.com/login.php', //后端处理页面返回openid data: { appid: that.data.appid, secret: that.data.secret, js_code: res.code, grant_type: "authorization_code" }, method: 'GET', success: function (res) { that.setData({ openid: res.data.openid }) }, fail: function (res) { console.log(res) }, complete: function (res) { console.log(res) } }) } }, fail: function () { // fail }, complete: function () { // complete } }) }, onReady: function () { //判断toke有没有值,没有就settokentoken 有的话就获取缓存并设置token var that = this if (that.data.token == "") { console.log("token 为空") that.setToken() } else { console.log("token 不为空") that.setData({ token: wx.getStorageSync('token') }) } }, //表单事件 触发模板消息 formSubmit: function (e) { var that = this wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + wx.getStorageSync('token'), data: { touser: that.data.openid, form_id: e.detail.formId, template_id: that.data.template_id, value: "", }, method: 'POST', success: function (res) { console.log(res) }, fail: function (res) { console.log(res) }, complete: function () { } }) }, //获取token并保存在本地 setToken: function () { var that = this wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + that.data.appid + '&secret=' + that.data.secret, data: {}, method: 'GET', success: function (res) { var token = res.data.access_token that.setData({ token: token }) wx.setStorageSync('token', token) }, fail: function (res) { console.log("获取token失败") console.log(res) } }) } })

你可以把这段代码全部复制,然后把appid,secret,template_id换成你自己的,并通过小程序管理员配置下request,加上www.zgdnbxg.com,即可真机体验。

原文发布于微信公众号 - 极乐技术社区(wxapp-union)

原文发表时间:2016-12-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

appium+python自动化37-adb模拟点击事件(input tap)

appium有时候定位一个元素很难定位到,或者说明明定位到这个元素了,却无法点击,这个时候该怎么办呢? 求助大神是没用的,点击不了就是点击不了,appium不是...

48730
来自专栏桥路_大数据

使用夜神模拟器运行React Native躺坑详解

51580
来自专栏编程微刊

Vue.js开发环境搭建的介绍

17630
来自专栏Python中文社区

Nginx+uWSGI部署Django网站的详细步骤,脱坑必备,值得收藏!

对于Django部署来说,选择nginx和uWSGI是一个不错的选择,此教程旨在将Django部署到生产环境的服务器中。当然你也可以使用Apache或者其他的服...

52750
来自专栏知晓程序

开发 | 拒绝打开就授权!小程序如何用新能力获取用户资料?

简单来说,这次能力更新,为 button 组件的 open-type 属性赋予了新的有效值 getUserInfo(声明需要获取用户信息)。

36930
来自专栏程序员的知识天地

Vue开发环境搭建全过程,一步一个坑

Vue这里就不多作介绍了,首先我们要安装好整个开发环境,其实Windows和Mac的整个过程基本一样

31110
来自专栏贾老师の博客

跨平台命令行抓包工具 gaze 介绍

17420
来自专栏mukekeheart的iOS之旅

《从零开始做一个MEAN全栈项目》(4)

欢迎关注本人的微信公众号“前端小填填”,专注前端技术的基础和项目开发的学习。  在上一篇中,我们讲了如何去构建第一个Express项目,总结起来就是使用两个核心...

30260
来自专栏JavaEdge

Maven环境隔离解决的问题配置及原理目录初始化编译打包命令验证

解决的问题 避免人工修改的弊端,即容易犯错 轻松分环境编译,打包,部署 配置及原理 在pom.xml中增加build节点 ? 在pom.xml中增加pro...

44660
来自专栏俗人笔记

浏览器用户脚本—打造自己的专属页面

一段用户脚本就是一个程序,通常用JavaScript语言来写,用于修改web页面以提升浏览体验。通常通过浏览器的用户脚本管理插件来开启,例如Tampermonk...

92140

扫码关注云+社区

领取腾讯云代金券