评论

微信公众号分享签名失效的原因

头发:请好好珍惜我

最近开发微信公众号H5页面遇到个问题,使用微信sdk配置config一直报签名错误,导致分享到好友/朋友圈失效,搞了很久终于找到问题了,原因是配置的URL不一致,所以导致获取到的签名有问题,具体备注请看下面代码

首先安装sdk,cnpm install weixin-js-sdk -S

在当前页面引入

import wx from 'weixin-js-sdk';

页面代码

     created() {
        // 使用这个api来隐藏按钮,如果需要放开可以不写
    document.addEventListener('WeixinJSBridgeReady',function onBridgeReady() {
     WeixinJSBridge.call('hideOptionMenu');
    });
       this.ConfigFun();
      }
      // 分享
    ConfigFun() {
      let url = window.location.href; // 链接一定要获取当前页面的完整链接,否则会一直报签名错误导致分享失败
      Config({url: url}).then(res => { // 后端返回的配置信息
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: res.appId, // 必填,公众号的唯一标识
          timestamp: res.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.nonceStr, // 必填,生成签名的随机串
          signature: res.signature, // 必填,签名
          jsApiList: res.jsApiList 
               // 必填,需要使用的JS接口列表,所有JS接口列表见附录2,(此处接口列表为后端传过来,直接使用,要注意的是前端使用了的接口需要后端配置里有,否则会因为没有权限导致签名错误而失效)
        });
        // 隐藏右上角菜单接口,如果需要放开可以不写
        // wx.hideOptionMenu();
        // 隐藏所有基础类,如果需要放开可以不写
        // wx.hideAllNonBaseMenuItem();
        wx.ready(() => {
          wx.checkJsApi({ // 检验接口是否有效
            jsApiList: res.jsApiList,
            success(res) {
              if (res.checkResult.getLocation == false){
                alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
                return;
              }
            }
          });
               wx.onMenuShareAppMessage({ // 分享给朋友(即将废弃)
          title: this.goodsInfo.title,// 分享标题
         desc: this.goodsInfo.subtitle, // 分享描述
         link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: this.goodsInfo.cover, // 分享图标
         type'link'// 分享类型,music、video或link,不填默认为link
         success(res) {
          // 设置成功
          console.log('朋友成功');
         }
        });
        wx.onMenuShareTimeline({ // 分享到朋友圈(即将废弃)
          title: this.goodsInfo.title,// 分享标题
         desc: this.goodsInfo.subtitle, // 分享描述
         link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: this.goodsInfo.cover, // 分享图标
         type'link'// 分享类型,music、video或link,不填默认为link
         success(res) {
          // 设置成功
          console.log('朋友成功');
         }
        });
               wx.updateTimelineShareData({ // 分享到朋友圈
          title: this.goodsInfo.title,// 分享标题
         desc: this.goodsInfo.subtitle, // 分享描述
         link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: this.goodsInfo.cover, // 分享图标
         type'link'// 分享类型,music、video或link,不填默认为link
         success(res) {
          // 设置成功
          console.log('朋友成功');
         }
        });
               wx.updateAppMessageShareData({ // 分享给朋友
          title: this.goodsInfo.title,// 分享标题
         desc: this.goodsInfo.subtitle, // 分享描述
         link: this.url, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
         imgUrl: this.goodsInfo.cover, // 分享图标
         type'link'// 分享类型,music、video或link,不填默认为link
         success(res) {
          // 设置成功
          console.log('朋友成功');
         }
        });
          wx.hideMenuItems({ // 需要隐藏的菜单
            menuList: ["menuItem:share:email"]
          });
          wx.error(function(res){ // 返回错误信息
            console.log(res);
          });
        });
      }).catch(err => {
        this.$toast(err.errmsg);
      });
    },


最后一次编辑于  2020-04-21  
点赞 1
收藏
评论

4 个评论

  • 张玉峰
    张玉峰
    2020-10-22

    我想请问一下在微信浏览器中进行了刷新操作后分享点击无效问题,再次刷新(第二次刷新)就好了,这个问题遇到过吗?

    2020-10-22
    赞同
    回复 1
    • 麦子
      麦子
      2022-11-15
      你好,你有解决这个问题吗?获取签名一直不稳定,有时候能获取到,有时候获取不到,要怎么解决,谢谢!!!
      2022-11-15
      回复
  • +-+ +-+
    +-+ +-+
    2020-08-27

    非常感谢,解决了我的问题

    2020-08-27
    赞同
    回复
  • ZeonWang
    ZeonWang
    2020-04-22

    您好 目前我正在做一个类似于这样的项目 需求也是在H5上增加一个按钮点击它分享到朋友圈 而不通过右上角三个点点击分享 请问也是通过WeixinJSBridge去调起吗

    2020-04-22
    赞同
    回复 3
    • Lspeng
      Lspeng
      2020-04-22
      WeixinJSBridge.invoke('shareTimeline',{
        "img_url":imgUrl,
        //"img_width":"640",
        //"img_height":"640",
        "link":link,
        "desc": desc,
        "title":title
       });
      通过这个方法可以调起
      2020-04-22
      回复
    • ZeonWang
      ZeonWang
      2020-04-23回复Lspeng
      这个方法是需要wx.ready里吗 ?如何把他给按钮 ?我会报invoke未定义
      2020-04-23
      回复
    • Lspeng
      Lspeng
      2020-04-24回复ZeonWang
      这个不用写ready里好像,你写个方法,把代码丢进去,直接点击按钮调用这个方法就行了
      2020-04-24
      回复
  • Mr.Zhao
    Mr.Zhao
    2020-04-17

    2020-04-17
    赞同
    回复 1
    • Lspeng
      Lspeng
      2020-04-21
      问题处理了,url不一致导致的
      2020-04-21
      回复
登录 后发表内容