本文使用 uniapp 框架开发,因为H5的订阅消息和小程序的订阅消息的授权流程不一样,但是很多地方需要使用授权,所以我封装了一个兼容H5和小程序订阅消息授权的方法,使用比较方便,希望能够帮助到你,实测可用。如果有可以改进的地方,欢迎评论指出。如果对你有帮助就点个赞吧!
下面简单看下H5订阅消息发送和小程序订阅消息发送的区别:
简单说H5就是需要重定向到微信的一个地址,然后微信回调告诉你用户是否授权,而小程序是有官方提供的 API ,调用API就能拿到回调信息告诉你用户是否授权。
下面看看官方文档的介绍:
最后,来看看我是怎么实现的吧!
页面使用我封装的方法的方式:
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
}