首頁>技術>

小程式訊息推送種類

訂閱訊息模板訊息統一服務訊息客服訊息

由於模板訊息已經下線,這裡的示例訊息是訂閱訊息

實現訂閱訊息我們開始需要知道幾個小程式的引數值

小程式appid小程式金鑰小程式訂閱模板 id (template_id)

以上引數都可以在小程式管理後臺上找到

小程式端開發前需要獲取小程式設定模板 ID,沒有設定模板訊息時可以新增新的模板 mp.weixin.qq.com擁有模板 ID 後,需要獲取到下發訊息許可權使用者下發推送訊息許可權

在訂單或者其它操作完成時,調起客戶端小程式訂閱訊息介面,獲取到使用者操作結果

// index.wxml<button bindtap="bindSubscribeMessage"> 獲取下發許可權 </button>// index.jsbindSubscribeMessage() {  wx.requestSubscribeMessage({    tmplIds: ['tmplIds'],    success (res) {       console.log(res)      }  })}複製程式碼
傳送使用者 code

由於訊息推送服務端需要小程式 openid 所以我們需要將通過 wx.login 登入小程式將 code 傳送給服務端

bindLogin() {  /* 1. 獲取code 請求開發伺服器     * 2. 開發伺服器通過 code + appid + secret 請求微信伺服器獲取 openid    */  wx.login({    success: res => {      if (res.code) {        const { task } = this.data;        this.request(Object.assign(task, { code: res.code }));      }    }  });}複製程式碼
服務端

這裡由於是自己模擬服務端,使用的 Koa 來實現基本流程,其他後端實現流程應該是一樣的

由於推送訊息需要小程式 access_token 和 openid,所以我們先要獲取這兩個引數

獲取流程

獲取小程式客服端傳參 code

通過客戶端傳送介面 app/send 拿到引數 code

function getBodyMessage(ctx) {  const { body } = ctx.request;  return body;}複製程式碼
獲取 openid

通過 code + secret(小程式金鑰) + appid 獲取 openid

function getOpenId(js_code) {    return new Promise(resolve => {    \thttp(    \t\t{    \t\t\turl: `https://api.weixin.qq.com/sns/jscode2session`,    \t\t\tmethod: 'get',    \t\t\tqs: {    \t\t\t\tgrant_type: 'authorization_code',    \t\t\t\tjs_code,    \t\t\t\tappid: APP.appid,    \t\t\t\tsecret: APP.secret    \t\t\t},    \t\t\tjson: true //設定返回的資料為json    \t\t},    \t\t(error, response, body) => {    \t\t\tif (!error && response.statusCode == 200) {    \t\t\t\tresolve(body);    \t\t\t}    \t\t}    \t);    });}複製程式碼
獲取 access_token
function getAccessToken() {\treturn new Promise(resolve => {\t\thttp(\t\t\t{\t\t\t\turl: `${WX_API}/token`,\t\t\t\tmethod: 'get',\t\t\t\tqs: {\t\t\t\t\tgrant_type: 'client_credential', // 注意 type 型別\t\t\t\t\tappid: APP.appid,\t\t\t\t\tsecret: APP.secret\t\t\t\t},\t\t\t\tjson: true //設定返回的資料為json\t\t\t},\t\t\t(error, response, body) => {\t\t\t\tif (!error && response.statusCode == 200) {\t\t\t\t\tconst { access_token } = body;\t\t\t\t\tresolve(access_token);\t\t\t\t}\t\t\t}\t\t);\t});}複製程式碼
推送訊息

我們獲取到 openid 和 access_token 後就可以推送訊息給使用者了

function sendMessage({ access_token, openid, msg }) {\tconst requestData = {\t\ttouser: openid,    template_id: APP.template_id,    // 模板訊息屬性和屬性值需要注意內容限制\t\tdata: {\t\t\tthing1: {\t\t\t\tvalue: msg.taskName\t\t\t},\t\t\tthing10: {\t\t\t\tvalue: msg.remarks\t\t\t},\t\t\tthing9: {\t\t\t\tvalue: msg.className\t\t\t}\t\t}  };  console.log(requestData);\treturn new Promise((resolve, reject) => {\t\thttp(\t\t\t{\t\t\t    // 注意 access_token 需要在介面形式傳送 \t\t\t\turl: `${WX_API}/message/subscribe/send?access_token=${access_token}`,\t\t\t\theaders: {\t\t\t\t\t'content-type': 'application/json'\t\t\t\t},\t\t\t\tmethod: 'post',\t\t\t\tbody: requestData, // 需要注意是放在 body 上,而不是 form 上\t\t\t\tjson: true // 設定返回的資料為json\t\t\t},\t\t\t(error, response, body) => {\t\t\t\tif (!error && response.statusCode == 200) {\t\t\t\t\tresolve(body);\t\t\t\t} else {\t\t\t\t\treject();\t\t\t\t}\t\t\t}\t\t);\t});}複製程式碼

這裡我們需要注意:

下發的訊息模板需要注意訂閱訊息引數值內容限制,需要參考下發模板訊息屬性需要注意

開發模式下,授權一次下發一次訊息後端啟動 npm run dev

實現效果

2020-03-05更新

小程式模板訊息中有兩種模板

一次性訂閱長期訂閱

這兩個模板根據小程式的服務型別來區分,只有部分服務型別:醫療、民生、交通、教育之類的線下服務開放長期訂閱模板庫選擇。

社群有篇帖子詳細的說明了一些區別

最新評論
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 喜極而泣,我終於學會了Nginx!