首先先查阅官方微信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'

//  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>
    
  </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  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
  }

事情到处理到这里已经差不多了，接下来就是要测试了，测试微信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是否有效