前言

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

實現(xiàn)思路：

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

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

1. 一次性訂閱消息

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

2. 長期訂閱消息

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

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

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

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

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

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

實現(xiàn)步驟：

1.獲取模板id

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

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

如果沒有合適的模板，可以申請?zhí)砑有履０澹瑢徍送ㄟ^后可使用

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

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

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

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

在我上面提到的微信官方文檔中，步驟和我是一樣的，在那里可以進入詳情頁進入查看詳細的步驟。以及接口回調(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中定義此方法，可以通過點擊事件綁定方法，作為測試。

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

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

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

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

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

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

3.1、access_token：

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

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
	       }
	   })
}

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

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

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，因此建議這個請求也放到后端去做。貼上使用uni獲取的代碼

// wxappid wxsecret為小程序的appId和secretKey，登錄小程序后臺可查看，code就是user_login的那個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
	}
})

文檔：

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

3.3、template_id

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

3.4、data

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

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

前端：

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

點擊預(yù)約按鈕 進行彈窗uni.requestSubscribeMessage

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

后端：

發(fā)送請求獲取openid

發(fā)送請求獲取token

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

總結(jié)

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

最新評論