目錄

• 功能介紹
• 消息類型
• 基本流程
• 注意事項(xiàng)
• 獲取模板ID
• uni-app代碼
• 服務(wù)端代碼
• 生成訂單
• 發(fā)送模板消息
• 總結(jié)

微信小程序的訂閱消息是小程序的重要能力之一，為實(shí)現(xiàn)服務(wù)的閉環(huán)提供更優(yōu)的體驗(yàn)。訂閱消息我們應(yīng)該經(jīng)常見到，比如下單成功之后的服務(wù)通知，支付成功后的支付成功通知，都屬于小程序的訂閱消息。

本文只實(shí)現(xiàn)一次性訂閱的功能，至于長期訂閱與設(shè)備訂閱，有機(jī)會(huì)碰到再進(jìn)行研究。

在開始之前，我們先看看微信小程序訂閱消息的介紹：

功能介紹

消息能力是小程序能力中的重要組成，我們?yōu)殚_發(fā)者提供了訂閱消息能力，以便實(shí)現(xiàn)服務(wù)的閉環(huán)和更優(yōu)的體驗(yàn)。

• 訂閱消息推送位置：服務(wù)通知
• 訂閱消息下發(fā)條件：用戶自主訂閱
• 訂閱消息卡片跳轉(zhuǎn)能力：點(diǎn)擊查看詳情可跳轉(zhuǎn)至該小程序的頁面

消息類型

1. 一次性訂閱消息

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

2. 長期訂閱消息

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

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

所以我們普通小程序，在注冊成功后，訂閱消息的模板選擇，只有一次性訂閱的選項(xiàng)，沒有長期訂閱的選項(xiàng)。

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

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

了解了小程序訂閱消息之后，我們開始進(jìn)入正題！

基本流程

注意事項(xiàng)

由于后面的文章還很長，注意事項(xiàng)優(yōu)先發(fā)出來，可能看到這里已經(jīng)解決了你的問題。

• 一次性模板 id 和永久模板 id 不可同時(shí)使用。
• 低版本基礎(chǔ)庫2.4.4~2.8.3 已支持訂閱消息接口調(diào)用，僅支持傳入一個(gè)一次性 tmplId / 永久 tmplId。
• 2.8.2 版本開始，用戶發(fā)生點(diǎn)擊行為或者發(fā)起支付回調(diào)后，才可以調(diào)起訂閱消息界面
• 2.10.0 版本開始，開發(fā)版和體驗(yàn)版小程序?qū)⒔故褂媚０逑?formId。
• 一次授權(quán)調(diào)用里，每個(gè) tmplId 對應(yīng)的模板標(biāo)題不能存在相同的，若出現(xiàn)相同的，只保留一個(gè)。
• 2.10.0 版本開始，支持訂閱語音消息提醒

特別注意第三條，版本庫是2.8.2及以上的時(shí)候，訂閱消息必須發(fā)生點(diǎn)擊行為或是發(fā)起支付回調(diào)后，才可以調(diào)起訂閱消息的界面。這個(gè)點(diǎn)擊行為沒有特別要求。比如一個(gè)表單，點(diǎn)擊提交按鈕后，也是可以調(diào)起訂閱消息界面的。支付后的回調(diào)不需要點(diǎn)擊行為，也可以調(diào)起訂閱消息界面。

獲取模板ID

在微信公眾平臺(tái)登錄小程序，在訂閱消息功能下，進(jìn)入到我的模板，找到模板，并將模板id復(fù)制出來，如果沒有模板，需要先添加模板，再獲取模板id

要添加新模板，點(diǎn)擊選用按鈕，在公共模板庫中選擇需要的模板，添加就可以了。

有很多文章說，如果沒有合適的模板，可以創(chuàng)建自定義模板。但如果你真想去創(chuàng)建自定義模板，會(huì)發(fā)現(xiàn)根本找不到地方。
如果想創(chuàng)建自定義模板，可通過以下方式進(jìn)行。
1、點(diǎn)擊選用按鈕，來到公共模板庫。（公共模板庫中的模板，與你小程序的服務(wù)類目相關(guān)）
2、在搜索框中，輸入比較長的關(guān)鍵詞。
3、點(diǎn)擊搜素，如果還是能匹配出模板來，則重新調(diào)整關(guān)鍵詞，直到?jīng)]有任何搜索結(jié)果為止。
4、點(diǎn)擊頁面中的幫忙我們完善模板庫，進(jìn)行自定義模板設(shè)置。

創(chuàng)建自定義模板的時(shí)候，一定要仔細(xì)閱讀申請模板的流程，尤其是第1條。我單拉出來重點(diǎn)標(biāo)注一下，因?yàn)闆]仔細(xì)看第1條，第一次申請的幾個(gè)模板白白等了好幾天。

模板標(biāo)題需體現(xiàn)具體的服務(wù)場景，要求以“通知”或“提醒”結(jié)尾，如：物流到貨通知、交易提醒。

看到這里，會(huì)發(fā)現(xiàn)以上大部分跟網(wǎng)上的文章沒啥區(qū)別，別急，正文來了！

uni-app代碼

前端實(shí)現(xiàn)的是點(diǎn)擊提交按鈕，保存表單，保存成功后發(fā)送訂閱消息，在pages/index/index.vue下編寫如下代碼：

<template>	<view>		<view>			<publishStep :list="setpList" :current="0" mode="number" active-color="#eb3572"></publishStep>		</view>		<view>			<u-form :model="form" ref="uForm" :rules="rules" :error-type="errorType">				<u-form-item label="姓名" label-width="160rpx" :border-bottom="true" :label-style="{"font-size":"28rpx"}" prop="realName">					<u-input v-model="form.realName" placeholder="" input-align="right" />				</u-form-item>								<u-form-item label="服務(wù)時(shí)間" label-width="160rpx" :border-bottom="true" :label-style="{"font-size":"28rpx"}"				 right-icon="arrow-right" prop="serviceTime">					<u-input v-model="form.serviceTime" placeholder="請選擇服務(wù)時(shí)間" :disabled="true" input-align="right" @click="timeShow=true" />				</u-form-item>								<u-form-item label="服務(wù)地址" label-width="160rpx" :border-bottom="true" :label-style="{"font-size":"28rpx"}" prop="serviceAddress">					<u-input v-model="form.serviceAddress" placeholder="" input-align="right" @click="selectAddress" />				</u-form-item>				<u-form-item label="聯(lián)系電話" label-width="160rpx" :border-bottom="true" :label-style="{"font-size":"28rpx"}"				 prop="lxtel">					<u-input v-model="form.lxtel" type="number" placeholder="請輸入聯(lián)系電話" input-align="right" :clearable="false" />				</u-form-item>				<u-form-item label="需求描述" label-width="160rpx" :border-bottom="true" :label-style="{"font-size":"28rpx"}"				 prop="remarks">					<u-input v-model="form.remarks" type="text" placeholder="請輸入您的需求" input-align="right" :clearable="false" />				</u-form-item>			</u-form>		</view>		<view></view>		<view>			<view>				<u-button type="error" @click="submitForm" :loading="submit_loading">確認(rèn)提交</u-button>			</view>		</view>		<u-picker mode="time" v-model="timeShow" :params="timeParams" @confirm="timeConfirm"></u-picker>	</view></template><script>	export default {		data() {			return {								form:{					realName:"",					serviceTime:"",					serviceAddress:"",					lxtel:"",					remarks:""									},				rules:{					realName: [{						required: true,						message: "請?zhí)顚懩男彰?,						trigger: "change"					}],										serviceTime: [{						required: true,						message: "請選擇服務(wù)時(shí)間",						trigger: "change"					}],										lxtel: [{						required: true,						message: "請輸入聯(lián)系電話",						trigger: "change"					}],				},				errorType: ["toast"],								timeShow:false,				timeParams:{					year: true,					month: true,					day: true,					hour: false,					minute: false,					second: false				},				submit_loading:false,			}		},						onReady() {			this.$refs.uForm.setRules(this.rules);		},				onLoad(params) {			let that = this;		},		methods: {						timeConfirm(e){				let that = this;				that.form.serviceTime = e.year +"-"+e.month+"-"+e.day			},			gotoOrder(){			    uni.redirectTo({					url:"/pages/order/order"			    })			},			submitForm(){				 let that = this;				this.$refs.uForm.validate(valid=>{					if (valid){						that.$u.api.submit_order(that.form).then(res => {							if (res.success) {								let data = res.data;								uni.showToast({									title: "提交成功",									icon: "success"								})								// #ifdef MP-WEIXIN								uni.requestSubscribeMessage({									tmplIds:["XXXXXXXXXXX"], //這里填寫tempid									success:function(subscribeMessageRes){										if(subscribeMessageRes.errMsg=="requestSubscribeMessage:ok"){											if(subscribeMessageRes.XXXXXXXXXXX=="accept"){												uni.login({													provider: "weixin",													success:function(loginRes){														if(loginRes.errMsg=="login:ok"){															const code = loginRes.code;															that.$u.api.sendSubscribeMessage({																"code":code,																"orderId":data.orderId															}).then(res=>{																that.gotoOrder()															})														}else{															that.gotoOrder()														}													},													fail() {														that.gotoOrder()													}												})											}else{												that.gotoOrder()											}										}else{											that.gotoOrder()										}																			},									fail:function(){										that.gotoOrder()									}								})								// #endif															} else {								uni.$u.toast(res.message);							}						});					}				})							}		}	}</script><style>	.setp{ padding: 40rpx 0;}	.bottom_nav {		position: fixed;		width: 100%;		height: 100rpx;		left: 0;		bottom: 0;		z-index: 9999;		background: #FFFFFF;		border-top: 1rpx #f3f3f3 solid;	}</style>

這里的流程分為3步：
1、提交表單，服務(wù)端返回訂單號(hào)（orderId）
2、使用uni.requestSubscribeMessage，調(diào)起授權(quán)框，當(dāng)點(diǎn)擊同意后，進(jìn)入第三步。調(diào)起授權(quán)后，如果用戶同意，回調(diào)函數(shù)的參數(shù)subscribeMessageRes有兩個(gè)對象：errMsg和XXXXXXXXXXX，errMsg不必多說。主要是這個(gè)XXXXXXXXXXX是什么。XXXXXXXXXXX是授權(quán)生成的，目測來看就是模板Id。
3、使用uni.login，獲取code。
4、將code與orderId發(fā)送到服務(wù)器，服務(wù)器通過code獲取到openId，再根據(jù)orderId獲取到具體訂單數(shù)據(jù)。
5、發(fā)送模板消息。

如果不出意外的話，提交成功后，彈出如下授權(quán)框

服務(wù)端代碼

服務(wù)端ORM使用SqlSugar，微信小程序接口使用SKIT.FlurlHttpClient.Wechat庫。

生成訂單

提交訂單，這里只做演示，具體的代碼自己實(shí)現(xiàn)下就可以了！

[HttpPost]public async Task<AjaxResult> SubmitOrder(order model){//生成訂單號(hào)    model.order_no = DateTime.Now.ToString("yyyyMMddHHssfffff");    model.addtime = DateTime.Now;    //ExecuteReturnIdentity方法會(huì)返回自增id    var id = await db.Insertable(model).ExecuteReturnIdentity();    return new AjaxResult(){     success=true,     data = id    };}

AjaxResult.cs

public class AjaxResult{/// <summary>/// 是否成功/// </summary>public bool success { get; set; } = true;/// <summary>/// 錯(cuò)誤代碼/// </summary>public int code { get; set; } = 0;/// <summary>/// 返回消息/// </summary>public string message { get; set; }/// <summary>/// 返回?cái)?shù)據(jù)/// </summary>public object data{ get; set;}}

order.cs

[SugarTable("order")]public class order{     /// <summary>     /// 主鍵,自增Id     /// </summary>    [SugarColumn(IsPrimaryKey = true)]    public int id { get; set; }     /// <summary>     /// 訂單編號(hào)     /// </summary>    public string order_no { get; set; }    /// <summary>    /// 姓名    /// </summary>    public string realName { get; set; }    /// <summary>    /// 時(shí)間    /// </summary>	public DateTime serviceTime { get; set; }	/// <summary>    /// 地址    /// </summary>	public string serviceAddress { get; set; }	/// <summary>    /// 聯(lián)系電話    /// </summary>	public string lxtel { get; set; }	/// <summary>    /// 備注    /// </summary>	public string remarks { get; set; }	/// <summary>    /// 創(chuàng)建時(shí)間    /// </summary>	public DateTime addtime { get; set; }}

發(fā)送模板消息

發(fā)送一次性訂閱的模板消息，傳的參數(shù)為前端獲取的code與orderId。根據(jù)訂單編號(hào)獲取訂單信息，以便在訂閱消息中，設(shè)置小程序信息以及打開路徑。code用于獲取用戶的openId。

[HttpPost]public async Task<AjaxResult> SendSubscribeMessage(string code,string orderId){    AjaxResult result = new AjaxResult();    if (string.IsNullOrEmpty(code) || string.IsNullOrEmpty(orderId))    {result.success = false;result.message = "參數(shù)錯(cuò)誤";return result;    }    var order_model = await db.Queryable<order>().InSingleAsync(orderId);    if(order_model is null)    {result.success = false;result.message = "參數(shù)錯(cuò)誤";return result;    }    //初始化WechatApiClient    var options = new WechatApiClientOptions()    {AppId = "appId",AppSecret = "appSecret "    };    var client = new WechatApiClient(options);    //獲取openId    var request = new SnsJsCode2SessionRequest();    request.JsCode = code;    var response = await client.ExecuteSnsJsCode2SessionAsync(request);    string openId = response.OpenId;    //獲取token    var tokenRequest = new CgibinTokenRequest();    var tokenResponse = await client.ExecuteCgibinTokenAsync(tokenRequest);    var token = tokenResponse.AccessToken;    //發(fā)送模板消息    var messageRequest = new CgibinMessageSubscribeSendRequest();    IDictionary<string, CgibinMessageSubscribeSendRequest.Types.DataItem> messageData = new Dictionary<string, CgibinMessageSubscribeSendRequest.Types.DataItem>    {{    "params1",     new CgibinMessageSubscribeSendRequest.Types.DataItem() {Value=order_model.order_no}},{    "params1",    new CgibinMessageSubscribeSendRequest.Types.DataItem(){Value=order_model.userNmae}},{    "params3",    new CgibinMessageSubscribeSendRequest.Types.DataItem(){Value=order_model.serviceTime}},{    "params4",    new CgibinMessageSubscribeSendRequest.Types.DataItem(){Value=order_model.serviceAddress}},{    "params5",    new CgibinMessageSubscribeSendRequest.Types.DataItem(){Value=order_model.addtime.ToString("yyyy-MM-dd HH:ss")}}    };     messageRequest.AccessToken = token;     messageRequest.ToUserOpenId = openId;     messageRequest.TemplateId = "XXXXXXXXXXX";      messageRequest.MiniProgramState = "developer";     //微信小程序要跳轉(zhuǎn)的地址。可以加參數(shù)     messageRequest.MiniProgramPagePath = "/pages/order/order_details?id=" + order_model.id;     messageRequest.Data = messageData;     var messageResponse = await client.ExecuteCgibinMessageSubscribeSendAsync(messageRequest);     if(messageResponse.ErrorCode==0)     { result.success=true; result.message = "ok"; return result;     }     result.success = false;     result.message = "error";     return result;}

構(gòu)造模板消息的時(shí)候，使用IDictionary<string, CgibinMessageSubscribeSendRequest.Types.DataItem> messageData = new Dictionary<string, CgibinMessageSubscribeSendRequest.Types.DataItem>來進(jìn)行構(gòu)造，
假設(shè)一個(gè)模板消息的詳細(xì)內(nèi)容是這樣的：

• 那么上面代碼中的params1 就是character_string22，同理params2就是thing7。也就是說。IDictionary的key就是模板中.DATA前面的內(nèi)容。
• messageRequest.TemplateId，要與前端的模板Id一致。
• messageRequest.MiniProgramState表示跳轉(zhuǎn)微信小程序的類型。默認(rèn)為正式版
  • developer為開發(fā)版；
  • trial為體驗(yàn)版；
  • formal為正式版；

如果不出意外的話，你的微信會(huì)收到服務(wù)通知。點(diǎn)擊卡片后，進(jìn)入小程序的訂單詳情頁面！

總結(jié)

1、其實(shí)微信小程序的訂閱消息和公眾號(hào)的訂閱消息模板還是比較好申請的。如果在類目模板與歷史模板中無法找到合適自己的模板，那么自己申請一個(gè)模板。審核的話，2-3天就可以收到通知了。
需要注意的是，申請模板的時(shí)候，最好把各項(xiàng)在本地保留一份。因?yàn)橐坏┨峤簧暾垼诠娞?hào)或小程序后臺(tái)，你就找不到了。玩意審核沒通過，再申請的時(shí)候，前面寫的啥內(nèi)容，已經(jīng)忘的差不多了！

2、感謝SqlSugar，為.Net開發(fā)者提供這么強(qiáng)大的ORM。真的是太方便了。
3、感謝SKIT.FlurlHttpClient.Wechat，為.Net開發(fā)者提供這么便捷的工具。
4、為了能快速表達(dá)清楚意思，以上前端與服務(wù)端代碼，都是精簡過的，萬萬不可直接使用！

到此這篇關(guān)于uni-app結(jié)合.NET 7實(shí)現(xiàn)微信小程序訂閱消息推送的文章就介紹到這了,更多相關(guān)uni-app .NET 7小程序消息推送內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！