uniapp兼容H5和小程序订阅消息授权开发封装，使用方便

最新推荐文章于 2024-08-05 19:24:50 发布

a_靖

最新推荐文章于 2024-08-05 19:24:50 发布

阅读量4.2k

点赞数 3

分类专栏： Web前端 uni-app vue 文章标签：订阅消息模板消息 uniapp发送订阅消息 uniapp发送模板消息订阅消息授权

本文链接：https://blog.csdn.net/qq_35713752/article/details/109649114

版权

Web前端同时被 3 个专栏收录

404 篇文章 25 订阅

订阅专栏

vue

92 篇文章 4 订阅

订阅专栏

uni-app

86 篇文章 14 订阅

订阅专栏

本文使用 uniapp 框架开发，因为H5的订阅消息和小程序的订阅消息的授权流程不一样，但是很多地方需要使用授权，所以我封装了一个兼容H5和小程序订阅消息授权的方法，使用比较方便，希望能够帮助到你，实测可用。如果有可以改进的地方，欢迎评论指出。如果对你有帮助就点个赞吧！

下面简单看下H5订阅消息发送和小程序订阅消息发送的区别：

简单说H5就是需要重定向到微信的一个地址，然后微信回调告诉你用户是否授权，而小程序是有官方提供的 API ，调用API就能拿到回调信息告诉你用户是否授权。

下面看看官方文档的介绍：

1、公众号H5订阅消息发送流程

2、小程序订阅消息授权

最后，来看看我是怎么实现的吧！

页面使用我封装的方法的方式：


import common from '@/util/common.js';

<!-- 订阅消息监听和发送，兼容微信小程序和H5 -->
onLoad: function(options) {
	common.Init.call(this);
	// #ifdef H5
	this.monitorSubscribeMsgAuthorize(options); //监听订阅消息授权回调
	// #endif
}
<!-- 页面调用订阅消息授权  场景id 模板id-->
this.subscribeMsgAuthorize(scene_id, template_id)

封装的js：common.js

function Init(e) {
	const that = this;

	// #ifdef H5
	// 监听订阅消息授权回调
	that.monitorSubscribeMsgAuthorize = (options) => {

		if (options.action === 'confirm') {
			const {
				class_id
			} = JSON.parse(uni.getStorageSync('courseInfo') || '{}');

			this.$request(this.$api.Weike.subscribe, {
				class_id: class_id
			}).then(res => {
                //授权成功的处理
				uni.showToast({
					title: res.data.msg,
					icon: 'none'
				});
			});
		}
	}
	// #endif


	// 订阅消息授权
	that.subscribeMsgAuthorize = (scene_id, template_id) => {

		// #ifdef MP-WEIXIN
		uni.requestSubscribeMessage({
			tmplIds: [template_id],
			success(res) {
				console.log(res)
				if (res.errMsg == 'requestSubscribeMessage:ok') {
					this.$request(this.$api.Weike.subscribe, {
						'class_id': scene_id
					}).then(res => {
						uni.navigateTo({
							url: `/pages/classRoom/courseList/courseList?id=${scene_id}`
						});
					})
				}
			}
		})
		// #endif

		// #ifdef H5
		//记录场景值到缓存，用户授权成功后传给后端
        uni.setStorageSync('courseInfo', JSON.stringify({
			class_id: scene_id
		}));
		
		let redirect_url = encodeURIComponent(location.href);
		let appId = getApp().globalData.wechat_appid
		location.href =
			`https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=${appId}&scene=${scene_id}&template_id=${template_id}&redirect_url=${redirect_url}#wechat_redirect`;

		// #endif
	}



}
module.exports = {
	Init: Init
}