微信小程序 發送模板消息的功能實現

背景

- 小程序開發的過程當中，絕大多數會知足微信支付
- 那麼，做爲友好交互的體現，天然就會考慮到支付後的消息通知咯
- 因此，個人小程序項目也要求完成這個效果，so.分享一下本身的實現步驟，以方便道友們少踩點坑...

微信消息通知的區別：

1. 微信網頁版、公衆號的消息提醒
   要求用戶必須 "關注商家公衆號"，才支持消息的接收
   而且還有個奇怪的毛病：若是近期內未與該公衆號有所交流，依然收不到消息提醒
   再者，消息的樣式需代碼進行自定義(麻煩)
2. 微信小程序，可支持"服務通知"
   只需配置好本身的 "模板消息"，經過獲取用戶的 "openid" 便可進行來自微信服務的消息
   通知的樣式，可在小程序的管理後臺進行選取，預覽(人性化)

此處參考京東購物的消息通知以下（也就是在下想要實現的效果）：

前期準備

首先，微信小程序官方文檔爲咱們提供了指導 — 【發送模板消息】

咱們能夠先對文檔進行一遍 簡單的瀏覽，以方便本身的流程理解，避免矇頭蒼蠅亂撞

小程序給與了咱們最方便的手動模板配置方式

咱們能夠先去 1（模板庫）中選取本身須要的模板，自定義標題、排序
申請成功以後，進入 2（個人模板）中就能夠看到本身可以使用的模板，咱們後期進行代碼編輯時，用到的就是那個模板ID

實現步驟

此處，主要以 <form/> 組件形式的實現爲例，對於prepay_id 的實現請參考文末的 附錄

小程序端的要求

語境：微信支付成功後，對用戶發送一條"訂單支付成功通知"的模板消息

第一步：以個人代碼實現爲例，首先須要對個人 <form/> 組件進行需發模板消息的聲明，即設置屬性 report-submit="true"（【我的建議，請使用真機測試，不排除部分使用開發工具沒法獲取 form_id 的狀況】）

 第二步：對應的 pages/cart/payment.js代碼中，編寫的提交代碼，以及對 event參數打印的結果則爲：

注意：截圖部分只是爲了，獲取並保存咱們須要的 formId

> - 其實，後面的代碼還能夠有不少的邏輯處理，以個人代碼邏輯爲例：
> - 我繼續進行了表單數據的規範驗證 -> wx.request 數據提交 -> 喚醒微信支付 -> 支付結果的回調處理

第三步：request 調用發送消息通知的方法

以個人邏輯爲例，是在執行完微信支付回調後，判斷支付成功才進行調用的

此處，直接提供上述截圖中 pages/cart/payment.js 所須要用到的兩個核心方法

 代碼以下：

 /**
   * 微信支付成功後的 消息模板的發送
   */
  sendTemplatePaySuccess: function() {
    var self = this;
    var postData = {
      sn: self.data.order_sn,
      form_id: self.data.formId
    };
    self.http_post('https://xxx.com/wx/sendTemplatePaySuccess', postData, (data) => {
      wx.navigateTo({
        url: '/pages/cart/results/index?status=1&type=pay&orderInfo=' + JSON.stringify(self.data.orderInfo),
      });
    })
  },
  
 /**
 * 封裝 http 函數，默認‘GET’ 提交
 */
   http_post:function(toUrl, postData, httpCallBack) {
    wx.request({
      url:  toUrl,
      data: postData,
      method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      header: {
        'content-type': 'application/x-www-form-urlencoded;charset=utf-8',
      },
      success: function (res) {
        //回調處理
        return typeof httpCallBack == "function" && httpCallBack(res.data);
      },
      fail: function (error) {
        console.log(error);
      }
    })
  },

服務端代碼配置

我對服務端的代碼，整合集中在了一個文件中，可從附錄中進行下載

第一步：替換小程序配置信息

 第二步：修改方法 sendTemplatePaySuccess()

 提示：

>  1.此方法是對應於 pages/cart/payment.js 中的 "Https://xxx.com/wx/sendTemplatePaySuccess"，應該不會理解錯吧！
>  2.通常的設計邏輯，是在用戶註冊、初次受權登陸的時候就將其 openid 寫到數據庫中，後期使用時可隨時調用
>  3.若是前期沒有寫入數據庫，也能夠考慮直接受權獲取，參考文章 [【微信小程序Ⅴ [獲取登陸用戶信息，重點openID(詳解)】]](https://blog.csdn.net/u011415782/article/details/79559639)
>  4.template_id 直接在小程序帳號後臺複製便可，可是請將 $rawPost['data']['keyword?']['value'] 順序對應正確哦

運行測試

①. 首先，要 特別注意 一點，不可使用 微信開發者工具進行測試，否則會有以下報錯：

 可參考道友解釋： 小程序 表單 formId 爲 the formId is a mock one

②. 而且，若是已經發送過一次模板消息，會有以下提示信息：

//#這說明，你的formid 已經用過了，系統要求只能使用一次！！！
{
	"status":0,"result":"sendTemplatePaySuccess Failed!",
	"data":
		{
			"errcode":41029,"errmsg":"form id used count reach limit hint: [9mUwja01342277]"
		}
}

附錄

A. 補充信息

開發文檔中有這樣一句話：

值得注意：

第一點：
	使用 "<form/>" 組件
	得到的 "formId" 只能使用一次
	相對適合的通知業務 —— 支付成功或失敗後，充值成功、	續費成功、掛號成功等被動響應的信息...

第二點：
	"prepay_id" 只有進行了支付行爲才能得到，而且必須支付成功！
	一個 "prepay_id" 可使用三次
	相對適合的通知業務有 —— 後臺發貨提醒、審覈通知、課程開班提醒、拼團成功通知等主動推送的信息...

第三點：
	prepay_id 使用時的報錯信息：

	//# 若是支付不成功，可是要使用得到的 prepay_id，會有以下相似的信息
	{"data":
		{"errcode":41028,"errmsg":"invalid form id hint: [XiZ04574125]"}
	}
	
	//# 若是支付成功，使用得到的 prepay_id 次數超過了三次，會有以下的信息:
	{"data":
		{"errcode":41029,"errmsg":"form id used count reach limit hint: [oFN1Aa08963936]"}
	}

B. 後臺發貨通知的設計思路

	1. 首先，咱們在數據表設計時，對於訂單表須要有一個存儲微信支付後 "prepay_id"的存儲字段
	2. 進行微信支付時，將生成的 "prepay_id" 存到數據表中
	3. 當對已支付訂單進行後臺發貨操做時，調用的通知模板，使用前面數據表中的 "prepay_id" 數據
	4. 其餘的服務端代碼設計 同上文中的 "sendTemplatePaySuccess()" 方法

舒適提示：

畢竟存放的 "prepay_id" 最多隻用使用三次，因此對於項目設計中的使用位置要作好規劃 !!!

C. 使用真機測試，順利運行的效果爲：

D. Access_Token 建議

官方文檔 - 獲取 access_token

• 代碼中，所必須涉及到的業務 —— access_token 的獲取，請參考文檔介紹，進行定時刷新，以免沒必要要的資源請求
• 我的的思路就是，建立數據表字段，根據其返回的時長 expires_in，在失效前保存數據 access_token
• 可根據本身的實際需求，優化小編提供的 opGetAccessToken() 方法！
• 有一點，或許不少人很少加註意：

	當項目已上線，若是你線下依舊測試使用了獲取 "access_token" 的操做，這會影響線上服務的！
	由於，一旦從新獲取了 "access_token" 信息，微信服務器便會在短期內，對以前的 "access_token" 進行失效處理
	建議，能夠考慮在線下直接使用線上得到的 "access_token"，不要隨意去刷新請求獲取，影響大局就尷尬了...

❺. 源代碼參考

• 請對應代碼進行正確配置哦

• CSDN下載地址 >>>
• GitHub下載地址 >>>

轉載於：https://blog.csdn.net/u011415782/article/details/82379590