uni-app + .NET 7實現微信小程式訂閱消息推送

来源:https://www.cnblogs.com/gmval/archive/2023/02/04/17091795.html
-Advertisement-
Play Games

為了方便操作apk 實現app的自動化點擊 封裝了個adb操作類。基本上的操作都有了， 如果配合好C# 程式和模擬器 基本上什麼樣的操作都可以實現。 using System; using System.Collections; using System.Collections.Generic; u ...


微信小程式的訂閱消息是小程式的重要能力之一，為實現服務的閉環提供更優的體驗。訂閱消息我們應該經常見到，比如下單成功之後的服務通知，支付成功後的支付成功通知，都屬於小程式的訂閱消息。

本文只實現一次性訂閱的功能，至於長期訂閱與設備訂閱，有機會碰到再進行研究。

目錄

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

功能介紹

消息能力是小程式能力中的重要組成，我們為開發者提供了訂閱消息能力，以便實現服務的閉環和更優的體驗。

  • 訂閱消息推送位置：服務通知
  • 訂閱消息下發條件：用戶自主訂閱
  • 訂閱消息卡片跳轉能力：點擊查看詳情可跳轉至該小程式的頁面

在這裡插入圖片描述

消息類型

1. 一次性訂閱消息

一次性訂閱消息用於解決用戶使用小程式後，後續服務環節的通知問題。用戶自主訂閱後，開發者可不限時間地下發一條對應的服務消息；每條消息可單獨訂閱或退訂。

2. 長期訂閱消息

一次性訂閱消息可滿足小程式的大部分服務場景需求，但線下公共服務領域存在一次性訂閱無法滿足的場景，如航班延誤，需根據航班實時動態來多次發送消息提醒。為便於服務，我們提供了長期性訂閱消息，用戶訂閱一次後，開發者可長期下發多條消息。

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

所以我們普通小程式，在註冊成功後，訂閱消息的模板選擇，只有一次性訂閱的選項，沒有長期訂閱的選項。
在這裡插入圖片描述

3. 設備訂閱消息

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

瞭解了小程式訂閱消息之後，我們開始進入正題！

基本流程

註意事項

由於後面的文章還很長，註意事項優先發出來，可能看到這裡已經解決了你的問題。

  • 一次性模板 id 和永久模板 id 不可同時使用。
  • 低版本基礎庫2.4.4~2.8.3 已支持訂閱消息介面調用，僅支持傳入一個一次性 tmplId / 永久 tmplId。
  • 2.8.2 版本開始，用戶發生點擊行為或者發起支付回調後，才可以調起訂閱消息界面
  • 2.10.0 版本開始，開發版和體驗版小程式將禁止使用模板消息 formId。
  • 一次授權調用里，每個 tmplId 對應的模板標題不能存在相同的，若出現相同的，只保留一個。
  • 2.10.0 版本開始，支持訂閱語音消息提醒

特別註意第三條，版本庫是2.8.2及以上的時候，訂閱消息必鬚髮生點擊行為或是發起支付回調後，才可以調起訂閱消息的界面。這個點擊行為沒有特別要求。比如一個表單，點擊提交按鈕後，也是可以調起訂閱消息界面的。支付後的回調不需要點擊行為，也可以調起訂閱消息界面。

獲取模板ID

在微信公眾平臺登錄小程式，在訂閱消息功能下，進入到我的模板，找到模板，並將模板id複製出來，如果沒有模板，需要先添加模板，再獲取模板id
在這裡插入圖片描述

要添加新模板，點擊選用按鈕，在公共模板庫中選擇需要的模板，添加就可以了。
在這裡插入圖片描述

有很多文章說，如果沒有合適的模板，可以創建自定義模板。但如果你真想去創建自定義模板，會發現根本找不到地方。
如果想創建自定義模板，可通過以下方式進行。
1、點擊選用按鈕，來到公共模板庫。（公共模板庫中的模板，與你小程式的服務類目相關）
2、在搜索框中，輸入比較長的關鍵詞。
3、點擊搜素，如果還是能匹配出模板來，則重新調整關鍵詞，直到沒有任何搜索結果為止。
4、點擊頁面中的幫忙我們完善模板庫，進行自定義模板設置。
在這裡插入圖片描述
在這裡插入圖片描述

創建自定義模板的時候，一定要仔細閱讀申請模板的流程，尤其是第1條。我單拉出來重點標註一下，因為沒仔細看第1條，第一次申請的幾個模板白白等了好幾天。
模板標題需體現具體的服務場景，要求以“通知”或“提醒”結尾，如：物流到貨通知、交易提醒。

看到這裡，會發現以上大部分跟網上的文章沒啥區別，別急，正文來了！

uni-app代碼

前端實現的是點擊提交按鈕，保存表單，保存成功後發送訂閱消息，在pages/index/index.vue下編寫如下代碼：

<template>
	<view>
		<view class="setp">
			<publishStep :list="setpList" :current="0" mode="number" active-color="#eb3572"></publishStep>
		</view>
		<view class="container">
			<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="服務時間" label-width="160rpx" :border-bottom="true" :label-style="{'font-size':'28rpx'}"
				 right-icon="arrow-right" prop="serviceTime">
					<u-input v-model="form.serviceTime" placeholder="請選擇服務時間" :disabled="true" input-align="right" @click="timeShow=true" />
				</u-form-item>
				
				<u-form-item label="服務地址" 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="聯繫電話" label-width="160rpx" :border-bottom="true" :label-style="{'font-size':'28rpx'}"
				 prop="lxtel">
					<u-input v-model="form.lxtel" type="number" placeholder="請輸入聯繫電話" 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 style="height: 160rpx;"></view>
		<view class="bottom_nav">
			<view class="buttom_box padding-horizontal-20 padding-vertical-10">
				<u-button type="error" @click="submitForm" :loading="submit_loading" style="height: 100rpx; font-weight: bold; font-size: 36rpx;">確認提交</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: "請填寫您的姓名",
						trigger: 'change'
					}],
					
					serviceTime: [{
						required: true,
						message: "請選擇服務時間",
						trigger: 'change'
					}],
					
					lxtel: [{
						required: true,
						message: "請輸入聯繫電話",
						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、提交表單，服務端返回訂單號（orderId）
2、使用uni.requestSubscribeMessage，調起授權框，當點擊同意後，進入第三步。調起授權後，如果用戶同意，回調函數的參數subscribeMessageRes有兩個對象：errMsg和XXXXXXXXXXX，errMsg不必多說。主要是這個XXXXXXXXXXX是什麼。XXXXXXXXXXX是授權生成的，目測來看就是模板Id。
3、使用uni.login，獲取code。
4、將code與orderId發送到伺服器，伺服器通過code獲取到openId，再根據orderId獲取到具體訂單數據。
5、發送模板消息。

如果不出意外的話，提交成功後，彈出如下授權框
在這裡插入圖片描述

服務端代碼

服務端ORM使用SqlSugar，微信小程式介面使用SKIT.FlurlHttpClient.Wechat庫。

生成訂單

提交訂單，這裡只做演示，具體的代碼自己實現下就可以了！

[HttpPost]
public async Task<AjaxResult> SubmitOrder(order model)
{
//生成訂單號
    model.order_no = DateTime.Now.ToString("yyyyMMddHHssfffff");
    model.addtime = DateTime.Now;
    //ExecuteReturnIdentity方法會返回自增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>
/// 錯誤代碼
/// </summary>
public int code { get; set; } = 0;

/// <summary>
/// 返回消息
/// </summary>
public string message { get; set; }
/// <summary>
/// 返回數據
/// </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>
     /// 訂單編號
     /// </summary>
    public string order_no { get; set; }
    /// <summary>
    /// 姓名
    /// </summary>
    public string realName { get; set; }
    /// <summary>
    /// 時間
    /// </summary>
	public DateTime serviceTime { get; set; }
	/// <summary>
    /// 地址
    /// </summary>
	public string serviceAddress { get; set; }
	/// <summary>
    /// 聯繫電話
    /// </summary>
	public string lxtel { get; set; }
	/// <summary>
    /// 備註
    /// </summary>
	public string remarks { get; set; }
	/// <summary>
    /// 創建時間
    /// </summary>
	public DateTime addtime { get; set; }
}

發送模板消息

發送一次性訂閱的模板消息，傳的參數為前端獲取的code與orderId。根據訂單編號獲取訂單信息，以便在訂閱消息中，設置小程式信息以及打開路徑。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 = "參數錯誤";
        return result;
    }
    var order_model = await db.Queryable<order>().InSingleAsync(orderId);
    if(order_model is null)
    {
        result.success = false;
        result.message = "參數錯誤";
        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;
    //發送模板消息
    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";
     //微信小程式要跳轉的地址。可以加參數
     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;
}

構造模板消息的時候，使用IDictionary<string, CgibinMessageSubscribeSendRequest.Types.DataItem> messageData = new Dictionary<string, CgibinMessageSubscribeSendRequest.Types.DataItem>來進行構造，
假設一個模板消息的詳細內容是這樣的：
在這裡插入圖片描述

  • 那麼上面代碼中的params1 就是character_string22，同理params2就是thing7。也就是說。IDictionary的key就是模板中.DATA前面的內容。
  • messageRequest.TemplateId，要與前端的模板Id一致。
  • messageRequest.MiniProgramState表示跳轉微信小程式的類型。預設為正式版
    • developer為開發版；
    • trial為體驗版；
    • formal為正式版；

如果不出意外的話，你的微信會收到服務通知。點擊卡片後，進入小程式的訂單詳情頁面！

總結

1、其實微信小程式的訂閱消息和公眾號的訂閱消息模板還是比較好申請的。如果在類目模板與歷史模板中無法找到合適自己的模板，那麼自己申請一個模板。審核的話，2-3天就可以收到通知了。
需要註意的是，申請模板的時候，最好把各項在本地保留一份。因為一旦提交申請，在公眾號或小程式後臺，你就找不到了。玩意審核沒通過，再申請的時候，前面寫的啥內容，已經忘的差不多了！

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


作者：gmval
出處：https://www.cnblogs.com/gmval/p/17071237.html
本文版權歸作者和博客園共有，寫文不易，支持原創，歡迎轉載【點贊】，轉載請保留此段聲明，且在文章頁面明顯位置給出原文連接，謝謝。
關註個人公眾號，定時同步更新優秀資源及技術文章


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Python之字典刪除元素（6種方式）
    文中代碼 smart_girl = {"name":"yuan wai", "age": 25,"address":"Beijing"} 第一種方式：pop（）方法 註意：找不到對應的key，pop方法會拋出異常KeyError smart_girl.pop("name") #返回值是value # ...
  • 5 組合數據類型
    1.已知列表li_num1 = [4, 5, 2, 7]和li_num2 = [3, 6]，請將這兩個列表合併為一個列表，並將合併後的列表中的元素按降序排列。 1 # 方法一 2 li_num1 = [4, 5, 2, 7, ] 3 li_num2 = [3, 6] 4 # extend() 函數用 ...
  • netty對多協議進行編解碼
    1、netty如何解析多協議 前提： 項目地址：https://gitee.com/q529075990qqcom/NB-IOT.git 我們需要一個創建mavne項目，這個項目是我已經寫好的項目，項目結構圖如下： 創建公共模塊 創建子模塊，準備好依賴Netty4.1版本 <dependencies ...
  • Python教程：IO
    在磁碟上讀寫文件的功能都是由操作系統提供的，現代操作系統不允許普通的程式直接操作磁碟，所以，讀寫文件就是請求操作系統打開一個文件對象（通常稱為文件描述符），然後，通過操作系統提供的介面從這個文件對象中讀取數據（讀文件），或者把數據寫入這個文件對象（寫文件）。 1.讀文件 要以讀文件的模式打開一個文件 ...
  • java基礎：java基礎語法
    註釋 單行註釋：對某一行進行註釋，使用“/註釋內容/”標識 多行註釋：可以書寫多行，使用“/*註釋內容*//”表示 文檔註釋：這個內容對IDEA是有意義的，/**註釋內容*/ public class Hello { //單行註釋 //註釋後會被編譯器忽略，不會作為語句編譯 //每個單行註釋只能寫一 ...
  • Python之字典修改元素（4種方式）
    哈嘍兄弟們，今天咱們來學習一下Python字典修改元素的四種方式。 本文中使用的字典對象： smart_girl = {"name":"yuan wai", "age": 25} 第一種方式：[key] smart_girl["age"] = 35 說明：字典中存在key時為修改value、不存在k ...
  • Andlua+實現WakeUpOnline遠程開機
    一、最終效果 遠程開機app下載： 下載鏈接:https://wwp.lanzoup.com/iDR330ml4l2b 提取碼 : dxcg 註意：使用前請按照2.1的步驟設置電腦“ mac地址：填寫自己的mac地址 主機地址：填寫自己的公網ip，百度搜索ip 映射埠：第二點準備工作裡面配置的映射 ...
  • 我為什麼要放棄RESTful，選擇擁抱GraphQL
    背景 REST作為一種現代網路應用非常流行的軟體架構風格，自從Roy Fielding博士在2000年他的博士論文中提出來到現在已經有了20年的歷史。它的簡單易用性，可擴展性，伸縮性受到廣大Web開發者的喜愛。 REST 的 API 配合JSON格式的數據交換，使得前後端分離、數據交互變得非常容易， ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類