微信小程序开发实现消息推送


Posted in Javascript onNovember 18, 2020

微信小程序的消息推送简单的说就是发送一条微信通知给用户,用户点开消息可以查看消息内容,可以链接进入到小程序的指定页面。

微信小程序消息推送需要用户触发动作才能发送消息,比如用户提交订单、支付成功。一次只能发一条,当然可以通过某种方法发送多条,小的就不在这里赘述了。下面就介绍一下如何推送消息。

一、准备工作

首先,在微信公众平台开通消息推送功能,并添加消息模板。可以从模板库选择模板也可以创建一个模板,模板添加之后,模板ID我们接下来要用的。

发送模板消息需要用到accesstoken、formId和openID。accesstoken获取及更新可以看我的上一篇文章;formID就是消息模板ID,openID我们最好在获取用户信息或用户登录时储存到全局变量里。

微信小程序开发实现消息推送

二、获取formID

在需要触发消息推送的页面添加提交表单的事件。目的是得到formID,formID是消息推送时必须的参数。

<form name='pushMsgFm' report-submit='true' bindsubmit='getFormID'> 
 <button form-type="submit" class="zan-btn zan-btn--large zan-btn--danger payButton">立即支付</button>
</form>

以上代码中“getFormID”是提交表单时触发的事件。

getFormID: function (e) {
this.setData({
formId: e.detail.formId }) }

以上方法是获取formId。

三、配置消息模板参数,并传给后台

var config = require('../config.js')
var app = getApp();
function pushMsg(formID, access_token){
 var openId = app.globalData.userInfo.openId;
 var messageDemo = {
 touser: openId,//openId
 template_id: 'PjtLeqq-UeF49r5jr88s27HBzBDobijr6QfiwJwIkPg',//模板消息id, 
 page: 'pages/index/index',//点击详情时跳转的主页
 form_id: formID,//formID
 data: {//下面的keyword*是设置的模板消息的关键词变量 
 
 "keyword1": {
 "value": "keyword1",
 "color": "#4a4a4a"
 },
 "keyword2": {
 "value": "keyword2",
 "color": "#9b9b9b"
 },
 "keyword3": {
 "value": "keyword3",
 "color": "red"
 }
 },
 color: 'red',//颜色
 emphasis_keyword: 'keyword3.DATA'//需要着重显示的关键词
 }
 wx.request({
 url: config.service.sendMsgUrl,
 data: { value: messageDemo, access_token: access_token},
 method: 'POST',
 success: function (res) {
 console.log("push msg");
 console.log(res);
 },
 fail: function (err) { 
 console.log("push err")
 console.log(err);
 }
 });
}
module.exports = { pushMsg: pushMsg }

四、推送消息

const request = require('../tools/ih_request');
var conf = require('../config.js')
module.exports = async (ctx, next) => {
 var body = ctx.request.body.value
await request.postJson({
 url: 'https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=' + ctx.request.body.access_token,
 body: body,
 success: function (res) {
 ctx.body = {
 result: res
 }
 console.log('res=',res);
 },
 error: function (err) {
 ctx.body = {
 result: err
 }
 console.log(err);
 }
});}

ih_request.js

const request = require('request');
var ih_request = {};
module.exports = ih_request;
ih_request.postJson = async function (option) {
 var res = await request({
 url: option.url,
 method: 'post',
 headers: {
 'content-type': 'application/json'
 },
 body: JSON.stringify(option.body),
 }, function (err, res, body) {
 res ? option.success(body) : option.error(res.msg);
 console.log('MSGresult=', body);
 });
}

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
jQuery 瀑布流 绝对定位布局(二)(延迟AJAX加载图片)
May 23 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
浅谈JavaScript for循环 闭包
Jun 22 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 #jQuery
js打开word文档预览操作示例【不是下载】
May 23 #Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 #Javascript
判断js数据类型的函数实例详解
May 23 #Javascript
JS定义函数的几种常用方法小结
May 23 #Javascript
vue-test-utils初使用详解
May 23 #Javascript
了解前端理论:rscss和rsjs
May 23 #Javascript
You might like
为了这两部电子管收音机,买了6套全新电子管和10粒刻度盘灯泡
2021/03/02 无线电
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php xml 入门学习资料
2011/01/01 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
轻松实现php文件上传功能
2017/02/17 PHP
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
微信小程序登录态和检验注册过没的app.js写法
2019/05/22 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python 实现选择排序的算法步骤
2018/04/22 Python
深入浅析Python的类
2018/06/22 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Europcar美国/加拿大:预订汽车或卡车租赁服务
2018/11/13 全球购物
印度在线购买电子产品网站:Croma
2020/01/02 全球购物
毕业生自我鉴定
2013/12/04 职场文书
特色冷饮店创业计划书
2014/01/28 职场文书
保安队长职务说明书
2014/02/23 职场文书
商场主管竞聘书
2014/03/31 职场文书
个性车贴标语
2014/06/24 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
学生实习证明范文
2014/09/28 职场文书
2014年生产部工作总结
2014/12/17 职场文书
好人好事新闻稿
2015/07/17 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python