vue实现微信分享链接 生成卡片

Pc端链接转发至微信、朋友圈、QQ空间、微博等 具体实现如下 亲自实验过有用 可以看微信开放文档也有相关 *** 作步骤

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10

第一步先映入一个线上的微信的 JS-SDK vue项目在index.html 中直接如下即可
需要后台给我们提供一个接口如下

 第一个我们要先拿到当前页面的路由URL (正式和测试环境均可)
 let url = `http://med.drvoice.cn${this.$route.path}`
 然后我通过这个url去调取后台的接口getwxSign
 getwxSign(url).then((res) => {
      let data = res.data
      console.log(data, 'res')
      wx.config({
        debug: false,//调试的时候改为true即可（在转发的时候 即可触发 回打印到手机屏幕上 ）
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'],
        //jsApiList这个集合则是不同渠道转发的一个方法集合
      })
    })
这个地方则就是微信转发的方法
    const _this = this; //在里面会有this指向问题
    await wx.ready(function () {
      wx.onMenuShareAppMessage({
        title:  _this.titles, //当前页面的title对应生成卡片之后的title (通过后台接口给到你)
        desc: '会议日程',// 转发的小字 
        link: `http://med.drvoice.cn${_this.$route.path}`, //当前页面的路由URL 同调后台的那个URL一直即可
        imgUrl:  _this.weixinimg, //微信转发卡片上面的一个图片(通过后台接口给到你)
        success: function () {},
        cancel: function () {},
      })
    })
    可以加多个方法同微信转发的方法写法一直即可 换个名字就ok了比如分享微信朋友圈
    await wx.ready(function () {
      wx.onMenuShareTimeline({
        title:  _this.titles,
        link: `http://med.drvoice.cn${_this.$route.path}`,
        imgUrl:  _this.weixinimg,
        success: function () {
          console.log(titles,"this.titles");
        },
        cancel: function () {},
      })
    })

以上就是转发生成卡片的全部过程 有兴趣的朋友可以试试！！！！！！