首先先查阅官方微信js-SDK，根据官方提示引入sdk，使用sdk

vue npm 引入微信sdk，这个是优化封装。修正了微信js-sdk官方1.6.0的bug，并针对iOS系统url验证签名错误进行优化。

npm i jweixin-1.6.0

在需要分享的页面引入

import wx from 'jweixin-1.6.0'

这里我做了sdk请求的封装，就不用每个页面都去请求config配置的写法了，直接在需要的页面引入的sdk，把参数带进去就可以了，我在vue的utils文件夹里面新增了wxsdk.js内容，封装内容如下：

//  wetchat.js  －－ 个人封装
import wx from 'jweixin-1.6.0'; // 这是自己优化的sdk方法，可以解决ios签名报错的一些问题
// import wx from 'weixin-js-sdk'; // 这是官方的微信sdk引入方法
import {
  getConfig
} from '@/api/home'; // 本项目的api （根据自己项目）
export function wxChatShare(param) {  //这里的param参数在需要的页面写好，然后代入到这里来就可以了
  // let _url = encodeURIComponent(param.url) // 当前页面的url 
  let _url = param.url // 当前页面的url
  let data = {}
  data.sUrl = _url
  data.isNew = 1
  getConfig(data) // wechatConfig是获取微信配置相关信息的接口，此处根据个人项目写法而定，类似于this.$ajax
    .then(res => {
      if (res.code === '0000' && res.data) {
        console.log('res', res)
        let list = res.data
        // 接口返回配置信息
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "wx0e2d0b9d2a6b4ea5", // 必填，公众号的唯一标识
          timestamp: list.timeStamp, // 必填，生成签名的时间戳
          nonceStr: list.nonceStr, // 必填，生成签名的随机串
          signature: list.signature, // 必填，签名
          jsApiList: [ // 用的方法都要加进来
            'updateAppMessageShareData',
            'updateTimelineShareData',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'startRecord',
            'stopRecord',
            'playVoice',
            'pauseVoice',
            'stopVoice',
            'uploadVoice',
            'downloadVoice',
            'downloadVoice'
          ]
        });
        wx.checkJsApi({
          jsApiList: ['startRecord'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
          success: function (res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log('检查', res)
          }
        })
        wx.ready(function () {
          //分享到朋友圈
          wx.updateTimelineShareData({
            title: param.title, // 分享标题
            link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: param.imgUrl, // 分享图标
            success: function () {
              // 设置成功
              console.log("分享到朋友圈成功返回的信息为:", res);
              //   this.$Message.message("设置成功!");
            }
          })

          wx.onMenuShareTimeline({
            title: param.title, // 分享标题
            link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: param.imgUrl, // 分享图标
            success: function () {
              // 用户点击了分享后执行的回调函数
            },
          })

          //分享给朋友

          wx.updateAppMessageShareData({
            title: param.title, // 分享标题
            desc: param.desc, // 分享描述
            link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: param.imgUrl, // 分享图标
            success: function () {
              // 设置成功
              console.log("分享到朋友圈成功返回的信息为:", res);
              //   this.$Message.message("设置成功!");
            }
          })
          // wx.onMenuShareAppMessage({
          //   title: param.title, // 分享标题
          //   desc: param.desc, // 分享描述
          //   link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          //   imgUrl: param.imgUrl, // 分享图标
          //   type: param.type, // 分享类型,music、video或link，不填默认为link
          //   dataUrl: param.dataUrl, // 如果type是music或video，则要提供数据链接，默认为空
          //   success: function () {
          //     // 用户点击了分享后执行的回调函数
          //   }
          // });
        });
        wx.error(function (res) {
          console.log('验证失败返回的信息:', res);
        });
      } else {
        // console.log(res.data.message);
      }
    })
}

在需要调用sdk的页面调用这个封装的方法，比如在home.vue页面需要调用

<template>
  <div class="container">
    
  </div>
</template>

<script>
import { UploadFile, UploadVideo, getTts, getConfig, getWxid, getLaunch, getTask, getTa, examineText } from '@/api/home'  //这个是我封装请求后台api接口封装的方法，无需理会
import { wxChatShare } from '@/utils/wxsdk'  //这里直接调用已经封装好的wxsdk 方法

export default {
  name: '',
  data() {
    return {
              ttsSelect: 2
                  
    }
  },
  created() {
   
  },
  components: {
  
  },
  mounted() {},
  methods: {
    
  },
  //页面销毁清除定时器
  beforeDestroy() {
   
}
</script>

<style  lang='scss' scoped>

</style>

接下来就是要做如何拿到config配置，然后把这些参数给到已经封装好的skd里面，进而调用微信sdk

config配置一般由后台的同事提供，前端通过传当前页面url给到后台获取config信息，确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去'#'hash部分的链接（可用location.href.split('#')[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。

究竟什么导致呢，后来发现是history在微信中的问题，就是当从列表进入详情页的时候，往后台传入URL，跟你直接从详情页进入传的URL不一致。比如：A=>B，分享B

这时候你需要记录初始页的url，解决办法在你的main.js里，添加

router.beforeEach((to, from, next) => {
  if (!window.initUrl) {
    window.initUrl = location.href.split('#')[0]
  }
  next()
})

因为在安卓端就没有这个问题，不像ios在history模式下它跳转页面没有记录到初始页面的地址导致签名失败，所以安卓端传当前页面url时，直接可以用 

location.href.split('#')[0] //这里直接可以传给后台请求confing参数

这里就需要做安卓或者只ios设备的判断，下面代码是判断进入的设备是ios或者是安卓设备的代码（也是写在main.js

里面）：

// 判断ios还是android
  Vue.prototype.isIosOrAndroid = function () {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // android终端
    let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
    let isStr = ''
    if (isAndroid) {
      isStr = 'android'
    }
    if (isiOS) {
      isStr = 'ios'
    }
    return isStr
  }

 比如你在组件页面A - B请求微信后台config配置，那么你在B页面把url给到后台请求config参数

url: '....?url=' + encodeURIComponent(that.isIosOrAndroid() === 'android' ? location.href.split('#')[0] : window.initUrl)

这里我已经做了微信sdk的封装处理，所以我这里只需要把参数传给封装好的方法就可以了，我在页面初始化created 就执行了该请求

created() {

    let signLink = ''

    let linkStatu = this.isIosOrAndroid()   //判断安卓还是ios

    if (linkStatu === 'android') {
      signLink = location.href.split('#')[0]
    } else {
      signLink = window.initUrl
    }
    console.log('signLink6666', signLink)

    //请求微信sdk
    let params = {}
    params.url = signLink
    params.desc = ' AI黑科技'
    params.title = '猜猜我又让哪位明星给你捎话了？'
    params.link = 'https://....../AI-audio/shareCard'
    console.log('params', params)
    if (this.videoIndex == 0) {
      params.imgUrl = 'http://res.ctmus.cn/festival-h5.v2/resource/1628217074621.jpg'
    } else if (this.videoIndex == 1) {
      params.imgUrl = 'http://res.ctmus.cn/festival-h5.v2/resource/1628217020507.jpg'
    } else {
      params.imgUrl = 'http://res.ctmus.cn/festival-h5.v2/resource/1628215889003.jpg'
    }
    //请求微信sdk
    wxChatShare(params)  //这个方法就是我开头封装的方法，直接把参数带过就可以了
  },

事情到处理到这里已经差不多了，接下来就是要测试了，测试微信sdk，我有以下几个点提一下，记录一下我之前填过的坑

1.公众appid 里面的 js安全域名必须要配置你此次要上线项目的正式服的域名，比如域名为：http://www.test.com, 那你去请求后台config时，请求到的appid要跟这个公众号平台 js设置的域名保持一致

2.测试微信sdk功能时，因为我这里是用vue跑本地，测试是 http://localhost:8888/springai/aishowshow/，这里url不是你在http：www.test.com,所以直接这样测试会导致测试失败，如果你想调试请求成功后的微信sdk效果以及打印日志的话可以先打开微信开发者工具，然后打开里面的网页开发者工具，首先你要先在网页端输入官方请求sdk的链接，再打开你本地的链接测试sdk（如果没有这样做，调用不了sdk的效果），先打开：https://www.weixinsxy.com/jssdk/ 然后再打开你本地的地址进行调试

3.真正要开skd的效果得把项目发布到正式服上面，然后用手机打开进行调试的sdk是否有效

备注：这里我遇到一个坑就是做了公司的两个项目，分别为不同域名，第一个域名已经调试可以使用微信sdk，第二个域名就失败，前端的我傻傻的我在那里调试半天以为自己出了问题，最后才发现后端的同事还没有配置该域名的sdk参数，遇到问题我们不要一个人一味的装牛角尖，要学会跟相关的同事进行沟通处理解决方法