日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告:魔扣目錄網(wǎng)為廣大站長(zhǎng)提供免費(fèi)收錄網(wǎng)站服務(wù),提交前請(qǐng)做好本站友鏈:【 網(wǎng)站目錄:http://www.ylptlb.cn 】, 免友鏈快審服務(wù)(50元/站),

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站:51998
  • 待審:31
  • 小程序:12
  • 文章:1030137
  • 會(huì)員:747

 

 

小程序消息推送種類

  • 訂閱消息
  • 模板消息
  • 統(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ū)別

 

前后端微信小程序訂閱消息推送

分享到:
標(biāo)簽:程序 微信小
用戶無頭像

網(wǎng)友整理

注冊(cè)時(shí)間:

網(wǎng)站:5 個(gè)   小程序:0 個(gè)  文章:12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會(huì)員

趕快注冊(cè)賬號(hào),推廣您的網(wǎng)站吧!
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲,玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題,題庫(kù),初中,高中,大學(xué)四六

運(yùn)動(dòng)步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動(dòng)步數(shù),積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績(jī)?cè)u(píng)定2018-06-03

通用課目體育訓(xùn)練成績(jī)?cè)u(píng)定