分享

点击分享唤起App自带分享组件，点击分享外链可以唤起App进入指定页面

唤起分享组件 vipkid://share，title，desc，imgUrl，link必须传，为空时会显示null

const shareToFacebook = (params) => {
  const desc = encodeURIComponent(params.desc);
  const title = encodeURIComponent(params.title);
  const imgUrl = encodeURIComponent(params.imgUrl);
  const link = encodeURIComponent(params.link);
  let url = `vipkid://share?title=${title}&desc=${desc}&imgUrl=${imgUrl}&link=${link}`;
  window.location.href = url;
};

1、第一种：分享出去的链接直接跳转到落地页

handleShare() {
  const { protocol, host } = window.location;
  const h5Url = encodeURIComponent(`${protocol}//${host}/account/quiz?sign=${this.shareSign}&channel_id=share_task`); // 落地页
  const params = {
    title: 'I would like to invite you to try VIPQuiz!',
    desc: 'Do you know more about VIPKid than the mysterious Odin?',
    imgUrl: 'https://img.vipkidstatic.com/ter/cms/img/2020/10/14/16/AbwS1602664456094quiz-share.png',
    link: `vkteacher://h5container/browser?url=${h5Url}`
  }
  shareToFacebook(params);
}

2、第二种：分享出去的链接需要唤起App并跳转到落地页

handleShare() {
  const { protocol, host } = window.location;
  const h5Url = encodeURIComponent(`${protocol}//${host}/account/quiz?sign=${this.shareSign}&channel_id=share_task`); // 落地页
  const appUrl = encodeURIComponent(`vkteacher://h5container/browser?url=${h5Url}`);
  const params = {
    title: 'I would like to invite you to try VIPQuiz!',
    desc: 'Do you know more about VIPKid than the mysterious Odin?',
    imgUrl: 'https://img.vipkidstatic.com/ter/cms/img/2020/10/14/16/AbwS1602664456094quiz-share.png',
    link: `${protocol}//${host}/account/link?app=${appUrl}` // account/link 检测是否安装App 可下载 或 唤起App
  }
  shareToFacebook(params);
}

需要注意的几点：

1. url支持 type 参数，取值为 system 时，唤起 【手机系统】自带分享组件, 默认唤起【App】分享组件。
2. facebook启用分享功能之前，需要使用开放图谱标签来标记页面的 HTML。meta标签的这些属性包括我们在用户分享文章时具体想要呈现的与文章有关的描述性元数据。这有助于确保当用户通过您的网站分享内容时，您的内容将以您预期的方式显示在 Facebook 上，并包含标题、说明以及缩略图。即 facebook 分享参数是从 link 页面的 mata中拿，不是从vipkid://share?title=${title}&desc=${desc}&imgUrl=${imgUrl}&link=${link}中拿。

即在 link 页面 设置如下 meta，第一种分享方式直接在落地页写，第二种分享方式需要在account/link页面写

head() {
  return {
    meta: [
      { property: 'og:title', content: '#I would like to invite you to try VIPQuiz!' },
      { property: 'og:description', content: 'Do you know more about VIPKid than the mysterious Odin?' },
      { property: 'og:image', content: 'https://img.vipkidstatic.com/ter/cms/img/2020/10/14/16/AbwS1602664456094quiz-share.png' },
    ]
  };
}

！！！注意了，搞完上面的，有可能还有问题 -> 假如nuxt.config.js中配置了同样的meta，会显示nuxt.config.js配置的内容

【解决方案】[Nuxt-head]说了，为了避免子组件中的 meta 标签不能正确覆盖父组件中相同的标签而产生重复的现象，建议利用 hid 键为 meta 标签配一个唯一的标识编号。如下，link 页面 和 nuxt.config.js 中 title, image, description均加上hid，值和 property 相同。