Vue项目“ 微信分享”自定义右下角的图标

npm install weixin-js-sdk --save

<script>
import wx from 'weixin-js-sdk'; // 引入wxjs
import { shares } from "@/api/course/training";

export default {  
  data () {
    return {    
      info: {},
      wechatConfig: null,      
    };
  },  
  created () {
    //console.log(this.$route.query.id)
    if(this.$route.query.id){
      this.handleView(this.$route.query.id)      
    }    
  },
  mounted() {
    document.title = '详情';        
  },
  methods: {
    getShareInfo(){
      let params = {
        url: location.href.split('#')[0] // 只需要传当前页面地址
      }
      shares(params).then(res => {
        this.wechatConfig = res
        // 在获取到配置信息之后，调用微信Js-SDK的初始化函数
        this.initWechatJsSDK()
      });
    },
    initWechatJsSDK () {
      // 设置微信Js-SDK的配置信息
      wx.config({
        debug: false,
        appId: this.wechatConfig.appId,
        timestamp: this.wechatConfig.timestamp,
        nonceStr: this.wechatConfig.nonceStr,
        signature: this.wechatConfig.signature,
        jsApiList: [
          // 需要使用的微信JS接口列表
          'updateAppMessageShareData',
          //'onMenuShareTimeline',
          // ...
        ]
      })

      // 配置完成后调用微信Js-SDK的ready函数
      wx.ready(() => {
        // 在ready函数中可以调用微信Js-SDK的其他接口
        // 设置分享给朋友的功能
        wx.updateAppMessageShareData({
          title: this.info.name,
          desc: '智创童趣-幼儿园体育数字化智慧平台',
          link: location.href.split('#')[0],
          imgUrl: this.info.cover,
          success: () => {
            // 分享成功的回调函数
          },
          cancel: () => {
            // 用户取消分享的回调函数
          }
        })
      })

      // 在配置出错的情况下调用错误处理函数
      wx.error((err) => {
        console.error(err)
      })
    },

    handleView(id){
      getTrainingDetail(id).then(res => {
        if(res.code == 200){
          this.info = res.data
          if(this.info.name.length > 12){
            document.title = this.info.name.substring(0, 12);
          }else{
            document.title = this.info.name
          }
          this.coverImage = this.info.cover
          this.extractImages()
          this.getShareInfo(); // 调用分享的事件
        }
      });
    }
  }
};
</script>