小程序消息推送種類
- 訂閱消息
- 模板消息
- 統(tǒng)一服務(wù)消息
- 客服消息
由于模板消息已經(jīng)下線,這里的示例消息是訂閱消息
實(shí)現(xiàn)訂閱消息我們開始需要知道幾個(gè)小程序的參數(shù)值
- 小程序Appid
- 小程序密鑰
- 小程序訂閱模板 id (template_id)
以上參數(shù)都可以在小程序管理后臺(tái)上找到
小程序端
- 開發(fā)前需要獲取小程序設(shè)置模板 ID,沒有設(shè)置模板消息時(shí)可以添加新的模板 mp.weixin.qq.com
- 擁有模板 ID 后,需要獲取到下發(fā)消息權(quán)限
用戶下發(fā)推送消息權(quán)限
在訂單或者其它操作完成時(shí),調(diào)起客戶端小程序訂閱消息界面,獲取到用戶操作結(jié)果
// index.wxml
<button bindtap="bindSubscribeMessage"> 獲取下發(fā)權(quán)限 </button>
// index.js
bindSubscribeMessage() {
wx.requestSubscribeMessage({
tmplIds: ['tmplIds'],
success (res) {
console.log(res)
}
})
}
復(fù)制代碼
傳送用戶 code
由于消息推送服務(wù)端需要小程序 openid 所以我們需要將通過 wx.login 登錄小程序?qū)?code 發(fā)送給服務(wù)端
bindLogin() {
/* 1. 獲取code 請(qǐng)求開發(fā)服務(wù)器
* 2. 開發(fā)服務(wù)器通過 code + appid + secret 請(qǐng)求微信服務(wù)器獲取 openid
*/
wx.login({
success: res => {
if (res.code) {
const { task } = this.data;
this.request(Object.assign(task, { code: res.code }));
}
}
});
}
復(fù)制代碼
服務(wù)端
這里由于是自己模擬服務(wù)端,使用的 Koa 來實(shí)現(xiàn)基本流程,其他后端實(shí)現(xiàn)流程應(yīng)該是一樣的
由于推送消息需要小程序 access_token 和 openid,所以我們先要獲取這兩個(gè)參數(shù)
獲取流程
獲取小程序客服端傳參 code
通過客戶端發(fā)送接口 app/send 拿到參數(shù) code
function getBodyMessage(ctx) {
const { body } = ctx.request;
return body;
}
復(fù)制代碼
獲取 openid
通過 code + secret(小程序密鑰) + appid 獲取 openid
function getOpenId(js_code) {
return new Promise(resolve => {
http(
{
url: `https://api.weixin.qq.com/sns/jscode2session`,
method: 'get',
qs: {
grant_type: 'authorization_code',
js_code,
appid: APP.appid,
secret: APP.secret
},
json: true //設(shè)置返回的數(shù)據(jù)為json
},
(error, response, body) => {
if (!error && response.statusCode == 200) {
resolve(body);
}
}
);
});
}
復(fù)制代碼
獲取 access_token
function getAccessToken() {
return new Promise(resolve => {
http(
{
url: `${WX_API}/token`,
method: 'get',
qs: {
grant_type: 'client_credential', // 注意 type 類型
appid: APP.appid,
secret: APP.secret
},
json: true //設(shè)置返回的數(shù)據(jù)為json
},
(error, response, body) => {
if (!error && response.statusCode == 200) {
const { access_token } = body;
resolve(access_token);
}
}
);
});
}
復(fù)制代碼
推送消息
我們獲取到 openid 和 access_token 后就可以推送消息給用戶了
function sendMessage({ access_token, openid, msg }) {
const requestData = {
touser: openid,
template_id: APP.template_id,
// 模板消息屬性和屬性值需要注意內(nèi)容限制
data: {
thing1: {
value: msg.taskName
},
thing10: {
value: msg.remarks
},
thing9: {
value: msg.className
}
}
};
console.log(requestData);
return new Promise((resolve, reject) => {
http(
{
// 注意 access_token 需要在接口形式傳送
url: `${WX_API}/message/subscribe/send?access_token=${access_token}`,
headers: {
'content-type': 'application/json'
},
method: 'post',
body: requestData, // 需要注意是放在 body 上,而不是 form 上
json: true // 設(shè)置返回的數(shù)據(jù)為json
},
(error, response, body) => {
if (!error && response.statusCode == 200) {
resolve(body);
} else {
reject();
}
}
);
});
}
復(fù)制代碼
這里我們需要注意:
- 下發(fā)的消息模板需要注意訂閱消息參數(shù)值內(nèi)容限制,需要參考
- 下發(fā)模板消息屬性需要注意
- 開發(fā)模式下,授權(quán)一次下發(fā)一次消息
- 后端啟動(dòng) npm run dev
實(shí)現(xiàn)效果
2020-03-05更新
小程序模板消息中有兩種模板
- 一次性訂閱
- 長(zhǎng)期訂閱
這兩個(gè)模板根據(jù)小程序的服務(wù)類型來區(qū)分,只有部分服務(wù)類型:醫(yī)療、民生、交通、教育之類的線下服務(wù)開放長(zhǎng)期訂閱模板庫(kù)選擇。
社區(qū)有篇帖子詳細(xì)的說明了一些區(qū)別