前段時(shí)間剁手了 PS4,在瀏覽商店時(shí)，發(fā)現(xiàn)官方商店真的不好用，主要是網(wǎng)絡(luò)原因，次要是頁(yè)面設(shè)計(jì)。所以就想自己做一個(gè)游戲查詢的小程序，可以關(guān)注某個(gè)游戲，然后在這個(gè)游戲打折的時(shí)候發(fā)送通知給用戶。最后發(fā)現(xiàn)有個(gè)很大的問(wèn)題是：小程序沒(méi)法直接給用戶推送消息（當(dāng)時(shí)還不知道模板消息），服務(wù)號(hào)才能。然后就用郵箱實(shí)現(xiàn)了通知功能，但是郵箱的局限實(shí)在是太大了（各大免費(fèi)郵箱每天的發(fā)件數(shù)都很小，自己搭建的郵件服務(wù)器雖然沒(méi)有發(fā)件限制，但是大概率會(huì)被放到垃圾箱）。

然后某天在微信小程序的管理后臺(tái)發(fā)現(xiàn)了模板消息這個(gè)東西，查了會(huì)資料發(fā)現(xiàn)可以通過(guò)這個(gè)來(lái)實(shí)現(xiàn)消息推送。要給用戶發(fā)送模板消息需要 formId/prepay_id 這樣一個(gè)東西，這個(gè)東西是怎么來(lái)的呢？

• formId:這個(gè)可以通過(guò)表單的提交來(lái)獲取，需要在組件中設(shè)置屬性 report-submit="true" ,這樣每次對(duì)這個(gè)表單的提交一次就會(huì)產(chǎn)生一個(gè) formId.
• prepay_id:這個(gè)是支付動(dòng)作產(chǎn)生的，具體的我也不太清楚，畢竟個(gè)人小程序并不能支付.

下面具體來(lái)講講前后臺(tái)的實(shí)現(xiàn)，前臺(tái)使用 mpvue，后臺(tái)使用 java

前臺(tái)獲取 formId

既然可以通過(guò) form 的 submit 操作來(lái)獲取到 formId,那我們稍微拓展一下，將我們的小程序頁(yè)面中所有用戶能點(diǎn)擊的部分都用 form,button 來(lái)包裹一下，這樣用戶感知不到有表單提交操作，我們也能獲取大量的 formId。

注意不能用疊加的方式來(lái)一次點(diǎn)擊獲取多個(gè) formId,這樣方法已經(jīng)不行了，獲取到的都會(huì)是一樣的。

獲取一個(gè)模板

要發(fā)送模板消息，首先要在小程序的管理后臺(tái)上添加模板，步驟如下：

1.在模板庫(kù)中選擇一個(gè)模板

2.選擇顯示參數(shù)

選擇要顯示在消息中的參數(shù)，這里選擇如下兩個(gè)參數(shù)：

這樣就有了一個(gè)模板可以用來(lái)發(fā)消息了，在我的模板中可以看到模板 id，和字段 id

獲取 formId

formId 是通過(guò)表單提交來(lái)獲取到了，為了獲取足夠多的 formId,可以將能夠點(diǎn)擊的組件（比如按鈕，列表單元..）包裹在 form 中，這樣用戶在日常使用中就能夠收集到足夠多的 formId。下面以包裹一個(gè)有贊的按鈕為例。因?yàn)樾〕绦虻南拗?，設(shè)置 form-type 屬性的按鈕必須為 form 組件的直接子節(jié)點(diǎn)，所以并不能夠在 form 中使用自定義組件，并將 form-type='submit' 設(shè)置到自定義組件中。

template 部分如下：

<!-- 要獲取formId，需要給form設(shè)置report-submit="true"的屬性，然后在form-type="submit"的按鈕上產(chǎn)生點(diǎn)擊動(dòng)作，才會(huì)觸發(fā)表單提交的事件--formSubmit,進(jìn)而獲取到formId -->
<form @submit="formSubmit" report-submit="true" class="bottom">
 <button style="border:0;display:inline-block" plain="true" form-type="submit" @click="back">
  <van-button round type="primary" size="small" @click="back">返回</van-button>
 </button>
 <button style="border:0;display:inline-block" plain="true" form-type="submit" @click="watchGame">
  <van-button round type="danger" size="small">{{watchText}}</van-button>
 </button>
 <button style="border:0;display:inline-block" plain="true" form-type="submit" open-type="share">
  <van-button round type="info" size="small">分享</van-button>
 </button>
</form>

style 目的為了去除原生 button 的背景，邊框啥的，把 button 當(dāng)一個(gè) div 來(lái)使用，然后在 button 中設(shè)置 form-type 和 click 屬性,這樣既不影響 formId 的屬性，也對(duì)原有邏輯不產(chǎn)生任何影響。之所以將 click 放在 button 上是因?yàn)?button 內(nèi)部的組件沒(méi)法獲取到點(diǎn)擊事件。

formSubmit 代碼如下：

formSubmit(e) {
 let item = {
  value: e.mp.detail.formId,
  expireTime: Date.now() + 7 * 24 * 60 * 60 * 1000
 };
 this.globalData.formIdList.push(item);
},

該函數(shù)是在表單提交時(shí)觸發(fā)，用于獲取 formId,將 formId 和這個(gè) formId 的過(guò)期時(shí)間一起存到 globalData 全局?jǐn)?shù)據(jù)中。然后找一個(gè)時(shí)機(jī)將這些 formId 發(fā)送給服務(wù)器保存起來(lái)就行了。

這里放上我的做法以供參考。

我是在每次發(fā)送 http 請(qǐng)求前檢查是不是有 formId 需要發(fā)送到服務(wù)器，如果有就將這些數(shù)據(jù) JSON 序列化后放到一個(gè)自定義 header 中，發(fā)送出去，具體代碼如下(http 請(qǐng)求工具為：flyio)：

var Fly = require("flyio/dist/npm/wx");
var fly = new Fly();
//在請(qǐng)求預(yù)處理中
fly.interceptors.request.use(request => {
 request.headers["jwt-token"] = wxUtil.getGlobalData("jwt-token");
 //如果有formId就放到header里送過(guò)去
 let formIdList = getApp().globalData.formIdList;
 if (formIdList.length > 0) {
  request.headers["formIdList"] = JSON.stringify(formIdList);
  getApp().globalData.formIdList = [];
 }
 if (request.method == "GET") {
  request.params["_t"] = new Date().getTime();
 }
 return request;
});

下面將后臺(tái)的實(shí)現(xiàn)，基于 Spring Boot.

后臺(tái)處理

搜集 formId

首先需要把 formId 收集起來(lái)存到數(shù)據(jù)庫(kù)，那么就需要檢查每個(gè)請(qǐng)求，看 header 中有沒(méi)有攜帶 formId,如果有就存到數(shù)據(jù)庫(kù)中，注意要和用戶對(duì)應(yīng)起來(lái)，某個(gè)用戶點(diǎn)擊產(chǎn)生的 formId 只能用于給這個(gè)用戶推送消息。

因?yàn)橐獙?formId 和用戶綁定起來(lái)，因此我是在身份認(rèn)證過(guò)濾器中進(jìn)行的 formId 處理，身份認(rèn)證成功后，處理 formId。代碼如下：

/**
 * Description: 從請(qǐng)求頭中獲取formIdList,并插入數(shù)據(jù)庫(kù)
 *
 * @param request 請(qǐng)求頭
 * @return void
 * @author fanxb
 * @date 2019/5/6 16:39
 */
private void checkFormId(HttpServletRequest request) {
  String str = request.getHeader(Constant.HEADER_FORM_ID);
  if (StringUtil.isEmpty(str)) {
    return;
  }
  List<FormKey> formKeyList = JSON.parseArray(str, FormKey.class);
  //UserContextHolder用戶將當(dāng)前線程和用戶綁定起來(lái)，方便后面獲取用戶信息
  int userId = UserContextHolder.get().getUser().getUserId();
  formKeyList.forEach(item -> item.setUserId(userId));
  this.formKeyDao.insertMany(formKeyList);
}

發(fā)送微信提醒

通過(guò)官方文檔可以知道發(fā)送消息的流程如下：

1 獲取 accessToken,調(diào)用微信的大多數(shù)接口都需要這個(gè)東西，這個(gè)通過(guò) appId 和 secret 來(lái)獲取。詳情參見(jiàn)： https://developers.weixin.qq.com/miniprogram/dev/api-backend/auth.getAccessToken.html

2 調(diào)用微信發(fā)送服務(wù)通知的接口.這個(gè)接口文檔在: 點(diǎn)擊跳轉(zhuǎn)

最終發(fā)送的 http 請(qǐng)求是這樣的：

url: https://api.weixin.qq.com/cgi-bin/message/wxopen/template/send?access_token=上面獲取的accessToken
method: post

請(qǐng)求體格式為：application/json; charset=utf-8

body:{
 "touser": "用戶的openId",
 "template_id": "模板id",
 "page": "點(diǎn)擊跳轉(zhuǎn)的小程序url路徑",
 "form_id": "收集到的formId",
 "data": {
  "keyword1": {
   "value": "您有一個(gè)信息的提示消息"
  },
  "keyword2": {
   "value": "這是消息內(nèi)容"
  }
 },
 "emphasis_keyword": "keyword1.DATA"
}

data 中的數(shù)據(jù)的按照順序 keyword1,keyword2 對(duì)應(yīng)于模板中字段的順序。

結(jié)束

工程全部源碼在這里：github

總結(jié)

以上所述是小編給大家介紹的在小程序中推送模板消息的實(shí)現(xiàn)方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論