一键分享到QQ好友、QQ空间、新浪微博、微信代码

分享到 QQ

export const shareToQQ = (url, title, pic) => {
  const param = {
    // 分享地址(可选)
    url: url || 'www.baidu.com',
    // 分享理由(可选)
    desc: '',
    // 分享标题(可选)
    title: title || '',
    // 分享描述(可选)
    summary: '',
    // 分享图片(可选)
    pics: pic || '',
    // 视频地址(可选)
    flash: '',
    // 分享来源 (可选)
    site: '',
  };
  const temp = [];
  for (const key in param) {
    if (Object.prototype.hasOwnProperty.call(param, key)) {
      temp.push(`${key}=${encodeURIComponent(param[key] || '')}`);
    }
  }
  const targetUrl = `https://connect.qq.com/widget/shareqq/index.html?${temp.join('&')}`;
  window.open(targetUrl);
};

分享到 qq 空间

如果 url 是 localhost,qq 空间会显示 undefined,不用在意。

export const shareToQZone = (url, title, pic) => {
  const param = {
    // 分享地址(可选)
    url: url || 'www.baidu.com',
    // 分享理由(可选)
    desc: '',
    // 分享标题(可选)
    title: title || '',
    // 分享描述(可选)
    summary: '',
    // 分享图片(可选)
    pics: pic || '',
    // 视频地址(可选)
    flash: '',
    // 分享来源 (可选)
    site: '',
  };
  const temp = [];
  for (const key in param) {
    if (Object.prototype.hasOwnProperty.call(param, key)) {
      temp.push(`${key}=${encodeURIComponent(param[key] || '')}`);
    }
  }
  const targetUrl = `https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?${temp.join('&')}`;
  window.open(targetUrl);
};

分享到新浪微博

export const shareToWeibo = (url, title, pic) => {
  const param = {
    // 是否显示分享数,1显示(可选)
    count: 1,
    // 您申请的应用appkey,显示分享来源(可选)
    appkey: '',
    // 关联用户的UID,分享微博会@该用户(可选)
    ralateUid: '',
    // 分享地址(可选)
    url: url || 'www.baidu.com',
    // 分享的文字内容(可选,默认为所在页面的title)
    title: title || '',
    // 分享图片(可选)
    pic: pic || '',
    // rnd: new Date().valueOf()
  };
  const temp = [];
  for (const key in param) {
    if (Object.prototype.hasOwnProperty.call(param, key)) {
      temp.push(`${key}=${encodeURIComponent(param[key] || '')}`);
    }
  }
  const targetUrl = `http://service.weibo.com/share/share.php?${temp.join('&')}`;
  window.open(targetUrl);
};

分享到微信

使用成熟的库生产二维码,微信扫码即可访问。

  • https://github.com/davidshimjs/qrcodejs
  • https://www.npmjs.com/package/qrcode
  • https://www.npmjs.com/package/qrcode.react
© 2022  Arvin Xiang
Built with ❤️ by myself