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


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 相关文章推荐
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
浅谈Vuejs中nextTick()异步更新队列源码解析
Dec 31 Javascript
webpack多入口文件页面打包配置详解
Jan 09 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 Javascript
JavaScript正则表达式验证登录实例
Mar 18 Javascript
深入了解JavaScript词法作用域
Jul 29 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
区分vue-router的hash和history模式
Oct 03 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
2个Codeigniter文件批量上传控制器写法例子
2014/07/25 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
IE autocomplete internet explorer's autocomplete
2007/06/30 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
javascript用rem来做响应式开发
2018/01/13 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
ionic使用angularjs表单验证(模板验证)
2018/12/12 Javascript
微信小程序实现元素渐入渐出动画效果封装方法
2019/05/18 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
在Python中处理日期和时间的基本知识点整理汇总
2015/05/22 Python
python处理二进制数据的方法
2015/06/03 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python实现教务管理系统
2018/03/12 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
如何基于Python创建目录文件夹
2019/12/31 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
python 6种方法实现单例模式
2020/12/15 Python
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
个人四风问题整改措施
2014/10/24 职场文书
文员岗位职责
2015/02/04 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
python缺失值填充方法示例代码
2022/12/24 Python