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

ゝ一纸荒年。 2022-12-20 12:54 289阅读 0赞

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

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

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

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

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

2、[小程序订阅消息授权][Link 1]

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

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

import common from '@/util/common.js';
    
    
    onLoad: function(options) {
    	common.Init.call(this);
    	// #ifdef H5
    	this.monitorSubscribeMsgAuthorize(options); //监听订阅消息授权回调
    	// #endif
    }
    
    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
    }

[H5]: https://a-jing.blog.csdn.net/article/details/109627846
[Link 1]: https://uniapp.dcloud.io/api/other/requestSubscribeMessage?id=requestsubscribemessage

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序订阅消息授权弹窗事件

微信小程序消息订阅授权弹窗事件，每次授权完成之后，只可以推送一条模板消息。

约定不等于承诺〃/ 2024年04月29日 11:19/ 0 赞/ 85 阅读

相关小程序转h5步骤(利用uniapp)

1.介绍个好用的工具，那便是miniprogram-to-uniapp自动转换工具。 2.全局安装此工具，命令行如下 npm install minipro

超、凢脫俗/ 2023年03月13日 06:09/ 0 赞/ 5 阅读

相关 vue+uniapp：小程序H5使用图表组件（uCharts）

一、打开组件网站：[https://ext.dcloud.net.cn/plugin?id=271][https_ext.dcloud.net.cn_plugin_id_271

布满荆棘的人生/ 2023年01月17日 09:27/ 0 赞/ 373 阅读

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

本文使用 uniapp 框架开发，因为H5的订阅消息和小程序的订阅消息的授权流程不一样，但是很多地方需要使用授权，所以我封装了一个兼容H5和小程序订阅消息授权的方法，使用比较方

ゝ一纸荒年。/ 2022年12月20日 12:54/ 0 赞/ 290 阅读

相关微信公众号H5订阅消息开发 uniapp订阅消息

简单说一下流程：在页面带参数跳转到 https://mp.weixin.qq.com/mp/subscribemsg ，然后用户授权确认或者取消以后，会返回参数里面 red

古城微笑少年丶/ 2022年12月20日 08:54/ 0 赞/ 284 阅读

相关 uniapp H5 JSSDK封装使用

先看效果吧，封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ，如果返回 true

朱雀/ 2022年12月20日 05:35/ 0 赞/ 332 阅读

相关微信小程序-订阅消息开发总结

贵人多忘事在这个信息爆炸的时代，很多时候我们都只有鱼的7秒钟记忆。这就导致我们经常性的会遗忘前两秒发生的重要事情每当事后想起来的时候总会拍大腿说当时要是有消

╰+哭是因爲堅強的太久メ/ 2022年11月30日 14:27/ 0 赞/ 261 阅读

相关 uniapp之h5公众号分享和授权

一，微信分享 1，安装jweixin-module npm i jweixin-module ![20201103143840780.png][] 2，在

太过爱你忘了你带给我的痛/ 2022年11月22日 00:29/ 0 赞/ 607 阅读

相关微信小程序五：（uniapp）订阅消息

小程序官方文档：[https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/subscri

红太狼/ 2022年11月15日 15:55/ 0 赞/ 506 阅读

相关小程序云开发基础和订阅消息

小程序云开发项目的三大板块数据库存储云函数数据库通过 wx.cloud.database().collectio

向右看齐/ 2021年08月27日 12:54/ 0 赞/ 388 阅读