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


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选择器简明总结(含用法实例,一目了然)
Apr 25 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
jQuery实现大图轮播
Feb 13 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
Angular5中提取公共组件之radio list的实例代码
Jul 10 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 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
PHP 开发环境配置(Zend Studio)
2010/04/28 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
PHP数据库操作三:redis用法分析
2017/08/16 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery实现瀑布流布局
2014/12/12 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
基本DOM节点操作
2017/01/17 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
使用Python实现博客上进行自动翻页
2017/08/23 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
Selenium定位元素操作示例
2018/08/10 Python
Django model反向关联名称的方法
2018/12/15 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Python日志器使用方法及原理解析
2020/09/27 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
阿联酋手表和配饰购物网站:Rivolishop
2019/11/25 全球购物
运动会广播稿100字
2014/01/11 职场文书
学校三节实施方案
2014/06/09 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
2014年药房工作总结
2014/11/22 职场文书
拾金不昧感谢信
2015/01/21 职场文书
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
python 如何将两个实数矩阵合并为一个复数矩阵
2021/05/19 Python