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


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 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
javascript原型继承工作原理和实例详解
Apr 07 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
webpack的pitching loader详解
Sep 23 Javascript
JavaScript单线程和任务队列原理解析
Feb 04 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
谨慎使用PHP的引用原因分析
2012/09/06 PHP
php 参数过滤、数据过滤详解
2015/10/26 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
浅析Javascript匿名函数与自执行函数
2016/02/06 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
2017/10/19 jQuery
layui使用label标签的方法
2019/09/14 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
Python群发邮件实例代码
2014/01/03 Python
python中正则表达式的使用详解
2014/10/17 Python
Python的randrange()方法使用教程
2015/05/15 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
python 编写简单网页服务器的实例
2018/06/01 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
什么是命名空间(NameSpace)
2015/11/24 面试题
销售高级职员求职信
2013/10/29 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
python调试工具Birdseye的使用教程
2021/05/25 Python
如何使用分区处理MySQL的亿级数据优化
2021/06/18 MySQL