微信开放文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#23
微信 JS 接口签名校验工具
首先使用官方文档加入ip白名单,域名之类的做完之后的代码( 可查看
微信公众号订阅通知(go+vue) https://blog.csdn.net/m0_37592532/article/details/116066277
微信订阅消息接入 使用开放标签 在 H5网页设置订阅通知组件 https://blog.csdn.net/changingshow/article/details/114944818)
// vue3 标签内
<div ref="wxsub"></div>
// js
// 微信订阅消息事件
let wxsub = ref(null);
const getInfo = async () => {
// 获取appId,jsapi_ticket,nonceStr,openTagList,signature,timestamp,url
const res = await getConfigData();
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
// 如果安卓的话就使用动态url,ios使用接口返回的url
if (isAndroid) {
res.result.url = location.href
}
wx.config({
debug: false,
...res.result,
jsApiList: ["checkJsApi"], // 必填项
openTagList: ['wx-open-subscribe']
});
wx.ready(() => {
nextTick(() => {
// 如果多个订阅消息模板用,分隔
wxsub.value.innerHTML = `<wx-open-subscribe
id="subscribet"
template="template_id,template_id"
>
<template>
<style>
.subscribe-btn {
width: 72.5px;
height: 23px;
border: none;
outline: none;
background-color: #FDA400;
border-radius: 5px; color: #FFF;
font-size: 12px;
}
</style>
<button class="subscribe-btn">订阅通知</button>
</template>
</wx-open-subscribe>`;
const subscribet = document.getElementById('subscribet');
subscribet.addEventListener('success', function (e) {
console.log('success', e.detail);
})
subscribet.addEventListener('error', function (e) {
console.log('error', e.detail);
})
});
})
// 调用不成功
wx.error(err => {
alert(JSON.stringify(err));
})
}
return {
wxsub
}
目前未解决:小米手机订阅通知无效,原因暂时不明(欢迎各位大佬指正)
参考链接1 求助,vue页面(history模式路由)使用js-sdk突然报invalid signature https://segmentfault.com/q/1010000002520634
参考链接2 微信公众平台, config:invalid signature一直爆这个错误,求教如何解决?
https://segmentfault.com/q/1010000002520634
参考链接3 关于html5-History模式在微信浏览器内的问题 https://github.com/vuejs/vue-router/issues/481
参考链接4 jssdk 在history模式下安卓不能调用图片上传接口和分享接口
https://segmentfault.com/a/1190000013894295
参考链接5 vue中使用微信公众号js-sdk踩坑记录(2) https://segmentfault.com/a/1190000012339148?_ea=3486674