H5页面在QQ和QQ空间内分享设置摘要和缩略图

深碍√TFBOYSˉ_ 2024-04-19 09:22 89阅读 0赞

H5页面在手机QQ和QQ空间内分享时，分享出去的只有链接，没有摘要和缩略图，使用微信的JS-SDK并没有得到想要的效果，后来查资料，看到有人通过给H5页面设置meta标签实现了这一功能；需要设置的meta标签如下：

后来自己尝试，发现这样确实可以达到想要的效果，可是问题是我的项目是基于vue-cli开发的，并且，我要分享的文章内容是动态获取的，这就需要动态的设置摘要和缩略图，后来，我找到了动态设置meta标签的方法；需要借助vue-mate来实现；具体步骤如下：

1. 安装vue-mate

npm install vue-meta --save

2.在main.js引入

import Meta from 'vue-meta'
    Vue.use(Meta)

3.为需要分享的页面meta

export default {
        metaInfo: {
          title: 'This is the test',
          meta: [
            { itemprop: 'name', content: this.shareTitle },
            { itemprop: 'image', content: this.shareImg },
            { name: 'description',itemprop:"description", content: this.shareDesc||this.shareUrl }
          ]
        }
    }

另外，使用异步请求的信息设置mate时，可使用 `metaInfo()` 方法。

<template>
      <div>
        <h1>{
       {
       { shareTitle }}}</h1>
      </div>
    </template>
    
    <script>
      export default {
        name: 'post',
        data () {
          return {
            shareTitle : '',
            shareImg :'',
            shareDesc: ''
          }
        },
        metaInfo () {
          return {
            meta: [
              { itemprop: 'name', content: this.shareTitle },
              { itemprop: 'image', content: this.shareImg },
              { name: 'description',itemprop:"description", content: this.shareDesc||this.shareUrl },
            ]
          }
      },
        created () {
          this.initData()
        },
        methods: {
          initData () {
            axios.get('some/url').then((resp) => {
              // 设置title时 metaInfo 会同时更新
              this.shareTitle = resp.title
              this.shareImg=resp.img;
              this.shareDesc= resp.decription
            })
          }
        }
      }
    </script>