前言

由于公司需求，剛學(xué)完的小程序的我，要求開發(fā)一個(gè)直播通知的微信小程序，學(xué)了vue的我，選擇還是使用uniapp開發(fā)，wx原生語法學(xué)完已經(jīng)快忘了。在利用uniapp寫代碼的過程中，遇到很多問題，通過這篇博客分享一下總體實(shí)現(xiàn)思路以及一些小坑。整篇博客以逐步的思路讓你完整的了解整個(gè)流程，以及自己該如何編寫屬于自己的請求方式。一步步跟著來一定可以實(shí)現(xiàn)最終效果。

實(shí)現(xiàn)思路：

首先要實(shí)現(xiàn)這個(gè)需求，最直接的辦法就是去wx的官方文檔中搜索相關(guān)文檔以及API介紹，在wx小程序官方文檔中搜索訂閱消息即可看到小程序訂閱消息的介紹

訂閱消息可以分為以下幾種

1. 一次性訂閱消息

一次性訂閱消息用于解決用戶使用小程序后，后續(xù)服務(wù)環(huán)節(jié)的通知問題。用戶自主訂閱后，開發(fā)者可不限時(shí)間地下發(fā)一條對應(yīng)的服務(wù)消息；每條消息可單獨(dú)訂閱或退訂。

2. 長期訂閱消息

一次性訂閱消息可滿足小程序的大部分服務(wù)場景需求，但線下公共服務(wù)領(lǐng)域存在一次性訂閱無法滿足的場景，如航班延誤，需根據(jù)航班實(shí)時(shí)動態(tài)來多次發(fā)送消息提醒。為便于服務(wù)，我們提供了長期性訂閱消息，用戶訂閱一次后，開發(fā)者可長期下發(fā)多條消息。

目前長期性訂閱消息僅向政務(wù)民生、醫(yī)療、交通、金融、教育等線下公共服務(wù)開放，后期將逐步支持到其他線下公共服務(wù)業(yè)務(wù)。

3. 設(shè)備訂閱消息

設(shè)備訂閱消息是一種特殊類型的訂閱消息，它屬于長期訂閱消息類型，且需要完成「設(shè)備接入」才能使用。

設(shè)備訂閱消息用于在設(shè)備觸發(fā)某些需要人工介入的事件時(shí)（例如設(shè)備發(fā)生故障、設(shè)備耗材不足等），向用戶發(fā)送消息通知。詳見設(shè)備訂閱消息文檔。

這里根據(jù)自己的需求去選擇就好了，一般都是一次性訂閱消息，根據(jù)官網(wǎng)文檔我針對細(xì)節(jié)做一個(gè)補(bǔ)充

實(shí)現(xiàn)步驟：

1.獲取模板id

在微信公眾平臺手動配置獲取模板 ID：

登錄 https://mp.weixin.qq.com，功能模塊，訂閱消息，我的模板中點(diǎn)擊選用去選擇模板

如果沒有合適的模板，可以申請?zhí)砑有履０?，審核通過后可使用

可以選一個(gè)基礎(chǔ)的模板使用，申請完之后，可以在我的模板中看到自己申請的模板。點(diǎn)擊詳情即可進(jìn)入模板詳情查看

點(diǎn)擊選用，進(jìn)入公共模板庫，搜索模板：活動開始提醒，點(diǎn)擊選用即可進(jìn)入模板選擇，最多選擇5條通知內(nèi)容，這里都是非個(gè)性化設(shè)置，只能按照提供的字段來。如果要個(gè)性化設(shè)計(jì)，可以點(diǎn)那個(gè)：點(diǎn)擊申請。去申請。選擇好后點(diǎn)擊提交即可

在我的模板中，點(diǎn)剛剛申請的模板右側(cè)的詳情進(jìn)入配置頁，注意我畫框的這部分，這將是等會設(shè)置參數(shù)的重要key

2.獲取下發(fā)權(quán)限

在我上面提到的微信官方文檔中，步驟和我是一樣的，在那里可以進(jìn)入詳情頁進(jìn)入查看詳細(xì)的步驟。以及接口回調(diào)參數(shù)對應(yīng)的信息，示例代碼是wx原生代碼的，這里我用uniapp的舉例。在文檔中，發(fā)起彈窗的請求方法為wx.requestSubscribeMessage(Object object)，在uni中搜索此方法為：uni.requestSubscribeMessage(Object object)，完全是一樣的，只是調(diào)用的頂級對象不一樣。

methods:{
	Subscribe(){
		uni.requestSubscribeMessage({
			//此處填寫剛才申請模板的模板ID
		  	tmplIds: ['ZcsAH2vJKgKocfQw8e2Phhz-8FzPQgfT_5ehxwic4ck'],
		  	success (res) {
		  		console.log(res)
		  	}
		})
	}
}

在methods中定義此方法，可以通過點(diǎn)擊事件綁定方法，作為測試。

在開發(fā)者工具和真機(jī)調(diào)試的效果是不一樣的，要上真機(jī)調(diào)試才是實(shí)際效果

打印res可以看到，accept表示同意，reject表示拒絕

3. 調(diào)用接口發(fā)訂閱消息

第二步為獲取用戶的授權(quán)訂閱。才允許你向用戶發(fā)送訂閱消息。第三步就是向微信服務(wù)器發(fā)送請求，通過微信發(fā)送服務(wù)通知給具體的用戶，詳細(xì)請求參數(shù)去看微信官方文檔，我這里利用uniapp舉例

請求地址：POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN

通過查看文檔可以知道必須必填為4個(gè)參數(shù)，這里的四個(gè)參數(shù)需要仔細(xì)看。文檔只告訴你需要填這四個(gè)，具體怎么來就需要自己一步步去得到了。

3.1、access_token：

這里需要向wx的一個(gè)接口發(fā)送請求，需要傳入appid和secret，此步用來獲取access_token，有效期為2小時(shí)

get_wx_access_token() {
	   return uni.request({
	       method: 'get',
	       // appip和secret需要去小程序管理界面查看
	       url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
	       dataType: 'json',
	       timeout: 30000
	   }).then(res => {
	       let [err, success] = res
	       if (success.statusCode == 200) {
	           return success.data.access_token
	       }
	   })
}

如果忘記了小程序密鑰，點(diǎn)擊重置就行，然后記得保存

PS：此處的獲取token請求，建議是放到后端去做，否則secret定在前端，上線提交會被標(biāo)注風(fēng)險(xiǎn)駁回

3.2 touser

touser參數(shù)就是需要接收訂閱消息的用戶id，獲取用戶id首先需要登錄獲取用戶的code，再利用code去獲取用戶id

// 先讓用戶登錄，此user_login方法可以放到onLoad()生命周期中去執(zhí)行
// 此處async和await異步操作不懂可以先百度，問題不大
async user_login() {
		let self = this
		await uni.login({
			success(res) {
				if (res.code) {
					self.code = res.code
				} else {
					console.log('獲取失??！' + res.errMsg)
				}
			}
		})
},

獲取到用戶登錄的信息后，res.code就是用戶的code。然后再向微信后端發(fā)請求獲取openid，此處獲取openid的請求也需要用到secret，因此建議這個(gè)請求也放到后端去做。貼上使用uni獲取的代碼

// wxappid wxsecret為小程序的appId和secretKey，登錄小程序后臺可查看，code就是user_login的那個(gè)code
uni.request({
	url: `https://api.weixin.qq.com/sns/jscode2session?appid=${wxappid}&secret=${wxsecret}&js_code=$[code]&grant_type=authorization_code`,
	success(data) {
		self.useropenId = data.data.openid
	}
})

文檔：

這時(shí)候就已經(jīng)獲取到useropenId了，這個(gè)值需要傳入到touser

3.3、template_id

這個(gè)值就是模板ID，直接傳字符串就像，下面再寫傳值代碼

3.4、data

data的傳值需要用到最開始申請模板時(shí)候我畫框的那一部分，如果你是自己申請的其他模板，需要注意，傳入Key的順序也要一致，傳入的是Json格式的數(shù)據(jù)，每一條Json的Key就是模板中的Key。

最后就是發(fā)送訂閱消息

notice() {
		let self = this
		//下方的thing1，thing2和其他，對應(yīng)的是你選取模板的模板詳情中的字段名稱(可在小程序后臺模板查看對應(yīng)的字段，要和上面的字段一樣)，需要更改成你自己的
		const pushmsg = {
			"touser": self.useropenId,
			"template_id": "ZcsAH2vJKgKocfQw8e2Phhz-8FzPQgfT_5ehxwic4ck",
			"data": {
				"thing1": {
					"value": "今天記得寫代碼"
				},
				"date2": {
					"value": "19:00"
				},
				"time3": {
					"value": "20:00"
				},
				"thing4": {
					"value": "今天寫堆排序把"
				},
				"time7": {
					"value": "18:50"
				}
			}
		}
		uni.request({
			// 此處的mytoken
			url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + this.get_wx_access_token(),
			data: JSON.stringify(pushmsg),
			method: 'POST',
			success: function(res) {
				// console.log('success');
			}
		})
},

以上就是微信小程序發(fā)送服務(wù)通知的全部流程，最后附上：方法是死的，人是活的，其實(shí)主要步驟就3步，就是微信官方文檔上提到的三步，只是每一個(gè)步驟都需要有其他的知識點(diǎn)，但是文檔沒有告訴你，需要你自己去發(fā)掘，或許你有其他經(jīng)驗(yàn)的基礎(chǔ)上，去查文檔實(shí)現(xiàn)此需求還是會非常容易的，此博客對小白或許會友好很多。每一個(gè)單獨(dú)的步驟和請求，都可以單獨(dú)拆出來自己去定義方法，就像積木一樣，每個(gè)核心組件我都告訴你了，最后怎么拼都看你，但是前提是得先獲得openid，然后用戶點(diǎn)擊彈窗授權(quán)統(tǒng)一，然后獲得一個(gè)token，最后再把東西結(jié)合發(fā)送求前實(shí)現(xiàn)模板的訂閱。因?yàn)檫@東西實(shí)現(xiàn)，完全是很多知識點(diǎn)湊在一起的，所以可以每一個(gè)都測試一遍，clog一下返回值，你就能明白每個(gè)操作的意義，最后自己把關(guān)鍵部分放后端就行

我的實(shí)現(xiàn)思路是：

前端：

onLoad( )階段 執(zhí)行 user_login 獲得 user的code

點(diǎn)擊預(yù)約按鈕 進(jìn)行彈窗uni.requestSubscribeMessage

彈窗成功后判斷返回值，如果為accept則表示同意則發(fā)請求給后端，附帶user的code

后端：

發(fā)送請求獲取openid

發(fā)送請求獲取token

最后利用openid、token和寫死的template_id和data進(jìn)行發(fā)送服務(wù)通知

總結(jié)

到此這篇關(guān)于uniapp微信小程序訂閱消息發(fā)送服務(wù)通知的文章就介紹到這了,更多相關(guān)uniapp小程序訂閱消息發(fā)送服務(wù)通知內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論