【开源扩展】wordpress微信小程序订阅消息插件，附完整uni-app案例

<template>
<view class="subscribe-container">
<!-- 订阅按钮 - 点击触发订阅流程 -->
<button class="subscribe-btn" @click="subscribeMessage">订阅消息通知</button>
<!-- 状态消息显示区域 -->
<view class="status-message">{{ statusMessage }}</view>
</view>
</template>

<script>
/**
	 * 微信小程序消息订阅组件
	 * 功能：处理用户订阅/取消订阅流程，包括OpenID获取、权限请求和后端同步
	 */
export default {

data() {
return {
templateId: '',
openID: '',
statusMessage: '',
			};
		},
onLoad() {},
methods: {
subscribeMessage() {
				uni.request({
url:'https://frche.frbkw.com/wp-json/wmp-subscribe/v1/template-id',
method: 'POST',
success: (res) => {
this.templateId = res.data.template_id;
					}
				})

let openid = uni.getStorageSync('openid');
if (openid) {
this.postMessage(); //请求订阅
				} else {
this.getOpenid(); //openid
				}
			},


// 请求订阅
postMessage() {
let openid = uni.getStorageSync('openid');
				uni.requestSubscribeMessage({
tmplIds: [this.templateId],
success: res => {
console.log('订阅请求返回结果:', res);
const templateStatus = res[this.templateId];
if (templateStatus === 'accept') {
// 3. 订阅成功，通知后端
console.log('用户已同意订阅，通知后端');
this.errorCount = 0; // 重置错误计数
this.notifyBackend(openid, this.templateId, true);
						} else {
this.statusMessage = `订阅状态异常: ${templateStatus || '未知状态'}`;
console.warn('订阅返回未知状态:', templateStatus);
this.loading = false;
						}
					},
				});
			},

notifyBackend(openid, templateId, isSubscribe) {
const url = isSubscribe ?
'https://frche.frbkw.com/wp-json/wmp-subscribe/v1/subscribe' // 订阅API端点
					:
'https://frche.frbkw.com/wp-json/wmp-subscribe/v1/unsubscribe'; // 取消订阅API端点

				uni.request({
url: url,
method: 'POST',
data: {
openid: openid,
template_id: templateId
					},
success: res => {
if (res.data.success) {
// 根据订阅状态显示相应的成功消息
this.statusMessage = isSubscribe ? '订阅成功！' : '取消订阅成功';
						} else {
this.statusMessage = `操作失败: ${res.data.message || '未知错误'}`;
						}
this.loading = false;
					},
fail: err => {
this.statusMessage = `网络请求失败: ${err.errMsg}`;
console.error('通知后端失败:', err);
this.loading = false;
					}
				});
			},


// 获取openid
getOpenid() {
console.log('获取openid')
				uni.login({
provider: 'weixin',
success: loginRes => {
// 调用后端接口获取OpenID
						uni.request({
url: 'https://frche.frbkw.com/wp-json/wmp-subscribe/v1/get-openid',
method: 'POST',
data: {
code: loginRes.code
							},
success: (res) => {
// 判断接口返回是不是200，如果是缓存openid，如果不是返回错误
if (res.statusCode === 200) {
									uni.setStorageSync('openid', res.data.openid);
this.postMessage(); //请求订阅
								} else {
this.statusMessage = '获取OpenID失败';
								}
							},
						});
					},
				});
			},
		}
	};
</script>

<style scoped>
/* 订阅容器样式 - 使用flex布局居中内容 */
.subscribe-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20rpx;
	}

/* 订阅按钮样式 */
.subscribe-btn {
width: 80%;
height: 80rpx;
background-color: #007aff;
color: white;
border-radius: 40rpx;
font-size: 32rpx;
margin-bottom: 30rpx;
	}

/* 状态消息样式 */
.status-message {
font-size: 28rpx;
color: #666;
text-align: center;
	}
</style>