【小程序】如何实现消息推送之收集推送码

当订单状态变更时，小程序如何实现消息推送来通知到用户呢。微信开放了一个叫模板消息的功能。

https://developers.weixin.qq.com/miniprogram/dev/api/notice.html#%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E

要实现消息推送，分三步走

一、前期配置工作

登录小程序的官方管理后台https://mp.weixin.qq.com/根据自己的需求配置自己的模板消息

二、前端工作

要实现推送消息给用户，就要有推送码，官方API介绍提交一次表单有一次推送机会，完成一次支付行为有三次推送机会（这些机会均在七天后过期）

前端要实现的工作就是收集推送码传给后台，后台将推送码进行存储。有了推送码，在订单状态变更时，后台就能使用推送码进行消息推送通知用户。

那么，前端如何实现呢。

官方API写到：页面的 <form/> 组件，属性report-submit为true时，可以声明为需发模板消息，此时点击按钮提交表单可以获取formId，用于发送模板消息。或者当用户完成支付行为，可以获取prepay_id用于发送模板消息。

这个时候我们可以收集小程序表单的formId（即‘推送码’）

很简单，封装一个收集推送码的方法collectFormIds，和一个上传推送码至后台的方法uploadFormIds。

2.1 collectFormIds:将拿到的formId存储到全局数据formIds中

import wepy from 'wepy'
export function collectFormIds(formId){
  let formIds = wepy.$instance.globalData.formIds;
  if (!formIds) {
    formIds = [];
  }
  let data = {
    formId:formId,
    expire:new Date().getTime() + 60480000
  };
  formIds.push(data);
  wepy.$instance.globalData.formIds = formIds;
}

2.2 uploadFormIds：检查全局数据formIds是否为空，不是则上传收集到的推送码给后台并清空数组。

注意：global是我自己封装好的通用请求方法。相当于wx.request

export function uploadFormIds(){
  let formIds = wepy.$instance.globalData.formIds;
  if (formIds.length!=0) {
    wepy.$instance.globalData.formIds = [];
    return new Promise((resolve, reject) => {
      global.post('******',{
        formIds:formIds
      },function(res){
        resolve(res);
      },function(err){
        resolve(false);
      });
    });
  }
  return;
}

封装好这两个方法后，接下来的疑问就是在什么地方使用这两个方法。

2.3 找到页面的form组件，将form组件的report-submit属性设置为true，在bindsubmit事件中取到e.detail.formId，将其搜集起来

<form report-submit='true' bindsubmit='bindsubmit'>
    ...........
    <button form-type='submit'>按钮</button>
    ...........
</form>

import {collectFormIds} from '@/global/common'
.....

bindsubmit(e){
   .......
   collectFormIds(e.detail.formId);
   ......
}

而上传推送码uploadFormIds，可以根据个人需要决定在什么时候调用

2.4 因为我封装了全局通用请求函数global，所以我在get方法中调用。每当有get请求时，都会去检查有没有收集到的推送码，有的话就上传至后台并清空推送码数组，没有收集到的话则不需要上传。

import {uploadFormIds} from './common'
export const global = {
  get:function(url,data,successCb,errorCb){
    .......
    uploadFormIds();
  },
  post:function(url,data,successCb,errorCb){
    ...
  },
  delete:function(url,data,successCb,errorCb){
    ...
  },
  put:function(url,data,successCb,errorCb){
    ...
  },
  .......
}

做好这些工作后，以后只要有表单需要collect就调用collectFormIds（即进行2.3的操作），不需要去管什么时候上传推送码。因为只有页面有get请求都会自动检查是否上传收集到的推送码。

三、后台工作

后台只需要写两个接口

一个存储推送码的接口

一个下发模板消息的接口

至于如何发送模板消息，详情见官方API的发送模板消息教程

https://developers.weixin.qq.com/miniprogram/dev/api/notice.html#%E6%A8%A1%E7%89%88%E6%B6%88%E6%81%AF%E7%AE%A1%E7%90%86

注意：小程序模板消息不能滥用哦。

好想涨粉啊 T.T

【小程序】如何实现消息推送之收集推送码

猜你喜欢