收藏
回答

微信H5页面分享,使用sdk config:fail,invalid signature?

公众号配置

代码片段

生成的signature是相同的

但是一直提示我config失败

请问是如何处理的,

回答关注问题邀请回答
收藏

1 个回答

  • 幸福屯大张
    幸福屯大张
    11-01

    问题已解决

    1.正确引入sdk,可以用npm也可以直接在html中写入标签

    2.正确使用config配置,我们项目采用的是后端计算签名返回给前端进行config配置

    3.正确配置公众号js安全域名,把微信官方对应文件放在指定位置,可以访问到txt文件

    4.服务端ip白名单需要正确配置

    可能需要注意的点:

    1.js安全域名配置有问题

    2.config使用签名时请求不要多次请求,因为wx.config是异步操作,多次请求会导致签名失败或过期(我们就是吃了这个坑)

    3.分享的时候,如果点击卡片进入,则分享也是卡片方案,如果是链接进入,则分享也是域名链接的方案

     <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    


    weiXinShareFn() {
      // 获取url
      const u = navigator.userAgent
      const isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1
      // 判断当前是否在微信浏览器内
      if (isWeixin) {
        getTicketApi().then(res => {
          let url = window.location.href
          if (res.code == 200) {
            getWxSettingApi({ url: url, jsapi_ticket: res.ticket }).then(req => {
              wx.config({
                debug: false, // 调试模式
                appId: req.appid, // 公众平台申请的id
                timestamp: req.timestamp, // 时间戳
                nonceStr: req.nonceStr, // 随机字符串
                signature: req.signature, // 签名
                jsApiList: [
                  // 申请需要使用的api
                  'updateAppMessageShareData',
                  'updateTimelineShareData',
                  'checkJsApi',
                  'onMenuShareTimeline',
                  'onMenuShareAppMessage',
                  'onMenuShareQQ',
                  'onMenuShareWeibo',
                  'onMenuShareQZone'
                ]
              })
    
    
              wx.ready(() => {
                console.log('我进ready')
                const shareData = {
                  title: this.$cookies.get('detail_title'), // 标题
                  desc: this.$cookies.get('detail_note')
                    ? this.$cookies.get('detail_note')
                    : this.$cookies.get('detail_conIntroduction'), //详情
                  link: url, // h5链接
                  imgUrl: config.websiteUrl + '/font/logo.png',
                  success: () => {
                    console.log('shareData分享成功')
                  }
                }
                //分享给朋友
                wx.updateAppMessageShareData(shareData)
                //分享到朋友圈
                wx.updateTimelineShareData(shareData)
                wx.onMenuShareTimeline(shareData)
                wx.onMenuShareAppMessage(shareData)
              })
              wx.error(function (errres) {
                console.info('失败:', errres)
              })
            })
          } else {
            this.$toast.fail(res.msg)
          }
        })
      }
    }
    
    11-01
    有用
    回复 1
    • 幸福屯大张
      幸福屯大张
      11-01
      引入sdk
      11-01
      回复
登录 后发表内容