微信小程序订阅消息推送
这几天在使用小程序的模板消息推送接口的时候,出现了个报错信息 “the formId is no longer available in develop or trial version”,去文档查看了一下才发现,模板消息功能在今年1月份已经下架了,现在统一都是使用订阅消息:
那么这两个功能有什么区别呢?
模板消息推送
简单地说,用户每进行一次提交表单或是支付行为,都会产生一个 formId,开发者可以通过这个 formId 向用户推送消息。由于下发权限是在开发者这边,为了防止消息频繁推送对用户造成的骚扰,小程序做出了一个限制:一个 formId 只有 7 天有效期,每推送一次消息会消耗一个 formId,也就是说,正常情况下,开发者 7 天内可以推送的消息数量是有限的。这样当然对用户是友好的,但是对开发者来说,有些业务场景又确实推送多条消息:比如说 A 用户发布一个二手商品,B 用户点击了“感兴趣”,需要推送消息告知 A 用户,同理,C 用户也点击了“感兴趣”,同样需要推送消息告知 A 用户,这种情况下一个 formId 肯定是不够用的。于是在订阅消息出现以前,开发者就使用了一些黑科技来收集 formId:包括基于事件冒泡的多层嵌套表单,以及在小程序里埋藏大量的点击事件等,只要用户点击了就会触发表单提交,生成新的 formId,然后记录下有效期存放到数据库中,方便后续的使用。
不过有不少的黑科技已经被微信官方修复了,而且我们会发现,最终还是回到了起点,仍然没有解决用户受到消息骚扰的问题。微信大概也意识到了这一点,所以推出了订阅消息功能。
订阅消息推送
举个订阅消息的例子:当我们参与某个公众号的抽奖活动之后,会有弹窗提示我们是否接受抽奖结果的信息推送,这个弹窗就属于订阅消息功能的授权环节。
从使用体验来看,订阅消息推送最大的特征就在于,它对于用户和开发者都是友好的。首先,消息下发的权限交还给了用户,由用户自己来决定要不要接受消息推送,不再像之前那样被动接受了;其次,对于我们开发者来说,只需要调用接口询问用户是否接受消息推送即可,只要用户同意,那么我们就可以多次发送消息,不再需要像以前那样费力去收集 formId 了。
使用
首先登录微信公众平台,选择 订阅消息 —— 我的模板 —— 添加,然后根据自己的需求选择一个模板,配置关键字,提交之后即可获得模板对应的模板 Id,这个 Id 稍后调用 api 的时候会用到,当然,同样需要用到的还有关键字对应的参数:
小程序端代码:
let templateId = 'Ite6-mnfTlONu6rd35AJ-SGQYKQgj1WMvjVj0O5h9kE'
wx.requestSubscribeMessage({
tmplIds: [templateId],
success: (res)=> {
// 如果用户点击允许
if(res[templateId] == 'accept'){
console.log('点击了允许')
wx.cloud.callFunction({
name:'sendMessage',
data:{
templateId,
content: this.data.textContent,
blogId: this.properties.blogid,
}
}).then(res => {
this.setData({
textContent:''
})
})
} else {
console.log('点击了取消')
}
}
fail:(res) => {}
})
wx.requestSubscribeMessage
这个 api 主要用来调起弹窗询问用户是否接受消息推送,tmplIds
数组存放各类模板 Id,因为开发者可能不止使用了一个模板。
这里要注意两个地方,第一个是这个 api 只能在点击事件或者触发支付回调后使用,bindsubmit
表单提交事件是用不了的;第二个是,不管用户点击允许还是拒绝,都会来到 success 回调,fail 回调是在 api 本身调用失败后执行的。那么怎么判断用户是点击了允许还是拒绝(取消)呢?如果用户点击了允许,那么 res 中模板 Id 键对应的键值会是 “accept”(反之则是 “reject”),然后调用相应的云函数并传参,进行消息推送。
在云函数中调用相关 api 之前,要先去云函数文件夹下的 config.JSON
文件设置调用权限:
{
"permissions": {
"openapi": [
"subscribeMessage.send"
]
}
}
相关的云函数:
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
const {OPENID} = cloud.getWXContext()
return await cloud.openapi.subscribeMessage.send({
touser: OPENID,
page: `/pages/blog-comments/blog-comments?blogId=${event.blogId}`,
data:{
thing4:{
value:'评价完成'
},
thing1:{
value: event.content
}
},
templateId: event.templateId
})
}
主要是用到了 cloud.openapi.subscribeMessage.send()
这个 api,相关的参数就根据自己的实际情况来:这里的 OPENID
是消息发送目标的 openid
,page
则是用户点击消息后进入的页面(这里是评论详情页),data
就对应我们之前在微信公众平台设置的模板关键字,当然,这里要注意使用此前模板提供的键名(thing4
和 thing1
),最后还有一个参数就是我们的模板 Id 啦。其实和之前模板消息的用法是差不多的,只不过我们不再需要传参 fromId 了。
最后,对用户来说,他也可以在弹窗的时候点击允许和记住选择,这样就是默认每次都接受消息推送了,对应的就是默认执行 wx.requestSubscribeMessage
中的 if 代码块。
其实,不谈技术,单从用户的角度来看,这个功能的调整其实是很人性化的,选择权确实本就应该掌握在用户手中,如果用户没有权限拒收不需要的消息,这样的产品还谈什么用户体验呢?在查阅相关资料的时候,也看到了一篇从产品角度分析的文章,感觉写得不错,感兴趣的可以看一看
参考:
- Python网络数据抓取实战——Xpath解析豆瓣书评
- 左手用R右手Python系列17——CSS表达式与网页解析
- 左手用R右手Python系列16——XPath与网页解析库
- 扒一扒rvest的前世今生!
- RCurl中这么多get函数,是不是一直傻傻分不清!!!
- 机器学习(二)深度学习实战-使用Kera预测人物年龄问题描述引入所需要模块加载数据集创建模型编译模型优化optimize1 使用卷积神经网络optimize2 增加神经网络的层数输出结果结果
- 异步加载的基本逻辑与浏览器抓包一般流程
- 左手用R右手Python系列之——表格数据抓取之道
- XML/HTML/JSON——数据抓取过程中不得不知的几个概念
- R语言网络数据抓取的又一个难题,终于攻破了!
- R语言数据清洗实战——高效list解析方案
- 左手用R右手Python系列——循环中的错误异常规避
- SpringBoot2.x开发案例之整合Quartz任务管理系统
- 给出一组非负整数,重新排序组成最大的数
- 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 数组属性和方法
- PHP7 安装event扩展的实现方法
- 在laravel框架中使用model层的方法
- 漂亮的thinkphp 跳转页封装示例
- thinkphp5框架前后端分离项目实现分页功能的方法分析
- laravel 根据不同组织加载不同视图的实现
- 详解将数据从Laravel传送到vue的四种方式
- Laravel实现ApiToken认证请求
- laravel 实现划分admin和home 模块分组
- laravel在中间件内生成参数并且传递到控制器中的2种姿势
- 在laravel框架中实现封装公共方法全局调用
- laravel通过a标签从视图向控制器实现传值
- 在Laravel 的 Blade 模版中实现定义变量
- 解决Laravel5.5下的toArray问题
- Laravel基础_关于view共享数据的示例讲解
- 解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题