微信分享wx.config配置时遇到invalid signature错误的解决办法

每次解决完问题,都想回到过去糊自己一巴掌。。。
官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62
1 若JSSDK已配置仍遇到invalid signature错误,一定参考“附录5-常见错误及解决方法”部分有检查步骤可参考,一定要先看再开发!!浪费了多少大好时光,流下悔恨的泪水。。
2 具体需要:
1)设置ip白名单
需要有开发权限 管理员权限 开发>基本配置>白名单>查看 IP白名单 多个IP用回车分隔。
2) 设置域名白名单

  1. 公众号设置—功能设置—js接口安全域名
  2. 第3点的txt文件要放到域名下,保证随时可以访问。https://www.xxxx666.com/report/MP_verify_wlPRmQ9ecc76yJF5.txt在浏览器可以访问。
    在这里插入图片描述
    3)1 logo图标需要放到服务器上,随时可以访问。 2 分享的链接必须是location.href.split('#')[0],否则报错invalid signature
    vue组件中:
import wxShare from "../wechat/wechat";
setShare() {
  let url=location.href.split('#')[0];
  //2020年
   let imgurl="https://www.xxxx666.com/img/report/logo.png"
   const shareInfo = {
     title: `“奉上您的2020总结`,
     desc: `支撑平台2020年终报告活动开始啦~`,
     link: url,
     img: imgurl
   }
   this.wechatShare(shareInfo)
 },
 //带个人信息的
 setSharePer(user) {
   let url
     if(location.href.indexOf('user')>=0){
        url=location.href.split('#')[0];
      }else{
        url="https://www.zhengqiyezhi666.com/report/#/?user="+user
      }
   let imgurl="https://www.xxxx666.com/img/report/logo.png"
   let shareInfo = {
     title: `快来看看我的年度报告吧—`,
     desc: `支撑平台2020年终报告活动开始啦~`,
     link: url,
     img: imgurl
   }
   this.wechatShare(shareInfo)
 },

引用的wechart.js

//weixin-js-sdk应用
//weixin-js-sdk应用
import axios from 'axios'
import {requestSign} from '@/api/api'
const wx = require('weixin-js-sdk')
export default {
  methods: {
    wechatShare(info) {
      const that = this
      // 判断苹果手机
      let _url = ''
      if (window.__wxjs_is_wkwebview === true) {
        _url = window.location.href.split('#')[0] || window.location.href
      } else {
        _url = window.location.href
      }
      let param={
        url:info.link
      }
//这里是封装的axios,换成任意请求皆可
      requestSign(param).then(res=>{
        wx.config({
          debug: false,
          appId: res.appid, // 必填,公众号的唯一标识
          timestamp: res.timestamp, // 必填,生成签名的时间戳
          nonceStr: res.noncestr, // 必填,生成签名的随机串
          signature: res.shasign, // 必填,签名,见附录1
          jsApiList: [
            'previewImage',
            'hideAllNonBaseMenuItem',
            'showMenuItems',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'chooseWXPay',
            'updateTimelineShareData'
          ] // 必填,需要使用的 JS 接口列表,所有JS接口列表见附录2
        })
      })
      wx.ready(() => {
        const share_title = info.title
        const share_desc = info.desc
        const share_link = info.link
        const share_img = info.img
        wx.showOptionMenu()
        wx.onMenuShareTimeline({
          title: share_title, // 分享标题
          link: share_link, // 分享链接
          imgUrl: share_img, // 分享图标
        })
        wx.onMenuShareAppMessage({
          title: share_title, // 分享标题
          desc: share_desc, // 分享描述
          link: share_link, // 分享链接
          imgUrl: share_img, // 分享图标
        })
        wx.updateTimelineShareData({
          title: share_title, // 分享标题
          desc: share_desc, // 分享描述
          link: share_link, // 分享链接
          imgUrl: share_img, // 分享图标
        })
      })

      wx.error((res) => {
        let b=JSON.stringify(res)
        alert(b)
      })
    },
  }
}


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