微信分享jssdk

官方文档
具体公众号配置就不提了，具体写前端vue框架中的使用。
1.安装

npm install weixin-js-sdk

2.我是在app.vue中使用,因为每个路由页面分享的图片和文字都不同，所以我写在了app.vue中。
测试过程中可以把debug打开方便测试。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import wx from 'weixin-js-sdk';
import axios from 'axios'
export default {
    name: 'App',
    data(){
        return{
          title:'',
          desc:'',
          shareImg: '',
        }   
    },
    watch:{
      $route(to){
        // console.log(to.name,'to.name')
        if (to.name === 'mine'){
          this.title = 'mine的标题'
          this.desc = 'mine的描述'
          this.shareImg = 'mine的图片'
        }else {
          this.title = 'index的标题'
          this.desc = 'index的描述'
          this.shareImg = 'index的图片'
        }
        this.clickShare()
      }
    },
    mounted(){
        this.clickShare()
    },
    methods:{
        clickShare(){
          let self = this
          let url = location.href.split('#')[0]//在微信中分享，微信会在地址中添加随机参数要避掉
          let url2 = encodeURIComponent(url)//相应后台接收到地址也要转一下才能拿到真实地址

          axios.post('XXXXXXXXXXXXXX',{url: url2})
          .then((res)=>{
              let value = res.data //下面的参数名称与后台联调
              wx.config({
                  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                  appId: 'wxXXXXXXX', // 必填，企业号的唯一标识，此处填写企业号corpid
                  timestamp: value.timestamp, // 必填，生成签名的时间戳
                  nonceStr: value.noncestr, // 必填，生成签名的随机串
                  signature: value.signature,// 必填，签名，见附录1
                  jsApiList: [
                      'onMenuShareAppMessage',  //  分享到朋友接口
                      'onMenuShareTimeline',//分享到朋友圈
                  ], // 必填，需要使用的JS接口列表，所有JS接口列表见附录3
              });
              // 微信检查接口列表
              wx.checkJsApi({
                  jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'], // 本项目需要检测的JS接口列表
              });
              wx.ready(function(){
                  wx.onMenuShareAppMessage({  
                      title: self.title, // 分享标题
                      desc: self.desc, // 分享描述
                      link: value.url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                      imgUrl: self.shareImg,
                      success: function () {
                          console.log('分享成功调函数');
                      },
                      cancel: function () {
                          console.log('分享失败回调函数');
                      },
                  });

                  wx.onMenuShareTimeline({
                      title: self.title, 
                      desc: self.desc, 
                      link: value.url, 
                      imgUrl: self.shareImg,
                      success: function () {
                          console.log('分享成功调函数');
                      },
                      cancel: function () {
                          console.log('分享失败回调函数');
                      }
                  })
              })
          })
        },
    },
}
</script>