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


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 相关文章推荐
IE下js调试工具Companion.JS
Oct 15 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
Jquery结合HTML5实现文件上传
Jun 25 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
Jun 11 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
vuejs实现本地数据的筛选分页功能思路详解
Nov 15 Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 Javascript
vue基础之模板和过滤器用法实例分析
Mar 12 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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
THinkPHP获取客户端IP与IP地址查询的方法
2016/11/14 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
2012/02/03 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
实现ECharts双Y轴左右刻度线一致的例子
2020/05/16 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
python与js主要区别点总结
2020/09/13 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
HTML5中meta属性的使用方法
2016/02/29 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
Wedgwood美国官网:英国骨瓷,精美礼品及家居装饰
2018/02/17 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
酒吧创业计划书
2014/01/18 职场文书
医院检讨书范文
2014/02/01 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
2015大学迎新晚会策划书
2015/07/16 职场文书
Python Django ORM连表正反操作技巧
2021/06/13 Python
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android