小程序怎樣實(shí)現(xiàn)模板消息發(fā)送的功能

這篇文章主要介紹小程序怎樣實(shí)現(xiàn)模板消息發(fā)送的功能 ，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

小程序中為了體現(xiàn)友好交互，是不可能會(huì)少掉消息通知的，納悶我們?cè)撊绾螌?shí)現(xiàn)模板消息發(fā)送

背景

- 小程序開發(fā)的過程中，絕大多數(shù)會(huì)滿足微信支付
- 那么，作為友好交互的體現(xiàn)，自然就會(huì)考慮到支付后的消息通知咯
- 所以，我的小程序項(xiàng)目也要求完成這個(gè)效果，so.分享一下自己的實(shí)現(xiàn)步驟，以方便道友們少踩點(diǎn)坑...

• 微信消息通知 的區(qū)別：

1、微信網(wǎng)頁版、公眾號(hào)的消息提醒
  要求用戶必須 "關(guān)注商家公眾號(hào)"，才支持消息的接收
  并且還有個(gè)奇怪的毛?。喝绻趦?nèi)未與該公眾號(hào)有所交流，依然收不到消息提醒
  再者，消息的樣式需代碼進(jìn)行自定義(麻煩)2. 微信小程序，可支持"服務(wù)通知"
  只需配置好自己的 "模板消息"，通過獲取用戶的 "openid" 即可進(jìn)行來自微信服務(wù)的消息
  通知的樣式，可在小程序的管理后臺(tái)進(jìn)行選取，預(yù)覽(人性化)

• 此處參考京東購物的消息通知如下（也就是在下想要實(shí)現(xiàn)的效果）

前期準(zhǔn)備

• ①. 首先，微信小程序官方文檔為我們提供了指導(dǎo) — 【發(fā)送模板消息】

  我們可以先對(duì)文檔進(jìn)行一遍 簡單的瀏覽，以方便自己的流程理解，避免蒙頭蒼蠅亂撞

• ②. 小程序給與了我們最方便的手動(dòng)模板配置方式

• 我們可以先去 1（模板庫）中選取自己需要的模板，自定義標(biāo)題、排序

• 申請(qǐng)成功之后，進(jìn)入 2（我的模板）中就可以看到自己能夠使用的模板，我們后期進(jìn)行代碼編輯時(shí)，用到的就是那個(gè)模板ID

  

  
  

實(shí)現(xiàn)步驟

• 此處，主要以 <form/> 組件形式的實(shí)現(xiàn)為例，對(duì)于prepay_id 的實(shí)現(xiàn)請(qǐng)參考文末的 附錄

1. 小程序端的要求

語境：微信支付成功后，對(duì)用戶發(fā)送一條"訂單支付成功通知"的模板消息

• 第一步：以我的代碼實(shí)現(xiàn)為例，首先需要對(duì)我的 <form/> 組件進(jìn)行需發(fā)模板消息的聲明，即設(shè)置屬性 report-submit="true"
  

• 第二步：對(duì)應(yīng)的 pages/cart/payment.js代碼中，編寫的提交代碼，以及對(duì) event參數(shù)打印的結(jié)果則為：
  

• 注意：截圖部分只是為了，獲取并保存我們需要的 formId，

• 其實(shí)，后面的代碼還可以有很多的邏輯處理，以我的代碼邏輯為例：

• 我繼續(xù)進(jìn)行了表單數(shù)據(jù)的規(guī)范驗(yàn)證 -> wx.request 數(shù)據(jù)提交 -> 喚醒微信支付 -> 支付結(jié)果的回調(diào)處理

• 第三步：request 調(diào)用發(fā)送消息通知的方法

• 以我的邏輯為例，是在執(zhí)行完微信支付回調(diào)后，判斷支付成功才進(jìn)行調(diào)用的



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

 /**
   * 微信支付成功后的 消息模板的發(fā)送
   */
  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 函數(shù)，默認(rèn)‘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) {        //回調(diào)處理
        return typeof httpCallBack == "function" && httpCallBack(res.data);
      },
      fail: function (error) {
        console.log(error);
      }
    })
  },

2. 服務(wù)端代碼配置

• 我對(duì)服務(wù)端的代碼，整合集中在了一個(gè)文件中，可從附錄中進(jìn)行下載

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

• 第二步：修改方法 sendTemplatePaySuccess()
  

• 提示：

• 1.此方法是對(duì)應(yīng)于 pages/cart/payment.js 中的 Https://xxx.com/wx/sendTemplatePaySuccess，應(yīng)該不會(huì)理解錯(cuò)吧！

• 2.一般的設(shè)計(jì)邏輯，是在用戶注冊(cè)、初次授權(quán)登錄的時(shí)候就將其 openid寫到數(shù)據(jù)庫中，后期使用時(shí)可隨時(shí)調(diào)用

• 3.如果前期沒有寫入數(shù)據(jù)庫，也可以考慮直接授權(quán)獲取，參考文章 【微信小程序Ⅴ [獲取登錄用戶信息，重點(diǎn)openID(詳解)】]

• 4.template_id 直接在小程序賬號(hào)后臺(tái)復(fù)制即可，但是請(qǐng)將 $rawPost['data']['keyword?']['value'] 順序?qū)?yīng)正確哦

3. 運(yùn)行測(cè)試

• ①. 首先，要 特別注意 一點(diǎn)，不可以使用 微信開發(fā)者工具進(jìn)行測(cè)試，不然會(huì)有如下報(bào)錯(cuò)：
  

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

• ②. 并且，如果已經(jīng)發(fā)送過一次模板消息，會(huì)有如下提示信息：

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

4.附錄

A. 補(bǔ)充信息

• 開發(fā)文檔中有這樣一句話：

• 值得注意：

第一點(diǎn)：
    使用 "<form/>" 組件
    獲得的 "formId" 只能使用一次
    相對(duì)適合的通知業(yè)務(wù) —— 支付成功或失敗后，充值成功、 續(xù)費(fèi)成功、掛號(hào)成功等被動(dòng)響應(yīng)的信息...第二點(diǎn)：    "prepay_id" 只有進(jìn)行了支付行為才能獲得，并且必須支付成功！
    一個(gè) "prepay_id" 可以使用三次
    相對(duì)適合的通知業(yè)務(wù)有 —— 后臺(tái)發(fā)貨提醒、審核通知、課程開班提醒、拼團(tuán)成功通知等主動(dòng)推送的信息...第三點(diǎn)：
    prepay_id 使用時(shí)的報(bào)錯(cuò)信息：

    //# 如果支付不成功，但是要使用獲得的 prepay_id，會(huì)有如下類似的信息
    {"data":
        {"errcode":41028,"errmsg":"invalid form id hint: [XiZ04574125]"}
    }

    //# 如果支付成功，使用獲得的 prepay_id 次數(shù)超過了三次，會(huì)有如下的信息:
    {"data":
        {"errcode":41029,"errmsg":"form id used count reach limit hint: [oFN1Aa08963936]"}
    }

B. 后臺(tái)發(fā)貨通知的設(shè)計(jì)思路

1. 首先，我們?cè)跀?shù)據(jù)表設(shè)計(jì)時(shí)，對(duì)于訂單表需要有一個(gè)存儲(chǔ)微信支付后 "prepay_id"的存儲(chǔ)字段    

2. 進(jìn)行微信支付時(shí)，將生成的 "prepay_id" 存到數(shù)據(jù)表中    

3. 當(dāng)對(duì)已支付訂單進(jìn)行后臺(tái)發(fā)貨操作時(shí)，調(diào)用的通知模板，使用前面數(shù)據(jù)表中的 "prepay_id" 數(shù)據(jù)    

4. 其他的服務(wù)端代碼設(shè)計(jì) 同上文中的 "sendTemplatePaySuccess()" 方法

• 溫馨提示：
  

  畢竟存放的 "prepay_id" 最多只用使用三次，所以對(duì)于項(xiàng)目設(shè)計(jì)中的使用位置要做好規(guī)劃 !!!

C. 使用真機(jī)測(cè)試，順利運(yùn)行的效果為：

D. Access_Token 建議

官方文檔 - 獲取 access_token

• 代碼中，所必須涉及到的業(yè)務(wù) —— access_token 的獲取，請(qǐng)參考文檔介紹，進(jìn)行定時(shí)刷新，以避免不必要的資源請(qǐng)求

• 個(gè)人的思路就是，創(chuàng)建數(shù)據(jù)表字段，根據(jù)其返回的時(shí)長 expires_in，在失效前保存數(shù)據(jù) access_token

• 可根據(jù)自己的實(shí)際需求，優(yōu)化小編提供的 opGetAccessToken() 方法！

• 有一點(diǎn)，或許很多人不多加注意：

當(dāng)項(xiàng)目已上線，如果你線下依舊測(cè)試使用了獲取 "access_token" 的操作，這會(huì)影響線上服務(wù)的！
   因?yàn)?，一旦重新獲取了 "access_token" 信息，微信服務(wù)器便會(huì)在短時(shí)間內(nèi)，對(duì)之前的 "access_token" 進(jìn)行失效處理
   建議，可以考慮在線下直接使用線上獲得的 "access_token"，不要隨意去刷新請(qǐng)求獲取，影響大局就尷尬了...

以上是“小程序怎樣實(shí)現(xiàn)模板消息發(fā)送的功能 ”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！