vue3实现微信公众号一次性订阅消息+ios和Android的63002 config:invalid signature问题

微信开放文档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


版权声明:本文为weixin_44622464原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。