當訂單狀態變更時，小程式如何實現訊息推送來通知到使用者呢。微信開放了一個叫模板訊息的功能。 

要實現訊息推送，分三步走

一、前期配置工作

二、前端工作

要實現推送訊息給使用者，就要有推送碼，官方API介紹提交一次表單有一次推送機會，完成一次支付行為有三次推送機會（這些機會均在七天後過期）

前端要實現的工作就是收集推送碼傳給後臺，後臺將推送碼進行儲存。有了推送碼，在訂單狀態變更時，後臺就能使用推送碼進行訊息推送通知使用者。

那麼，前端如何實現呢。

官方API寫到：頁面的 <form/> 元件，屬性report-submit為true時，可以宣告為需發模板訊息，此時點選按鈕提交表單可以獲取formId

這個時候我們可以收集小程式表單的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的傳送模板訊息教程

注意：小程式模板訊息不能濫用哦。

好想漲粉啊 T.T