借助云开发实现小程序订阅消息(模板消息)推送功能
之前的模板消息推送,将在2020年1月10日下线,所以我们不得不使用订阅消息了。
我们先来看下订阅消息的官方简介。
接下来我们就来借助云开发,来快速实现小程序消息推送的功能。
一:获取模板 ID
这一步和我们之前的模板消息推送是一样的,也是先添加模板,然后拿到模板id
首先是开通订阅消息功能,很简单,如下图
由于长期性订阅消息,目前仅向政务民生、医疗、交通、金融、教育等线下公共服务开放,后期将逐步支持到其他线下公共服务业务。仅就线下公共服务这一点,长期性订阅消息就和大部分开发者无缘了。 所以我们这里只能以使用一次性订阅消息为例。
如上图,我们从公共模板库里选择一个一次性订阅的模板。然后编辑模板如下图
下图就是我们添加好的模板,下图的模板id就是我们需要的。
二,请求用户授权
我们做订阅消息授权时,只能是用户点击或者支付完成后才可以调起来授权弹窗,官方是这么要求的:
我们这里用到了wx.requestSubscribeMessage这个方法,来获取用户的授权。
- 1,编写index.wxml代码
- 2,编写index.js代码,实现点击获取授权
这一步tmplIds里的一串字符,就是我们自己添加的模板id
- 3,点击按钮运行效果如下 开发者工具模拟器上点击授权弹窗是这样的:
手机上的授权弹窗是这样的:
可以看到,这里显示的就是我们添加的 ‘上课提醒’的模板。 细心的同学可以看到, 真机上多了一个 ‘总是保持以上选择,不再询问’ 其实,你自己仔细多品一些。也能明天,我们正常订阅消息授权时,用户允许的话,你只能推送一次消息。也就是用户允许一次,我们就可以推送一条消息给用户,并且这个允许不存在过期。所以我们可以让用户尽量多的点击允许,这样我们就可以尽量多的给用户发送消息了。
这里用户允许后,我们就可以给用户推送消息了,接下来我们来借助云开发的云函数来实现消息推送功能。
三,获取用户的opneid
先来看官方爸爸是怎么说的。
可以看出官方提供了两种方式,我们这里使用云调用。说白了就是在云函数里调用推送功能。
- 推送所需参数
可以看到我这里用来openapi功能,并且需要用到用户的opneid,关于openid的获取,我之前有写过文章,也录过视频的。文章的话,大家去翻下我历史的文章,视频的话,点击这个即可:《借助云函数获取用户openid》 这里的openid的获取我就不再详细讲解了,把对应云函数的代码给大家贴出来。
在使用云开发时,有几点需要注意的
- 1,需要在project.config.json里创建云函数目录如下图
- 2,需要在app.js里初始化云开发环境
至于云开发的环境id从哪里拿,我视频里也讲过很多遍了,直接去看我视频或者翻看我历史文章即可。 《零基础入门云开发视频》
四,用云函数实现消息推送
我们只需要创建一个云函数如下,然后填入用户的openid,要跳转的小程序页面链接,模板内容,模板id即可。通常这些数据都应该传进来,简单起见,我就把这里的模板内容写成固定的。
注意:我在编写上面的代码时,推送内容的key必须和小程序模板里的key保持一致,否则就会报如下错误。
- 然后看下调用这个云函数的地方
如果用户没有授权,我们推送会报如下错误
如果用户授权过,我们就可以成功推送了,推送后的打印日志如下
还记得我们真机上的授权吗,如果用户只是点击了允许,没有选择一直允许,那我我们在推送成功一次后,如果再次推送,就需要用户重新授权。否则,还是会报这个错误的
所以我们用户点击一次允许,我们就可以推送一次消息,比如,我点击了4次允许那么我就可以成功的推送4次
效果图
可以看到,我们成功的收到 上课提醒的模板消息,点击进去,就是我们具体的推送内容
其实我这是连续收到了4条消息,因为我点击了4次允许推送,所以就可以成功的推送4次。
到这里我们就完整的实现模板消息推送功能了,下面我把主要代码贴给大家,大家也可以私信我获取完整源码。
- index.wxml
<button bindtap="shouquan" type='primary'>获取订阅消息授权</button>
<button bindtap="getOpenid">获取用户的openid并推送消息</button>
- index.js
//编程小石头wechat:2501902696
Page({
//获取授权的点击事件
shouquan() {
wx.requestSubscribeMessage({
tmplIds: ['CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU'], //这里填入我们生成的模板id
success(res) {
console.log('授权成功', res)
},
fail(res) {
console.log('授权失败', res)
}
})
},
//获取用户的openid
getOpenid() {
wx.cloud.callFunction({
name: "getopenid"
}).then(res => {
let openid = res.result.openid
console.log("获取openid成功", openid)
this.send(openid)
}).catch(res => {
console.log("获取openid失败", res)
})
},
//发送模板消息到指定用户,推送之前要先获取用户的openid
send(openid) {
wx.cloud.callFunction({
name: "sendMsg",
data: {
openid: openid
}
}).then(res => {
console.log("推送消息成功", res)
}).catch(res => {
console.log("推送消息失败", res)
})
}
})
- 推送对应的云函数
//编程小石头wechat:2501902696
const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async(event, context) => {
try {
const result = await cloud.openapi.subscribeMessage.send({
touser: event.openid, //要推送给那个用户
page: 'pages/index/index', //要跳转到那个小程序页面
data: {//推送的内容
thing1: {
value: '小程序入门课程'
},
thing6: {
value: '杭州浙江大学'
},
thing7: {
value: '第一章第一节'
}
},
templateId: 'CFeSWarQLMPyPjwmiy6AV4eB-IZcipu48V8bFLkBzTU' //模板id
})
console.log(result)
return result
} catch (err) {
console.log(err)
return err
}
}
后面我会分享更多小程序相关的知识出来,请持续关注。
相关视频讲解:https://edu.csdn.net/course/detail/26572
- 剑指OFFER之二进制中1的个数(九度OJ1513)
- 剑指OFFER之跳台阶(九度OJ1388)
- 剑指OFFER之二维数组中的查找(九度OJ1384)
- 剑指OFFER之用两个栈实现队列(九度OJ1512)
- 剑指OFFER之用两个栈实现队列(九度OJ1512)
- 简单的客户机服务器投射模拟
- 使用gcc编译gdb调试
- 剑指OFFER之第一个只出现一次的字符(九度OJ1283)
- c++中类长度解析
- 剑指OFFER之丑数(九度OJ1214)
- 剑指OFFER之把数组排成最小的数(九度OJ1504)
- 剑指OFFER之从1到n中出现1的次数(九度OJ1373)
- 剑指OFFER之最大子向量和(连续子数组的最大和)(九度OJ1372)
- 剑指OFFER之最小的K个数(九度OJ1371)
- 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 数组属性和方法
- 偿还技术债(1)-EventBus源码详解
- 两万六千字带你Kotlin入门
- 从源码看 Jetpack(7)-SavedStateHandle源码详解
- 从源码看 Jetpack(6)-ViewModel源码详解
- linux配置c++11编译环境
- Java 多线程编程(聊聊线程池)
- Java 多线程编程(“锁”事碎碎念)
- Spring Cloud Alibaba技术栈(下)
- Electron安装过程深入解析(读完此文解决Electron安装失败导致的无法启动,无法打包的问题)
- Kafka中副本机制的设计和原理
- Cocoapods更新出错
- 用 Wolfram 语言映射美国的山火
- Mathematica在中学数学教与学中的应用
- 总结一些ES不常用的filter
- 如何将炫酷的报表直接截图发送邮件——在Superset 0.37使用Schedule Email功能