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

本文使用 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 H5this.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-WEIXINuni.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_appidlocation.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
}

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

微信小程序订阅消息授权
wx.requestSubscribeMessage({tmplIds: ['9SgmLcxEfKMfS48xRYqBap3n3o8tFYGcg1RY5_mswCA', 'LUxUBwDrB3OTZB ...
uni-app微信小程序订阅消息功能开发(流程讲解篇)
温馨提示微信小程序中废弃了"模板消息",,微信小程序模板消息使用场景首先我们需要明白微信订阅消息使用场景,比如客户点了一份美团外卖客户需要知道当前订单商家是否接单,或订单是否 ...
小程序订阅消息授权总结
背景:小程序嵌入H5页面,H5按钮拉起订阅授权弹框结论:H5按钮点击,统一跳转到小程序授权页面.授权页面点击按钮,才能拉起授权弹框. 一.订阅消息授权一次性订阅消息和长期性订阅消息(医疗,教育等) ...
uni-app项目中H5跨域小程序不跨域怎么解决方法（兼容H5、小程序）
解决这个问题的时候还是用到了之前的文章中提到的"条件编译",当然这只是其中一部分, 下面我们来看一下这种问题的解决方法, ①H5端配置首先在项目中找到一个名为"mani ...
uni-app - 头像图片裁剪组件（支持多种裁剪，手势控制旋转或缩放、内外部控制图片移动、提供上传后端接口方案、头像图片美化）全端完美兼容 H5 App 小程序，最好用的图片上传后裁剪插件教程源代码
前言网上的教程代码非常乱且都有 BUG 存在,非常难移植到自己的项目中,而且很难. 实现了完美兼容 H5 App 小程序,选取手机本地相册或拍照,图片上传裁切内置多种方案,样式随便改, 本文代码干 ...
uniapp 小程序订阅消息一次订阅多个 wx.requestSubscribeMessage 微信小程序订阅消息
如图所示,订阅消息官方文档: 小程序订阅消息官方文档 1,消息类型 (1) 一次性订阅消息用户自主订阅后,开发者可不限时间地下发一条对应的服务消息:每条消息可单独订阅或退订. (2) 长期订阅消息 ...
微信小程序的模板消息与小程序订阅消息
小程序订阅消息功能介绍消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验. 订阅消息推送位置:服务通知订阅消息下发条件:用户自主订阅订阅消息卡片跳转能力: ...
in java中文版百度云 thinking_小程序订阅消息推送（含源码）java实现小程序推送，springboot实现微信消息推送...
前面写过一篇云开发实现小程序订阅消息(模板消息)推送的文章,<借助云开发实现小程序订阅消息和模板消息的推送功能>是有好多同学用的是Java写后台,所以今天就再来写一篇Java后台实现小程序 ...
小程序消息服务器webapi,小程序订阅消息
# 小程序订阅消息 # 功能介绍消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验. 订阅消息推送位置:服务通知订阅消息下发条件:用户自主订阅订阅消 ...

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

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

最新文章

热门文章