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

319 阅读1分钟

本文使用 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
}