vueh5 链接进入页面，实现微信分享卡片形式

点击vueh5链接进入项目之后，需要实现分享功能，分享出去的要是卡片形式。

需要配置微信分享，这里参考下 https://blog.csdn.net/jlq_diligence/article/details/119704631?ops_request_misc=&request_id=&biz_id=102&utm_term=%E5%BE%AE%E4%BF%A1%E5%88%86%E4%BA%AB&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-119704631.pc_ask&spm=1018.2226.3001.4449

• 以下回答由chatgpt基于相关博客总结生成:

  针对优化问题，实现微信分享功能并以卡片形式展示，可以按照以下步骤：

  1. 首先在页面上引入微信分享接口的js文件，可以使用官方提供的js文件或者第三方库，例如jweixin-1.0.0.js。

  2. 在页面mounted的生命周期中，初始化微信JS-SDK，以及通过wx.ready()方法注册分享接口。代码如下：

  mounted() {
    // 引入微信JS-SDK
    const wx = require('jweixin-1.0.0.js')
  
    // 初始化微信JS-SDK
    wx.config({
      debug: false,
      appId: 'your app id',
      timestamp: parseInt(new Date().getTime() / 1000),
      nonceStr: 'nonce_str',
      signature: 'signature',
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo']
    })
  
    // 注册分享接口
    wx.ready(() => {
      wx.onMenuShareTimeline({
        title: '分享标题',
        link: '分享链接',
        imgUrl: '分享图片链接',
        success: function () {
          //分享成功回调函数
        },
        cancel: function () {
          //取消分享回调函数
        }
      });
      wx.onMenuShareAppMessage({
        title: '分享标题',
        desc: '分享描述',
        link: '分享链接',
        imgUrl: '分享图片链接',
        success: function () {
          //分享成功回调函数
        },
        cancel: function () {
          //取消分享回调函数
        }
      });
      wx.onMenuShareQQ({
        title: '分享标题',
        desc: '分享描述',
        link: '分享链接',
        imgUrl: '分享图片链接',
        success: function () {
          //分享成功回调函数
        },
        cancel: function () {
          //取消分享回调函数
        }
      });
      wx.onMenuShareWeibo({
        title: '分享标题',
        desc: '分享描述',
        link: '分享链接',
        imgUrl: '分享图片链接',
        success: function () {
          //分享成功回调函数
        },
        cancel: function () {
          //取消分享回调函数
        }
      });
    })
  }
  

  1. 以上注册的分享接口是在用户点击分享按钮时触发的，可以在需要的地方添加分享按钮，并绑定相应的接口。例如：

  <a href="#" @click="weixinShare('timeline')">分享到朋友圈</a>
  <a href="#" @click="weixinShare('appMessage')">分享给好友</a>
  

      weixinShare(scene) {
        const wx = require('jweixin-1.0.0.js')
        wx.ready(() => {
          wx.openEnterpriseChat({
            ...
          })
        })
      }
  

  1. 最后在分享出去的内容中，可以使用卡片形式展示，需要在微信公众平台后台配置相应的分享信息，例如在分享链接中设置meta标签，代码如下：

  <meta property="og:title" content="分享标题"/>
  <meta property="og:description" content="分享描述"/>
  <meta property="og:image" content="分享图片链接"/>
  <meta property="og:url" content="分享链接"/>
  <meta property="og:type" content="article"/>
  

  结合以上步骤，即可实现微信分享功能并以卡片形式展示。