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


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 相关文章推荐
SharePoint 客户端对象模型 (一) ECMA Script
May 22 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
解析JavaScript的ES6版本中的解构赋值
Jul 28 Javascript
javascript实现动态标签云
Oct 16 Javascript
js 创建对象 经典模式全面了解
Aug 16 Javascript
angularJs中datatable实现代码
Jun 03 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
Dec 03 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
webpack的tree shaking的实现方法
Sep 18 Javascript
JS实现音量控制拖动
Jan 15 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
laravel 之 Eloquent 模型修改器和序列化示例
2019/10/17 PHP
JS类中定义原型方法的两种实现的区别
2007/03/08 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
javascript入门基础之私有变量
2010/02/23 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
2017/01/03 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
vue router的基本使用和配置教程
2018/11/05 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
跟老齐学Python之网站的结构
2014/10/24 Python
python获取url的返回信息方法
2018/12/17 Python
Python之时间和日期使用小结
2019/02/14 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
欧缇丽美国官网:Caudalie美国
2016/12/31 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
我的梦想演讲稿1000字
2014/08/21 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
失恋33天观后感
2015/06/11 职场文书
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
TV动画《神废柴☆偶像》公布先导PV
2022/03/20 日漫
app场景下uniapp的扫码记录
2022/07/23 Java/Android