小程序模板消息

轉載註明出處：www.xdxxdxxdx.com，或者加入java學習羣學習討論：481845043

有時候咱們須要從服務端推送一些消息到用戶的手機上，好比在用戶購買完之後，咱們發個消息告訴他購買成功，商家會盡快發貨。以下圖所示。

    有幾個須要注意的：

    1.小程序的模板消息是發送到微信的服務通知裏面的，而不像公衆號的模板消息，是直接依附於公衆號的。

    2.小程序的消息模板須要下發條件，確切的說，須要是在提交表單完之後獲得formid，或者在調起支付後獲得prepayId。一個formid能夠下發一條消息，一個prepayId能夠下發三條消息。而微信公衆號的模板消息不須要下發條件。

    在小程序中加入模板消息很簡單，只須要通過以下幾步，如今咱們以微信支付成功後的模板消息爲例來介紹實現方法。

一.申請消息模板

    直接在小程序後臺--》模板消息---》添加。就能夠選用想要的模板了，還能夠在模板裏自定義參數。非常方便。如下是我選定交易成功的模板。

二.獲取formId或者prepayId

    第二步就是獲取prepayId，或者若是你是在提交表單之後想要發送模板消息，則須要獲取formId。

    要獲取formId，首先要在form元素添加report-submit=true屬性，以下所示。

< form  bindsubmit = "submitInfo"  report-submit = 'true'  ></ form >

    而後在form表單提交事件中獲取到formId，以下所示。

submitInfo:  function  (e) {    console.log( 'GG 敵方軍團已贊成投降 4票同意 0票反對' )    console.log(e.detail.formId); },

    至於獲取prepayId,須要涉及到微信支付接口，會有專門文章來介紹，這邊就再也不贅述了。

三.調用sendTemplateMessage接口下發消息

    1.首先，咱們寫一個模塊類，讓各頁面來調用，主要就是調用服務端發送模板消息的方法。

    模塊類：templateMethod.js

const app = getApp(); const templateId = {    tradeTplId:  'UNgCJILBU6UIkrUEwoxyJDpN_SffcEhrfXlBlcsF0ww' , }   const template =  function  (name) {    return  templateId[name]; }   const send =  function  (SESSION, templateId, xcxOpenId, emphasisKeyword, page, prepayId, msgData, color) {    const _this =  this ;    wx.request({      method:  'POST' ,      url: app.domain + app.api.xcxTempleSendReq,      header: {        'content-type' : app.globalData.postHeader,        'Cookie' :  'JSESSIONID='  + SESSION +  ';SESSION='  + SESSION      },      data: {        page: page,        templateId: templateId,        xcxOpenId: xcxOpenId,        emphasisKeyword: emphasisKeyword,        prepayId: prepayId,        msgData: msgData,        color: color      },      success:  function  (res) {        console.log(res);      },      fail:  function  (res) {        console.log(res)      }    }) }   module.exports = {    send: send,    template: template }

    其實就是將sendTemplateMessage接口須要的各參數傳遞給服務端，讓服務端去調用sendTemplateMessage接口。其中xcxTempleSendReq所對應的服務端代碼以下。

public String xcxTempleSend() {          HttpServletRequest req = ServletActionContext.getRequest();          String openId = req.getParameter( "xcxOpenId" );          String templateId = req.getParameter( "templateId" );          String page = req.getParameter( "page" );          String sceneID = req.getParameter( "prepayId" );          String msgData = req.getParameter( "msgData" );          String color = req.getParameter( "color" );          String emphasisKeyword = req.getParameter( "emphasisKeyword" );          String result = wxService.xcxSendTemplate(openId, templateId, page,                  sceneID, msgData, color, emphasisKeyword);          OutPutMsg.outPutMsg(result.toString());          return  null ;      }

xcxSendTemplate的代碼以下：

public String xcxSendTemplate(String openId, String templateId,              String page, String sceneID, String msgData, String color,              String emphasisKeyword) {          System.err.println( "發送訂單消息模板" );          String access_token =  "" ;          if  (redisDao.get( "xcx_access_token" ) !=  null ) {              access_token = redisDao.get( "xcx_access_token" );          }  else  {              String tokenStr = CommonUtil                      .getTokenByUrl(ConfigUtil.XCX_TOKEN_URL);              JSONObject tokeJson = JSONObject.fromObject(tokenStr);              access_token = tokeJson.getString( "access_token" );          }          String template =  "https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token="                  + access_token +  "&type=wx_card" ;          Map<String, String> pmMap =  new  HashMap<String, String>();          pmMap.put( "touser" , openId);          pmMap.put( "template_id" , templateId);          pmMap.put( "page" , page);          System.err.println(page);          pmMap.put( "form_id" , sceneID);          pmMap.put( "data" ,  "msgData" );          pmMap.put( "emphasis_keyword" , emphasisKeyword);          pmMap.put( "color" , color);          String pmStr = JSON.toJSONString(pmMap).replaceAll( "\"msgData\"" ,                  msgData);          String sendResult = CommonUtil.httpsRequest(template,  "POST" , pmStr);          System.err.println(sendResult);          return  sendResult;      }

    咱們這邊的策略是從redis中去獲取小程序的access_token。而後組裝各參數，最後調用sendTemplateMessage接口以發送消息。

    最後再看看頁面如何調用模塊類的方法來發送消息的吧。

    首先，引入模塊類

const templateMethod = require(app.resource.util.templateMethod);

    而後，封裝好參數，直接調用templateMethod 暴露出來的send方法，以下：

templateMethod.send(_this.data.userInfo.SESSION, templateMethod.template( 'tradeTplId' ), _this.data.userInfo.wechatUser.xcxOpenId,  'keyword3.DATA' , pageUrl, payJson.package.split( '=' )[1], _this.generateMsgData(),  '' );

其中templateMethod.template('tradeTplId')一樣是調用templateMethod 的template方法獲取該交易成功模板的模板Id.emphasisKeyword 表示的是強調突出的參數，這邊是keyword3.DATA，也就是第三個參數，表示支付金額。這個參數將會被放大放在顯眼位置，如文章剛開始的圖片所示。pageUrl是用戶點擊該模板消息通知須要跳轉的頁面。這邊咱們傳遞的參數是用戶訂單列表頁。payJson.package.split('=')[1]是獲取到了prepayId，_this.generateMsgData()是組裝模板內容的方法。其具體的實現以下。

generateMsgData:  function  () {      const _this =  this ;      const tips =  '本次支付採用微信支付方式並在小程序《逸品生活NNWN》上進行支付-點擊打開小程序，查看訂單！' ;      const note =  '僅做通知提醒使用，不成爲支付或報銷之依據！' ;      const msgData = {};      msgData.keyword1 = {        value: _this.data.orderIdArray.join( '、' ),        color:  '#173177'      }      msgData.keyword2 = {        value: _this.data.subject,        color:  '#173177'      }      msgData.keyword3 = {        value: _this.data.total,        color:  '#173177'      }      msgData.keyword4 = {        value: tips,        color:  '#173177'      }      msgData.keyword5 = {        value: note,        color:  '#173177'      }        return  JSON.stringify(msgData)    }

    自此，整個模板消息發送的要點都講完了。

    PS:

    1.本文講的方法對不少地方作了一些封裝，因此看起來感受很麻煩。好比採用redis存儲access_token；在小程序端封裝templateMethod模塊方法，給其餘頁面調用；還有就是封裝generateMsgData(）方法來組裝模板內容。讀者只須要知道大概的流程就能夠，至於如何去傳參，是在客戶端封裝參數仍是在服務端封裝參數，能夠自行決定。

    2.獲取到prepayId後，咱們可將其存儲起來，跟客戶或者訂單相關聯，當訂單發貨的時候，再次使用這個prepayId進行發貨通知。