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


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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
div+css布局的图片连续滚动js实现代码
May 04 Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
jQuery实现长文字部分显示代码
May 13 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
javascript常用函数(1)
Nov 04 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
AngulerJS学习之按需动态加载文件
Feb 13 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
原生js生成图片验证码
Oct 11 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
简单易用的计数器(数据库)
2006/10/09 PHP
php expects parameter 1 to be resource, array given 错误
2011/03/23 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
PHP删除HTMl标签的实现代码
2013/06/30 PHP
php创建、获取cookie及基础要点分析
2015/01/26 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
目前流行的JavaScript库的介绍及对比
2013/09/29 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
2015/12/31 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
2018/08/01 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
详解Bootstrap 学习(一)入门
2019/04/12 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python的消息队列包SnakeMQ使用初探
2016/06/29 Python
Python中运算符&quot;==&quot;和&quot;is&quot;的详解
2016/10/08 Python
python logging 日志的级别调整方式
2020/02/21 Python
打架检讨书2000字
2014/02/22 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
食品质检员岗位职责
2015/04/08 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
Python实现单例模式的5种方法
2021/06/15 Python
SpringBoot快速入门详解
2021/07/21 Java/Android